diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index cf470034b..933eda632 100644
--- a/skins/elastic/styles/colors.less
+++ b/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%);
+
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 9f7397d06..9971cccbc 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/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;
}
diff --git a/skins/elastic/styles/widgets/mail.less b/skins/elastic/styles/widgets/mail.less
index fbe13e32a..3807965cb 100644
--- a/skins/elastic/styles/widgets/mail.less
+++ b/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;
+ }
+ }
+}
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
index 407229aee..525276b15 100644
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/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 {
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
index e34f5cc4f..807a70f69 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/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 {
diff --git a/skins/elastic/templates/messagepart.html b/skins/elastic/templates/messagepart.html
index 056c85c52..799221b9c 100644
--- a/skins/elastic/templates/messagepart.html
+++ b/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" />