Better .header-title

skins/elastic/styles/layout.less

@@ -153,6 +153,8 @@ body > #layout {
                 flex: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
+                text-align: center;
+                margin: 0 -20rem;
             }
         }
 
@@ -196,6 +198,7 @@ html.iframe body {
 
     body > #layout > div:not(.content) > .header {
         font-size: @layout-touch-header-font-size;
+
         a.button:before {
             font-size: 1.75rem;
             height: @layout-touch-header-height;
@@ -234,19 +237,17 @@ html.iframe body {
         }
     }
 
-    body > #layout > div > .header.with-search-and-toolbar {
-        & > .header-title {
-            margin-right: (@layout-touch-icon-width * 2);
-        }
-
-        & > .searchfilterbar {
+    body > #layout > div > .header {
+        &.with-search {
+            .searchfilterbar {
                 right: (@layout-touch-icon-width * 2);
             }
 
-        & > .searchbar {
+            .searchbar {
                 right: @layout-touch-icon-width;
             }
         }
+    }
 
     .hidden-small {
         display: none !important;
@@ -279,6 +280,10 @@ html.iframe body {
         display: none;
     }
 
+    body > #layout > .list > .header > .header-title {
+        display: none;
+    }
+
     .hidden-large {
         display: none !important;
     }

skins/elastic/styles/widgets/jqueryui.less

@@ -17,12 +17,12 @@
 
 .ui-dialog {
     .ui-dialog-titlebar {
-        height: 4rem;
+        height: @layout-header-height;
         border-bottom: 1px solid @color-dialog-header-border;
     }
 
     .ui-dialog-title {
-        line-height: 4rem;
+        line-height: @layout-header-height;
         font-size: 1.25rem;
         padding: 0 3rem 0 1rem;
         color: @color-dialog-header;
@@ -35,7 +35,7 @@
         right: 0;
         top: 0;
         position: absolute;
-        height: 4rem;
+        height: @layout-header-height;
         cursor: pointer;
 
         &:before {
@@ -96,6 +96,8 @@
         .ui-dialog-buttonpane {
             padding: 0 !important;
             text-align: center !important;
+            border-top: 1px solid @color-dialog-header-border;
+            height: @layout-header-height !important;
 
             .ui-dialog-buttonset {
                 display: flex;
@@ -105,6 +107,7 @@
                     border: 0 !important;
                     box-shadow: none;
                     flex-grow: 1;
+                    height: @layout-header-height;
 
                     &:before {
                         display: block;

skins/elastic/templates/mail.html

@@ -27,7 +27,7 @@
 
 <!-- messages list -->
 <div class="list listbox selected">
-	<div id="messagelist-header" class="header with-search-and-toolbar">
+	<div id="messagelist-header" class="header">
 		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
 		<span class="header-title"></span>

skins/elastic/ui.js

@@ -75,12 +75,12 @@ function rcube_elastic_ui()
     // Initialize menu dropdowns
     dropdowns_init();
 
-    // Update layout after initialization
-    resize();
-
     // Setup various UI elements
     setup();
 
+    // Update layout after initialization
+    resize();
+
 
     /**
      * Setup procedure
@@ -401,14 +401,12 @@ function rcube_elastic_ui()
             }
         }
 
-        // Update searchbar state
-        $('.header > .searchbar').each(function() {
-            if ($('input', this).val()) {
-                $('a.button.search', this).addClass('active');
-            }
-        });
-
         rcmail.env.thread_padding = '1.5rem';
+
+        // In devel mode we have to wait until all styles are aplied by less
+        if (rcmail.env.devel_mode) {
+            setTimeout(resize, 1000);
+        }
     };
 
     /**
@@ -756,6 +754,8 @@ function rcube_elastic_ui()
             case 'normal': screen_resize_normal(); break;
             case 'large': screen_resize_large(); break;
         }
+
+        screen_resize_headers();
     };
 
     /**
@@ -788,6 +788,48 @@ function rcube_elastic_ui()
         }
     };
 
+    /**
+     * Sets left and right margin to the header title element
+     * to make it properly centered depending on number of buttons
+     * on both sides
+     */
+    function screen_resize_headers()
+    {
+        $('#layout > div > .header').each(function() {
+            var title, right = 0, left = 0, padding = 0,
+                sizes = {left: 0, right: 0};
+
+            $(this).children(':visible').each(function() {
+                if (!title && $(this).is('.header-title')) {
+                    title = $(this);
+                    return;
+                }
+
+                if ($(this).is('.searchbar,.searchfilterbar')) {
+                    padding += this.offsetWidth;
+                }
+                else {
+                    sizes[title ? 'right' : 'left'] += this.offsetWidth;
+                }
+            });
+
+            if (padding + sizes.right >= sizes.left) {
+                right = 0;
+                left = sizes.right + padding - sizes.left;
+            }
+            else {
+                left = 0;
+                right = sizes.left - padding + sizes.right;
+            }
+
+            $(title).css({
+                'margin-right': right + 'px',
+                'margin-left': left + 'px',
+                'padding-right': padding + 'px'
+            });
+        });
+    };
+
     function screen_resize_phone()
     {
         screen_resize_small_all();
@@ -877,6 +919,8 @@ function rcube_elastic_ui()
         layout.list.addClass('hidden');
         layout.sidebar.addClass('hidden');
         layout.content.removeClass('hidden');
+
+        screen_resize_headers();
     };
 
     function show_sidebar()
@@ -888,6 +932,8 @@ function rcube_elastic_ui()
         if (mode == 'small' || mode == 'phone') {
             layout.content.addClass('hidden');
         }
+
+        screen_resize_headers();
     };
 
     function show_list()
@@ -904,6 +950,8 @@ function rcube_elastic_ui()
                 hide_content();
             }
         }
+
+        screen_resize_headers();
     };
 
     function hide_content()
@@ -1041,12 +1089,14 @@ function rcube_elastic_ui()
                     // reset padding set when the form is displayed
                     $(bar).css({width: 'auto', 'padding-left': 0})[is_search_pending() ? 'addClass' : 'removeClass']('active');
                     button.css('display', 'block');
-                    if (focus) {
+                    if (focus && rcube_event.is_keyboard(event)) {
                         button.focus();
                     }
                 });
             };
 
+        $(bar).parent().addClass('with-search');
+
         if (is_search_pending()) {
             $(bar).addClass('active');
         }
@@ -1084,6 +1134,8 @@ function rcube_elastic_ui()
                 hide_func(e);
             }
         });
+
+        rcmail.addEventListener('init', function() { if (input.val()) $(bar).addClass('active'); });
     };
 
     /**
@@ -1114,12 +1166,14 @@ function rcube_elastic_ui()
                     // reset padding set when the form is displayed
                     bar.css({width: 'auto', 'padding-left': 0})[is_filter_enabled() ? 'addClass' : 'removeClass']('active');
                     button.css('display', 'block');
-                    if (focus) {
+                    if (focus && rcube_event.is_keyboard(event)) {
                         button.focus();
                     }
                 });
             };
 
+        bar.parent().addClass('with-filter');
+
         if (is_filter_enabled()) {
             bar.addClass('active');
         }