Icons in Responses menu, and other menu improvements

skins/elastic/styles/colors.less

@@ -58,9 +58,6 @@
 @color-toolbarmenu-hover-background:    darken(@color-main, 20%);
 
 
-@color-pagenav-secondary:           #666;
-
-
 // Listings
 @color-list:                        @color-font;
 @color-list-selected:               inherit;
@@ -89,6 +86,9 @@
 // Popovers (menus)
 @color-popover-header:              #888;
 @color-popover-header-background:   transparent;
+@color-popover-shadow:              #eee;
+@color-popover-separator:           #666;
+@color-popover-separator-background: #f4f4f4;
 
 
 // Dialogs

skins/elastic/styles/widgets/dialogs.less

@@ -30,10 +30,14 @@
     }
 }
 
+.popover {
+    box-shadow: 3px 3px 5px @color-popover-shadow;
+
+    & > h3 {
         /* On mobile don't display popup arrows and titles */
-.popover > h3 {
         display: none;
     }
+}
 
 html.layout-small,
 html.layout-phone {

skins/elastic/styles/widgets/taskmenu.less

@@ -26,7 +26,7 @@
             &:extend(.font-icon-class);
             display: block;
             height: 1.75rem;
-            line-height: 1.75;
+            line-height: 1.5;
             width: @layout-menu-width;
         }
 

skins/elastic/styles/widgets/toolbar.less

@@ -164,11 +164,14 @@
                 display: none;
             }
         }
+
+        a.button:first-child {
+            padding-right: 0;
+        }
     }
 
     & > .spacer {
-        display: inline-block;
+        width: 1em;
-        width: 1.2em;
     }
 
     &.pagenav {
@@ -290,9 +293,8 @@
         }
     }
 
-    .spacer {
+    li.spacer {
-        height: 1px;
+        display: none;
-        display: block;
     }
 
     li:last-child {
@@ -303,10 +305,11 @@
 .toolbarmenu li {
     &.separator {
         /* TODO: all separator properties */
-        line-height: 1.5em;
+        line-height: 1.5rem !important;
-        font-size: .75em;
+        font-size: .75rem;
         padding: 0 .5rem;
-        color: #888;
+        color: @color-popover-separator;
+        background-color: @color-popover-separator-background;
 
         label {
             margin: 0; /* Unsets Bootstrap label margin, bug? */
@@ -352,6 +355,9 @@
     a.extwin:before {
         content: @fa-var-external-link;
     }
+    a.create:before {
+        content: @fa-var-plus-square;
+    }
     a.edit:before {
         content: @fa-var-edit; /* TODO: edit.asnew */
     }
@@ -430,6 +436,9 @@
     a.settings:before {
         content: @fa-var-sliders;
     }
+    a.insertresponse:before {
+        content: @fa-var-comment;
+    }
 }
 
 #layout > .sidebar,

skins/elastic/templates/compose.html

@@ -237,8 +237,8 @@
 		<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
 		<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
 		<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
-		<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="newresponse" classAct="newresponse active" unselectable="on" />
+		<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="create responses" classAct="create responses active" unselectable="on" />
-		<roundcube:button command="responses" type="link-menuitem" label="editresponses" class="responses" classAct="responses active" />
+		<roundcube:button command="responses" type="link-menuitem" label="editresponses" class="edit responses" classAct="edit responses active" />
 	</ul>
 </div>
 

skins/elastic/ui.js

@@ -1243,10 +1243,6 @@ function rcube_elastic_ui()
 
         env.got_smart_toolbar = true;
 
-        // TODO: if the toolbar contains "global or list only" buttons
-        //       another popup menu with these options should be created
-        //       on the list (or sidebar if there's no list element).
-        // TODO: spacer item
         // TODO: a way to inject buttons to the menu from content iframe
         //       or automatically add all buttons except Save and Cancel
         //       (example QR Code button in contact frame)
@@ -1258,12 +1254,20 @@ function rcube_elastic_ui()
             var toolbar = $(this);
 
             toolbar.children().each(function() {
-                var button = $(this).detach();
+                var item = $('<li role="menuitem">'),
+                    button = $(this).detach();
 
                 // Remove empty text nodes that break alignment of text of the menu item
                 button.contents().filter(function() { if (this.nodeType == 3 && !$.trim(this.nodeValue).length) $(this).remove(); });
 
-                items.push($('<li role="menuitem">').append(button));
+                if (button.is('.spacer')) {
+                    item.addClass('spacer');
+                }
+                else {
+                    item.append(button);
+                }
+
+                items.push(item);
             });
 
             toolbar.remove();