From 051a82ef0347e6e122f963d5aaf993e05e4bcafe Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sat, 7 Apr 2018 15:38:06 +0000
Subject: [PATCH] Elastic: Fix so closing mobile popup menu does not close
 dialogs below, plus some css improvements

---
 skins/elastic/styles/colors.less           |  1 +
 skins/elastic/styles/widgets/dialogs.less  |  4 ++++
 skins/elastic/styles/widgets/forms.less    |  4 ++++
 skins/elastic/styles/widgets/jqueryui.less | 10 +++++++++-
 skins/elastic/ui.js                        | 17 +++++++++++------
 5 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 7400f693c..d42060492 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -142,6 +142,7 @@
 @color-input-addon-background:      @color-black-shade-bg;
 @color-recipient-input-border:      @color-input-border;
 @color-recipient-input-background:  @color-black-shade-bg;
+@color-input-placeholder:           #bbb;
 
 @color-checkbox:                    @color-main;
 @color-checkbox-checked:            @color-main;
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 2ce83ed91..fbb95ad31 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -119,6 +119,10 @@ html.layout-phone {
         color: @color-popover-mobile-header;
         background-color: @color-popover-mobile-header-background;
 
+        &:before {
+            display: none; // hide the Bootstrap's popover arrow element
+        }
+
         a {
             display: inline-block;
             width: 100%;
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 3d1b89eac..874385b8b 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -1344,6 +1344,10 @@ td.input-group input {
             box-shadow: 0 0 0 .2rem @color-input-border-invalid-shadow;
         }
     }
+
+    &::placeholder {
+        color: @color-input-placeholder;
+    }
 }
 
 .invalid-feedback {
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index 1887be23b..35ed0b75f 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -167,6 +167,7 @@
         height: 100% !important;
         display: flex;
         flex-direction: column;
+        border: 0;
 
         .ui-resizable-handle,
         .ui-dialog-titlebar-close {
@@ -202,14 +203,17 @@
 
                 button {
                     margin: 0 !important;
+                    padding: .45rem;
                     border: 0 !important;
                     height: @layout-header-height;
                     box-shadow: none;
+                    font-size: 90%;
 
                     &:before {
                         display: block !important;
                         width: auto;
-                        height: 1.25em;
+                        height: 1.75rem;
+                        line-height: 1.75;
                         margin: 0;
                     }
 
@@ -237,9 +241,13 @@
                 a.btn-link {
                     color: @color-toolbar-button;
                     margin: 0;
+                    padding: .45rem;
+                    font-size: 90%;
 
                     &.options:before {
                         display: block !important;
+                        height: 1.75rem;
+                        line-height: 1.75;
                     }
 
                     &.options:after {
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 022265c07..c3b1b78fa 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -1888,13 +1888,18 @@ function rcube_elastic_ui()
                         class_name = 'button icon ' + (label == 'back' ? 'back' : 'cancel');
 
                     $('.popover-header', popover).empty()
-                        .append($('<a>').attr('class', class_name).text(title))
-                        .off('click').on('click', function(e) {
-                            $(item).popover('hide');
-                            if (level > 1) {
+                        .append($('<a>').attr('class', class_name).text(title)
+                            .on('click', function(e) {
+                                $(item).popover('hide');
+                                if (level > 1) {
+                                    e.stopPropagation();
+                                }
+                            })
+                            .on('mousedown', function(e) {
+                                // stop propagation to i.e. do not close jQuery-UI dialogs below
                                 e.stopPropagation();
-                            }
-                        });
+                            })
+                        );
                 }
 
                 // Hide other menus on the same level