Support image tools

skins/elastic/styles/colors.less

@@ -184,3 +184,10 @@
 @color-datepicker-highlight-background: lighten(@color-main, 30%);
 @color-datepicker-active:               #fff;
 @color-datepicker-active-background:    @color-main;
+
+
+// Image tools
+@color-image-tools:                     #fff;
+@color-image-tools-background:          fadeout(@color-main, 60%);
+@color-image-tools-hover:               fadeout(@color-main, 50%);
+

skins/elastic/styles/widgets/buttons.less

@@ -116,6 +116,7 @@ button.btn {
     &.folders:before {
         content: @fa-var-folder-open;
     }
+    &.tools:before,
     &.settings:before {
         content: @fa-var-wrench;
     }

skins/elastic/styles/widgets/mail.less

@@ -219,3 +219,61 @@
         margin: 0;
     }
 }
+
+.image-tools {
+    position: absolute;
+    top: 5rem;
+    right: 0;
+    height: @layout-header-height;
+    overflow: hidden;
+    transform: translateX(87%);
+    transition: transform 0.3s ease-in-out;
+    background-color: @color-image-tools-background;
+    border-radius: .3rem 0 0 .3rem;
+
+    .toolbar {
+        display: inline-block;
+        white-space: nowrap;
+        margin-right: 1rem;
+
+        a.button:before {
+            width: auto;
+            height: 1.75rem;
+            display: block;
+            float: none;
+        }
+    }
+
+    a.button.icon.tools {
+        padding: 0 .25rem;
+        display: inline-block;
+        height: @layout-header-height;
+
+        span.inner {
+            display: none;
+        }
+
+        &:before {
+            line-height: @layout-header-height;
+            margin: 0;
+        }
+    }
+
+    &.open {
+        transform: translateX(0);
+
+        a.button.icon.tools:before {
+            content: @fa-var-chevron-right;
+        }
+    }
+
+    a {
+        color: @color-image-tools;
+
+        &:focus,
+        &:hover {
+            background-color: @color-image-tools-hover !important;
+            outline: 0;
+        }
+    }
+}

skins/elastic/styles/widgets/taskmenu.less

@@ -139,7 +139,7 @@
     @media screen and (min-width: (@screen-width-medium + 1px)) {
         a {
             width: @layout-menu-width;
-            height: @layout-header-height;
+            height: (@layout-header-height - .05rem);
             font-size: 1rem;
 
             &:before {

skins/elastic/styles/widgets/toolbar.less

@@ -197,6 +197,15 @@
         &.properties:before {
             content: @fa-var-file;
         }
+        &.zoomin:before {
+            content: @fa-var-search-plus;
+        }
+        &.zoomout:before {
+            content: @fa-var-search-minus;
+        }
+        &.rotate:before {
+            content: @fa-var-redo-alt;
+        }
     }
 
     &:not(.popupmenu) span.inner {

skins/elastic/templates/messagepart.html

@@ -50,6 +50,17 @@
 					class="button more" label="more" title="moreactions" data-popup="message-menu"
 					innerclass="inner" data-hidden="small" />
 			<roundcube:endif />
+			<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
+				<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
+					class="button zoomin disabled" classAct="button zoomin"
+					label="zoomin" title="increaseimage" innerclass="inner" />
+				<roundcube:button command="image-scale" type="link" prop="-" data-hidden="small"
+					class="button zoomout disabled" classAct="button zoomout"
+					label="zoomout" title="decreaseimage" innerclass="inner" />
+				<roundcube:button command="image-rotate" type="link"
+					class="button rotate disabled" classAct="button rotate" data-hidden="small"
+					label="rotate" title="rotateimage" innerclass="inner" />
+			<roundcube:endif />
 		</div>
 	</div>
 	<h2 id="aria-label-messagepart" class="voice"><roundcube:label name="arialabelattachmentpreview" /></h2>
@@ -88,4 +99,25 @@
 	</div>
 <roundcube:endif />
 
+<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
+	<div id="image-tools" class="image-tools" data-hidden="big">
+		<h3 id="aria-label-imagetools" class="voice"><roundcube:label name="arialabelimagetools" /></h3>
+		<a href="#" class="button icon tools" onclick="$(this).attr('title', $(this).data('label-' + ($('#image-tools').toggleClass('open').is('.open') ? 'hide' : 'show')))"
+			data-label-show="<roundcube:label name="showtools" />" data-label-hide="<roundcube:label name="hidetools" />" title="<roundcube:label name="showtools" />">
+			<span class="inner"><roundcube:label name="showtools" /></span>
+		</a>
+		<div class="toolbar" role="menu" aria-labelledby="aria-label-imagetools">
+			<roundcube:button command="image-scale" type="link" prop="+"
+				class="button zoomin disabled" classAct="button zoomin"
+				label="zoomin" title="increaseimage" innerclass="inner" />
+			<roundcube:button command="image-scale" type="link" prop="-"
+				class="button zoomout disabled" classAct="button zoomout"
+				label="zoomout" title="decreaseimage" innerclass="inner" />
+			<roundcube:button command="image-rotate" type="link"
+				class="button rotate disabled" classAct="button rotate"
+				label="rotate" title="rotateimage" innerclass="inner" />
+		</div>
+	</div>
+<roundcube:endif />
+
 <roundcube:include file="includes/footer.html" />