Some icons improvements and style for dropbutton in a popupmenu

skins/elastic/styles/widgets/lists.less

@@ -365,26 +365,40 @@ table.fixedcopy {
     }
     td.subject span.msgicon.status:before {
         &:extend(.font-icon-class);
-        content: @fa-var-circle-o;
+        content: @fa-var-circle;
         cursor: pointer;
+        font-size: 0.4em;
+        width: 3em;
     }
-    tr.unread td.subject span.msgicon.status:before {
-        content: @fa-var-circle;
+    td.subject span.msgicon.status.unread:before {
+        content: @fa-var-star;
+        font-size: 1.2em;
+        width: 1em;
     }
-    td.subject span.msgicon.unreadchildren:before {
-        content: @fa-var-dot-circle-o;
+    td.subject span.msgicon.status.unreadchildren:before {
+        content: @fa-var-star-half-o;
+        font-size: 1.2em;
+        width: 1em;
     }
     td.subject span.msgicon.status.replied:before {
         content: @fa-var-mail-reply;
+        font-size: 1.2em;
+        width: 1em;
     }
     td.subject span.msgicon.status.forwarded:before {
         content: @fa-var-mail-forward;
+        font-size: 1.2em;
+        width: 1em;
     }
     td.subject span.msgicon.status.replied.forwarded:before {
         content: @fa-var-mail-forward; /* TODO */
+        font-size: 1.2em;
+        width: 1em;
     }
     tr.deleted td.subject span.msgicon.status:before {
         content: @fa-var-ban;
+        font-size: 1.2em;
+        width: 1em;
     }
 
     span.attachment span {

skins/elastic/styles/widgets/toolbar.less

@@ -126,6 +126,37 @@
     }
 }
 
+.toolbar.listing {
+    .dropbutton {
+        display: flex;
+
+        a.button:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-right: 0.5em;
+            flex: 1;
+        }
+
+        a.button.dropdown {
+            font-size: 100%;
+            cursor: pointer;
+
+            &:before {
+                content: @fa-var-angle-right;
+            }
+
+            span.inner {
+                display: none;
+            }
+        }
+    }
+
+    .spacer {
+        height: 1px;
+        display: block;
+    }
+}
+
 .toolbarmenu li {
     a {
         opacity: 0.5;

skins/elastic/ui.js

@@ -661,7 +661,7 @@ function rcube_elastic_ui()
 
             layout.content.children('.header')
                 // TODO: copy original toolbar attributes (class, role, aria-*)
-                .append($('<ul>').attr({'class': 'toolbar popupmenu', id: 'toolbar-menu'}).append(items))
+                .append($('<ul>').attr({'class': 'toolbar popupmenu listing', id: 'toolbar-menu'}).append(items))
                 .append(menu_button);
 
             // TODO: A menu converted to a popup will be hidden on click in the body