Improve popups style

skins/elastic/styles/widgets/forms.less

@@ -110,9 +110,24 @@ html.ms .propform {
     }
 }
 
-
 td.editfield { width: 99%;  /* TODO */ }
 
+
+/*** Forms in popups ***/
+
+.popupmenu.form {
+    margin: 0.5rem;
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .buttons {
+        text-align: center;
+    }
+}
+
 /*** Files upload widget with list of files, upload form and drop area ***/
 
 .file-upload {

skins/elastic/styles/widgets/toolbar.less

@@ -139,13 +139,16 @@
 }
 
 .popupmenu.toolbar.listing {
+    a.button:before {
+        display: inline-block;
+    }
+
     .dropbutton {
         display: flex;
 
         a.button:first-child {
             overflow: hidden;
             text-overflow: ellipsis;
-            margin-right: 0.5em;
             flex: 1;
         }
 
@@ -155,6 +158,8 @@
 
             &:before {
                 content: @fa-var-angle-right;
+                margin-left: 0.5em;
+                margin-right: 0;
             }
 
             span.inner {
@@ -167,6 +172,10 @@
         height: 1px;
         display: block;
     }
+
+    li:last-child {
+        border: 0;
+    }
 }
 
 .toolbarmenu li {

skins/elastic/templates/addressbook.html

@@ -118,7 +118,7 @@
 	</ul>
 </div>
 
-<div id="search-menu" class="popupmenu" data-editable="true" data-popup-init="searchmenu">
+<div id="search-menu" class="popupmenu form" data-editable="true" data-popup-init="searchmenu">
 	<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-search-menu">
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="name" id="s_mod_name" /> <span><roundcube:label name="name" /></span></label></li>

skins/elastic/templates/mail.html

@@ -102,7 +102,7 @@
 </div>
 
 <!-- popup menus -->
-<div id="search-menu" class="popupmenu" data-editable="true" data-popup-init="searchmenu">
+<div id="search-menu" class="popupmenu form" data-editable="true" data-popup-init="searchmenu">
 	<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
 	<ul class="toolbarmenu" role="menu" aria-labelledby="aria-label-search-menu">
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="subject" id="s_mod_subject" /> <span><roundcube:label name="subject" /></span></label></li>

skins/elastic/ui.js

@@ -787,7 +787,6 @@ function rcube_elastic_ui()
         //       another popup menu with these options should be created
         //       on the list (or sidebar if there's no list element).
         // TODO: spacer item
-        // TODO: dropbutton 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)
@@ -800,6 +799,10 @@ function rcube_elastic_ui()
 
             toolbar.children().each(function() {
                 var 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));
             });