From bf9998b69748d3e402631c66ef258987406ee1c2 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Wed, 6 Dec 2017 21:18:16 +0100
Subject: [PATCH] Make search/filter bars use full width of the container,
 simplify js code

---
 skins/elastic/styles/widgets/searchbar.less | 25 ++++++++++++++++++++-
 skins/elastic/ui.js                         | 21 +++++++----------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/skins/elastic/styles/widgets/searchbar.less b/skins/elastic/styles/widgets/searchbar.less
index d4a173481..afc802d76 100644
--- a/skins/elastic/styles/widgets/searchbar.less
+++ b/skins/elastic/styles/widgets/searchbar.less
@@ -14,7 +14,6 @@
 .searchbar {
     position: absolute;
     background-color: @color-layout-header-background;
-    z-index: 10;
     right: 0;
     height: @layout-header-height;
     display: block !important;
@@ -22,6 +21,7 @@
     a.button {
         min-width: auto;
         padding: 0 .5rem;
+        display: block;
 
         &:before {
             line-height: @layout-header-height;
@@ -39,6 +39,10 @@
         font-size: 80%;
     }
 
+    form {
+        display: none;
+    }
+
     a.icon {
         &:before {
             &:extend(.font-icon-class);
@@ -56,6 +60,25 @@
     &.active a.button.search {
         color: @color-searchbar-icon-active;
     }
+
+    &.open {
+        z-index: 10;
+        left: 0 !important;
+        right: 0 !important;
+
+        .input-group {
+            display: flex;
+        }
+
+        form {
+            display: flex;
+        }
+
+        a.button.filter,
+        a.button.search {
+            display: none;
+        }
+    }
 }
 
 .searchfilterbar {
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index b13dcc3bd..5cd5491b6 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -1375,10 +1375,9 @@ function rcube_elastic_ui()
                 if (button.is(':visible')) {
                     return;
                 }
-                form.hide();
-                // width:auto fixes search button position in Chrome
-                $(bar).css('left', 'auto')[is_search_pending() ? 'addClass' : 'removeClass']('active');
-                button.css('display', 'block');
+
+                $(bar).removeClass('open')[is_search_pending() ? 'addClass' : 'removeClass']('active');
+
                 if (focus && rcube_event.is_keyboard(event)) {
                     button.focus();
                 }
@@ -1403,9 +1402,7 @@ function rcube_elastic_ui()
 
         // Display search form
         button.on('click', function() {
-            $(bar).css('left', 0);
-            form.css('display', 'flex');
-            button.hide();
+            $(bar).addClass('open');
             input.focus();
         });
 
@@ -1463,9 +1460,9 @@ function rcube_elastic_ui()
                 if (button.is(':visible')) {
                     return;
                 }
-                form.hide();
-                bar.css('left', 'auto')[is_filter_enabled() ? 'addClass' : 'removeClass']('active');
-                button.css('display', 'block');
+
+                bar.removeClass('open')[is_filter_enabled() ? 'addClass' : 'removeClass']('active');
+
                 if (focus && rcube_event.is_keyboard(event)) {
                     button.focus();
                 }
@@ -1488,9 +1485,7 @@ function rcube_elastic_ui()
 
         // Display filter selection (with animation effect)
         button.on('click', function() {
-            $(bar).css('left', 0);
-            form.css('display', 'flex');
-            button.hide();
+            bar.addClass('open');
             select.focus();
         });