From 6316fe054cf5d7c5e9166c1a69bf31af5697444e Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sun, 21 Jan 2018 16:20:47 +0100
Subject: [PATCH] Refactored taskmenu

- Eliminate grey color
- On mobile display menu using style of other menus
- Fix Close button on iOS (#82)
---
 skins/elastic/README.md                       |   3 +-
 skins/elastic/styles/colors.less              |   9 +-
 skins/elastic/styles/layout.less              |  53 ++---
 skins/elastic/styles/styles.less              |   2 +-
 skins/elastic/styles/variables.less           |   2 +
 skins/elastic/styles/widgets/dialogs.less     |  45 +++--
 skins/elastic/styles/widgets/taskmenu.less    | 181 +++++++-----------
 .../elastic/templates/includes/mail-menu.html |   5 -
 skins/elastic/templates/includes/menu.html    |   4 +-
 skins/elastic/ui.js                           |  38 ++--
 10 files changed, 157 insertions(+), 185 deletions(-)

diff --git a/skins/elastic/README.md b/skins/elastic/README.md
index e334892b5..db5e8d83c 100644
--- a/skins/elastic/README.md
+++ b/skins/elastic/README.md
@@ -101,7 +101,8 @@ RULES:
     - `data-hidden`: Makes a menu entry/button hidden on specified screen sizes.
       Can be used for example for functionality not implemented or that has no sense
       on phones or touch devices. Contains a comma-separated list following values:
-      `large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px).
+      `large` (width > 1200px), `big` (width > 768px), `small` (width =< 768px),
+      `phone` (width =< 480px).
 
     - `data-content-button`: Makes the action button with this attribute to be copied
       to the content frame header on small/phone screens.
diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 8ca437fd3..19b15527c 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -35,16 +35,15 @@
 
 // Task menu
 @color-taskmenu-background:                     #414e54;
-@color-taskmenu-button:                         #959c9f;
-@color-taskmenu-button-selected:                #fff;
-@color-taskmenu-button-action:                  #fff;
+@color-taskmenu-button:                         #fff;
+@color-taskmenu-button-selected:                @color-taskmenu-button;
+@color-taskmenu-button-action:                  @color-taskmenu-button;
 @color-taskmenu-button-special:                 @color-taskmenu-button;
 
-@color-taskmenu-button-selected-background:     @color-taskmenu-background;
+@color-taskmenu-button-selected-background:     lighten(@color-taskmenu-background, 10%);
 @color-taskmenu-button-action-background:       @color-main;
 @color-taskmenu-button-special-background:      @color-taskmenu-background;
 
-@color-taskmenu-button-hover:                   lighten(@color-taskmenu-button, 10%);
 @color-taskmenu-button-selected-hover:          #fff;
 @color-taskmenu-button-action-hover:            #fff;
 @color-taskmenu-button-special-hover:           lighten(@color-taskmenu-button-special, 10%);
diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index a730d7113..6a33ae3e1 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -105,14 +105,6 @@ body > #layout {
             min-width: 300px;
             background-color: @color-layout-list-background;
         }
-
-        &.menu {
-            width: @layout-menu-width;
-            // FIXME: we set background color here not in taskmenu.less, because
-            // otherwise background is partially white on Android/iOS
-            background-color: @color-taskmenu-background;
-        }
-
         & > .scroller {
             flex: 1;
             position: relative; // for .listing-info positioning
@@ -187,9 +179,6 @@ html.iframe {
 }
 
 @media screen and (max-width: @screen-width-medium) {
-    body > #layout > div.menu {
-        width: @layout-menu-width/2;
-    }
 }
 
 @media screen and (max-width: @screen-width-small) {
@@ -236,16 +225,6 @@ html.iframe {
 }
 
 @media screen and (max-width: @screen-width-xs) {
-    body > #layout > div.menu {
-        position: absolute;
-        z-index: 30001; // because autocompletion popup uses z-index:30000
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: auto;
-        text-align: center;
-    }
 }
 
 @media screen and (max-width: @screen-width-mini) {
@@ -255,11 +234,16 @@ html.iframe {
     }
 }
 
-@media screen and (min-width: (@screen-width-large + 1px)) {
-    body > #layout > div > .header > a.back-list-button,
-    body > #layout > div > .header > a.back-sidebar-button {
+@media screen and (min-width: (@screen-width-xs + 1px)) {
+    body > #layout > div > .header > a.menu-button {
         display: none;
     }
+
+    body > #layout > .menu {
+        // FIXME: we set background color here not in taskmenu.less, because
+        // otherwise background is partially white on Android/iOS
+        background-color: @color-taskmenu-background;
+    }
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
@@ -269,14 +253,31 @@ html.iframe {
     body > #layout > div > .header > a.toolbar-menu-button {
         display: none;
     }
+
+    body > #layout > .menu {
+        width: @layout-menu-width/2;
+    }
 }
 
-@media screen and (min-width: (@screen-width-xs + 1px)) {
-    body > #layout > div > .header > a.menu-button {
+@media screen and (min-width: (@screen-width-medium + 1px)) {
+    body > #layout > .menu {
+        width: @layout-menu-width;
+    }
+}
+
+@media screen and (min-width: (@screen-width-large + 1px)) {
+    body > #layout > div > .header > a.back-list-button,
+    body > #layout > div > .header > a.back-sidebar-button {
         display: none;
     }
 }
 
+html.layout-phone {
+    .hidden-phone {
+        display: none !important;
+    }
+}
+
 html.layout-phone,
 html.layout-small {
     .hidden-small {
diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 53c9b1965..1371bd3ec 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -92,7 +92,7 @@
 
 /* Reset some Bootstrap style */
 
-body, button, input, optgroup, select, textarea {
+body, button, input, optgroup, select, textarea, .popover {
     .font-family;
 }
 
diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
index 28174c199..9882a64f3 100644
--- a/skins/elastic/styles/variables.less
+++ b/skins/elastic/styles/variables.less
@@ -34,6 +34,8 @@
 @layout-touch-menu-record-font-size:    1.2rem;
 @layout-touch-icon-width:               2.2em;
 
+@layout-mobile-menu-width:              (@screen-width-mini * .85);
+
 @layout-contact-icon-width:             112px;
 @layout-contact-icon-height:            135px;
 
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 0d8a91a91..1e982c9b7 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -49,7 +49,7 @@
     box-shadow: 3px 3px 5px @color-popover-shadow;
     padding: 0;
 
-    & > h3 {
+    .popover-header {
         // On mobile don't display popup arrows and titles
         display: none;
     }
@@ -72,36 +72,19 @@ html.layout-phone {
         padding: 0;
         right: 0;
         bottom: 0;
-        width: 276px;
+        top: 0;
+        width: @layout-mobile-menu-width;
         transform: none !important;
         border-radius: 0;
         border: 0;
         display: flex;
         flex-direction: column;
+        .webkit-scroller;
 
         div.arrow {
             display: none;
         }
 
-        & > h3 {
-            display: block;
-            border-radius: 0;
-            padding: 0 .5em;
-            height: @layout-touch-header-height;
-            line-height: @layout-touch-header-height;
-            font-size: @layout-touch-header-font-size;
-            color: @color-popover-header;
-            background-color: @color-popover-header-background;
-
-            a {
-                display: inline-block;
-                width: 100%;
-            }
-        }
-
-        .popover-body > * {
-            max-height: 100% !important;
-        }
 
         .listing li:last-child {
             border-bottom: 1px solid @color-list-border;
@@ -126,6 +109,26 @@ html.layout-phone {
         border: 1px solid @color-input-border;
         box-shadow: none;
     }
+
+    .popover-header {
+        display: block;
+        border-radius: 0;
+        padding: 0 .5em;
+        height: @layout-touch-header-height;
+        line-height: @layout-touch-header-height;
+        font-size: @layout-touch-header-font-size;
+        color: @color-popover-header;
+        background-color: @color-popover-header-background;
+
+        a {
+            display: inline-block;
+            width: 100%;
+        }
+    }
+
+    .popover-body > * {
+        max-height: 100% !important;
+    }
 }
 
 html.touch .popover {
diff --git a/skins/elastic/styles/widgets/taskmenu.less b/skins/elastic/styles/widgets/taskmenu.less
index 04c623b0c..b2346b68f 100644
--- a/skins/elastic/styles/widgets/taskmenu.less
+++ b/skins/elastic/styles/widgets/taskmenu.less
@@ -17,28 +17,10 @@
     a {
         .overflow-ellipsis;
         text-decoration: none;
-        padding: .45rem 0;
         display: block;
-        text-align: center;
-        color: @color-taskmenu-button;
 
         &:before {
             &:extend(.font-icon-class);
-            display: block;
-            height: 1.75rem;
-            line-height: 1.5;
-            width: @layout-menu-width;
-            margin: 0;
-        }
-
-        &:hover {
-            color: @color-taskmenu-button-hover;
-            background: @color-taskmenu-button-background-hover;
-        }
-
-        &.selected {
-            color: @color-taskmenu-button-selected;
-            background: @color-taskmenu-button-selected-background;
         }
 
         &.mail:before {
@@ -77,136 +59,117 @@
         &.notes:before {
             content: @fa-var-sticky-note;
         }
-
-        span.inner {
-            font-size: 90%;
-            padding: 0 .1em;
-        }
     }
 
-    .special-buttons {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: @layout-menu-width;
+    a.logout {
+        color: @color-taskmenu-button-logout-hover !important;
+    }
 
-        @media screen and (max-width: @screen-width-xs) {
-            position: relative;
-        }
+    @media screen and (max-width: @screen-width-xs) {
+        z-index: 30001; // because autocompletion popup uses z-index:30000
+        overflow-x: hidden;
 
         a {
-            color: @color-taskmenu-button-special;
-            background: @color-taskmenu-button-special-background;
-
-            &:hover {
-                color: @color-taskmenu-button-special-hover;
-                background: @color-taskmenu-button-special-background-hover;
-
-                &.logout {
-                    color: @color-taskmenu-button-logout-hover !important;
-                }
-            }
+            width: 100%;
+            padding: 0 .5em;
+            text-align: left;
+            line-height: @layout-touch-menu-record-height;
+            height: @layout-touch-menu-record-height;
+            border-bottom: 1px solid @color-list-border;
+            color: @color-list;
+            font-size: 1.2rem;
 
-            @media screen and (max-width: @screen-width-xs) {
-                &.logout {
-                    color: @color-taskmenu-button-logout-hover !important;
-                }
+            &:before {
+                margin-right: .5rem;
             }
         }
     }
 
-    .action-buttons {
+    @media screen and (min-width: (@screen-width-xs + 1px)) {
         a {
-            color: @color-taskmenu-button-action;
-            background: @color-taskmenu-button-action-background;
+            text-align: center;
+            color: @color-taskmenu-button;
+            padding: .45rem 0;
+            width: @layout-menu-width/2;
+            font-size: 1.2rem;
 
-            &:hover {
-                color: @color-taskmenu-button-action-hover;
-                background: @color-taskmenu-button-action-background-hover;
+            &:before {
+                display: block;
+                height: 2.1rem;
+                line-height: 1.5;
+                width: @layout-menu-width/2;
+                margin: 0;
             }
-        }
-    }
 
-    @media screen and (max-width: @screen-width-medium) {
-        a,
-        a:before {
-            width: @layout-menu-width/2;
-        }
+            &:hover {
+                color: @color-taskmenu-button;
+                background: @color-taskmenu-button-background-hover;
+            }
 
-        a {
-            height: 3.25rem;
-            font-size: 1.25rem;
+            &.selected {
+                color: @color-taskmenu-button-selected;
+                background: @color-taskmenu-button-selected-background;
+            }
         }
 
-        span.inner {
-            display: none;
+        .special-buttons {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: @layout-menu-width;
         }
 
         .action-buttons {
             a {
                 color: @color-taskmenu-button-action-background;
                 background: @color-taskmenu-background;
-            }
-        }
-    }
 
-    @media screen and (max-width: @screen-width-xs) {
-        a,
-        a:before {
-            height: 2.25rem;
-            display: inline-block;
-            width: 310px / 3;
-            font-size: 1.25em;
-        }
-
-        a {
-            height: auto;
-            margin-top: 1rem;
-            background: transparent;
-        }
-
-        a:hover {
-            background: transparent !important;
+                &:hover {
+                    color: @color-taskmenu-button-action-hover;
+                    background: @color-taskmenu-button-action-background-hover;
+                }
+            }
         }
 
         span.inner {
-            display: block;
+            display: none;
         }
     }
 
-    @media screen and (max-width: @screen-width-xs) and (min-width: 320px) and (min-height: 480px) {
-        text-align: left;
-    }
-
-    .menu-header {
-        border-bottom: 1px solid @color-taskmenu-button;
-        height: @layout-touch-header-height;
-        line-height: @layout-touch-header-height;
-        text-align: left;
-        padding: 0 .5em;
-        font-size: 1.2rem;
-
+    @media screen and (min-width: (@screen-width-medium + 1px)) {
         a {
-            color: @color-taskmenu-button;
-            font-size: 100%;
-            display: inline;
+            width: @layout-menu-width;
+            height: @layout-header-height;
+            font-size: 1.1rem;
 
             &:before {
-                line-height: @layout-touch-header-height;
-                height: @layout-touch-header-height;
-                width: auto;
-                margin-right: .25rem;
+                width: @layout-menu-width;
+                height: 1.75rem;
+                line-height: 1.5;
             }
+        }
 
-            &:hover {
-                background: inherit;
+        .action-buttons {
+            a {
+                color: @color-taskmenu-button-action;
+                background: @color-taskmenu-button-action-background;
             }
         }
+
+        span.inner {
+            display: inline;
+            font-size: 85%;
+            padding: 0 .1em;
+        }
     }
+}
 
-    @media screen and (min-width: (@screen-width-xs + 1px)) {
-        .menu-header {
-            display: none;
+.menu {
+    .webkit-scroller;
+
+    .popover-header {
+        @media screen and (min-width: (@screen-width-xs + 1px)) {
+            display: none !important;
         }
     }
 }
diff --git a/skins/elastic/templates/includes/mail-menu.html b/skins/elastic/templates/includes/mail-menu.html
index 4a9c39f3f..302f4e734 100644
--- a/skins/elastic/templates/includes/mail-menu.html
+++ b/skins/elastic/templates/includes/mail-menu.html
@@ -24,11 +24,6 @@
 		class="button delete disabled" classAct="button delete"
 		label="delete" title="deletemessage" innerclass="inner" />
 	<roundcube:if condition="template:name == 'message'" />
-	<!--
-		<roundcube:button command="move" type="link"
-			class="button move disabled" classAct="button move"
-			label="move" title="moveto" innerclass="inner" data-popup-pos="bottom" />
-	-->
 		<roundcube:button command="print" type="link" data-hidden="small"
 			class="button print disabled" classAct="button print"
 			label="print" title="printmessage" innerclass="inner" />
diff --git a/skins/elastic/templates/includes/menu.html b/skins/elastic/templates/includes/menu.html
index f5c29f049..6f371f017 100644
--- a/skins/elastic/templates/includes/menu.html
+++ b/skins/elastic/templates/includes/menu.html
@@ -1,7 +1,9 @@
 <div class="menu">
 	<h2 id="aria-label-tasknav" class="voice"><roundcube:label name="arialabeltasknav" /></h2>
+	<div class="popover-header">
+		<a class="button icon cancel"><roundcube:label name="close" /></a>
+	</div>
 	<div id="taskmenu" role="navigation" aria-labelledby="aria-label-tasknav">
-		<div class="menu-header"><a class="button icon cancel"><roundcube:label name="close" /></a></div>
 		<span class="action-buttons">
 			<roundcube:button command="compose" type="link" class="button compose"
 				label="compose" title="writenewmessage" innerclass="inner"
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index f20796131..a5279d861 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -120,13 +120,11 @@ function rcube_elastic_ui()
         }
 
         // menu/sidebar/list button
-        buttons.menu.on('click', function() { show_menu(); return false; });
+        buttons.menu.on('click', function() { app_menu(true); return false; });
         buttons.back_sidebar.on('click', function() { show_sidebar(); return false; });
         buttons.back_list.on('click', function() { show_list(); return false; });
         buttons.back_content.on('click', function() { show_content(true); return false; });
 
-        $('body').on('click', function() { if (mode == 'phone') layout.menu.addClass('hidden'); });
-
         // Set content frame title in parent window (exclude ext-windows and dialog frames)
         if (is_framed && !rcmail.env.extwin && !parent.$('.ui-dialog:visible').length) {
             if (title = $('h1.voice:first').text()) {
@@ -268,7 +266,7 @@ function rcube_elastic_ui()
         });
 
         // buttons that should be hidden on small screen devices
-        $('a[data-hidden],button[data-hidden]').each(function() {
+        $('[data-hidden]').each(function() {
             var parent = $(this).parent('li'),
                 sizes = $(this).data('hidden').split(',');
 
@@ -1305,15 +1303,13 @@ function rcube_elastic_ui()
     function screen_resize_phone()
     {
         screen_resize_small_all();
-
-        layout.menu.addClass('hidden');
+        app_menu(false);
     };
 
     function screen_resize_small()
     {
         screen_resize_small_all();
-
-        layout.menu.removeClass('hidden');
+        app_menu(true);
     };
 
     function screen_resize_normal()
@@ -1330,8 +1326,7 @@ function rcube_elastic_ui()
         }
 
         layout.content.removeClass('hidden');
-        layout.menu.removeClass('hidden');
-
+        app_menu(true);
         screen_resize_small_none();
     };
 
@@ -1455,15 +1450,26 @@ function rcube_elastic_ui()
     };
 
     // show menu widget
-    function show_menu()
+    function app_menu(show)
     {
-        var show = true;
+        if (show) {
+            if (mode == 'phone') {
+                $('<div id="menu-overlay" class="popover-overlay">').appendTo('body');
 
-        if (mode == 'phone') {
-            show = layout.menu.is(':visible') ? false : true;
-        }
+                if (!env.menu_initialized) {
+                    env.menu_initialized = true;
+                    $('a', layout.menu).on('click', function(e) { if (mode == 'phone') app_menu(); });
+                }
+
+                layout.menu.addClass('popover');
+            }
 
-        layout.menu[show ? 'removeClass' : 'addClass']('hidden');
+            layout.menu.removeClass('hidden');
+        }
+        else {
+            $('#menu-overlay').remove();
+            layout.menu.addClass('hidden').removeClass('popover');
+        }
     };
 
     /**