From 5016252cc316670e9b7cbd6bd850814aa8ad2804 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sun, 28 May 2017 12:50:12 +0200
Subject: [PATCH] Improve popups style

---
 skins/elastic/styles/widgets/forms.less   | 17 ++++++++++++++++-
 skins/elastic/styles/widgets/toolbar.less | 11 ++++++++++-
 skins/elastic/templates/addressbook.html  |  2 +-
 skins/elastic/templates/mail.html         |  2 +-
 skins/elastic/ui.js                       |  5 ++++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 1556ddb65..d477272a5 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/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 {
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
index bc3ea9ce5..6e9196aad 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/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 {
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index 24f78bc8d..bae2ee10f 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/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>
diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
index 100a5e09b..f40959b38 100644
--- a/skins/elastic/templates/mail.html
+++ b/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>
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index df1e02bcd..c44a40477 100644
--- a/skins/elastic/ui.js
+++ b/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));
             });