From 188e75f7755f6339970c5e90c01e565a68f25bb0 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Tue, 1 Aug 2017 17:41:46 +0200
Subject: [PATCH] Support moving sidebar entries to toolbar menu on mobile

---
 skins/elastic/styles/layout.less        |  3 +++
 skins/elastic/styles/widgets/lists.less |  1 +
 skins/elastic/templates/about.html      |  4 +++-
 skins/elastic/ui.js                     | 15 +++++++++++++--
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/skins/elastic/styles/layout.less b/skins/elastic/styles/layout.less
index d349d4205..a35df2ea3 100644
--- a/skins/elastic/styles/layout.less
+++ b/skins/elastic/styles/layout.less
@@ -262,6 +262,9 @@ html.iframe body {
     body > #layout > div > .header > a.toolbar-menu-button {
         display: none;
     }
+    .hidden-big {
+        display: none !important;
+    }
 }
 
 @media screen and (min-width: (@screen-width-xs + 1px)) {
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index 7051050eb..32556b50b 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -121,6 +121,7 @@ ul.listing {
 .listing.iconized li {
     a:before {
         &:extend(.font-icon-class);
+        height: 2em; /* TODO: ? */
     }
     &.preferences > a:before {
         content: @fa-var-sliders;
diff --git a/skins/elastic/templates/about.html b/skins/elastic/templates/about.html
index 132084ced..40ab1ac26 100644
--- a/skins/elastic/templates/about.html
+++ b/skins/elastic/templates/about.html
@@ -1,8 +1,10 @@
 <roundcube:include file="includes/layout.html" />
 
+<h1 class="voice"><roundcube:label name="about" /></h1>
+
 <roundcube:object name="aboutcontent" />
 
-<div class="frame-content">
+<div class="content frame-content">
 	<h2 class="sysname">Roundcube Webmail <roundcube:object name="version" /></h2>
 	<p class="copyright">Copyright &copy; 2005-2016, The Roundcube Dev Team</p>
 	<p class="license">This program is free software;
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 4f2419f69..add5a42c1 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -404,7 +404,7 @@ function rcube_elastic_ui()
      */
     function dropdowns_init()
     {
-        $('*[data-popup]').each(function() { popup_init(this); });
+        $('[data-popup]').each(function() { popup_init(this); });
 
         // close popups on click in an iframe on the page
         var close_all_popups = function(e) {
@@ -890,10 +890,21 @@ function rcube_elastic_ui()
             toolbar.remove();
         });
 
+        // special elements to clone and add to the toolbar (mobile only)
+        $('ul[data-menu="toolbar-small"] > li > a').each(function() {
+            var button = $(this).clone();
+
+            button.attr('id', this.id + '_clone');
+
+            // TODO: rcmail.register_button()
+
+            items.push($('<li role="menuitem">').addClass('hidden-big').append(button));
+        });
+
         // append the new toolbar and menu button
         if (items.length) {
             var container = layout.content.children('.header'),
-                menu_attrs = {'class': 'toolbar popupmenu listing', id: 'toolbar-menu'},
+                menu_attrs = {'class': 'toolbar popupmenu listing iconized', id: 'toolbar-menu'},
                 menu_button = $('<a class="button icon toolbar-menu-button" href="#menu">')
                     .attr({'data-popup': 'toolbar-menu'});