Fix image tools on mobile (and move it to left side)

skins/elastic/styles/widgets/mail.less

@@ -223,18 +223,17 @@
 .image-tools {
     position: absolute;
     top: 5rem;
-    right: 0;
+    left: 0;
     height: @layout-header-height;
     overflow: hidden;
-    transform: translateX(87%);
+    transform: translateX(-87%);
     transition: transform 0.3s ease-in-out;
     background-color: @color-image-tools-background;
-    border-radius: .3rem 0 0 .3rem;
+    border-radius: 0 .3rem .3rem 0;
 
     .toolbar {
-        display: inline-block;
-        white-space: nowrap;
-        margin-right: 1rem;
+        float: left;
+        height: @layout-header-height;
 
         a.button:before {
             width: auto;
@@ -263,7 +262,7 @@
         transform: translateX(0);
 
         a.button.icon.tools:before {
-            content: @fa-var-chevron-right;
+            content: @fa-var-chevron-left;
         }
     }
 

skins/elastic/templates/messagepart.html

@@ -102,10 +102,6 @@
 <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"
@@ -117,6 +113,10 @@
 				class="button rotate disabled" classAct="button rotate"
 				label="rotate" title="rotateimage" innerclass="inner" />
 		</div>
+		<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>
 <roundcube:endif />