From 67044270f1ae7238c9f64fc5afd4987dec3bae7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sat, 12 May 2018 01:04:50 +0200
Subject: [PATCH] Increase the space available on main navbar for tablist

- use icon instead of text for logout
- move favorites in the global search
- merge brand and toggle menu
- allow to toggle menu on lg
- reduce expander size

issue7325
issue5554
review44921002
---
 CHANGELOG          |  2 ++
 index.html         | 36 ++++++++++------------
 offcanvas.css      | 68 -----------------------------------------
 package.json       |  1 -
 src/offcanvas.less | 76 ++++++++++++++++++++++++++++++++++++++++++++++
 src/sao.js         | 53 +++++++++++++++++++++++---------
 src/sao.less       | 14 ++++++++-
 src/session.js     |  5 ++-
 src/view/tree.js   |  1 -
 9 files changed, 150 insertions(+), 106 deletions(-)
 delete mode 100644 offcanvas.css
 create mode 100644 src/offcanvas.less

diff --git a/CHANGELOG b/CHANGELOG
index 413b7322fb..bc95833a33 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,3 +1,5 @@
+* Increase the space available for tab list
+* Allow to toggle menu on large screen
 * Manage URL and history
 
 Version 4.8.0 - 2018-04-23
diff --git a/index.html b/index.html
index 7ec4e06a71..d3b51a791e 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,6 @@ this repository contains the full copyright notices and license terms. -->
         <link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
         <link rel="stylesheet" href="bower_components/c3/c3.min.css">
         <link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.min.css">
-        <link rel="stylesheet" href="offcanvas.css">
 
         <script type="text/javascript" src="dist/tryton-sao.min.js"></script>
         <link rel="stylesheet" type="text/css" href="dist/tryton-sao.min.css"
@@ -48,20 +47,14 @@ this repository contains the full copyright notices and license terms. -->
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand" href="#">Tryton</a>
-                    <p class="pull-left visible-xs visible-sm navbar-text">
-                        <button type="button" class="btn btn-primary btn-xs"
-                            data-toggle="offcanvas">
-                            Toggle menu
-                        </button>
-                    </p>
+                    <a class="navbar-brand" href="#" data-toggle="offcanvas">
+                        <span class="glyphicon glyphicon-menu-hamburger"></span>
+                        Tryton
+                    </a>
                 </div>
                 <div class="collapse navbar-collapse" id="main_navbar">
-                    <ul class="nav navbar-nav">
-                        <li id="user-preferences"></li>
-                        <li id="user-favorites"></li>
-                    </ul>
                     <ul class="nav navbar-nav navbar-right">
+                        <li id="user-preferences"></li>
                         <li id="user-logout"></li>
                     </ul>
                     <ul id="tablist" class="nav navbar-nav nav-tabs nav-tabs-justified" role="tablist">
@@ -69,12 +62,12 @@ this repository contains the full copyright notices and license terms. -->
                 </div>
             </div>
         </nav>
-        <div id="main" class="container-fluid">
+        <div id="main" class="container-fluid" style="padding: 0px;">
             <div class="row row-offcanvas row-offcanvas-left active"
-                style="height: calc(100vh - 50px - 1px - 20px);">
-                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="menu" role="navigation"
+                style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
+                <div class="col-xs-6 col-sm-3 col-lg-2 sidebar-offcanvas" id="menu" role="navigation"
                     style="overflow-y: auto; height: 100%;"></div>
-                <div class="col-xs-12 col-md-9" style="overflow-y: auto; height: 100%;">
+                <div class="col-xs-12 col-md-9 col-lg-10 main-offcanvas" style="overflow-y: auto; height: 100%;">
                     <div id="tabs" role="tabpanel">
                         <div id="tabcontent" class="tab-content">
                         </div>
@@ -88,10 +81,13 @@ this repository contains the full copyright notices and license terms. -->
                         jQuery('.row-offcanvas').toggleClass('active');
                         });
                     jQuery('#tabs').on('ready', function() {
-                        if (jQuery('#tablist').children().length) {
-                            jQuery('.row-offcanvas').removeClass('active');
-                        } else {
-                            jQuery('.row-offcanvas').addClass('active');
+                        var mq = window.matchMedia('(max-width: 991px)');
+                        if (mq.matches) {
+                            if (jQuery('#tablist').children().length) {
+                                jQuery('.row-offcanvas').removeClass('active');
+                            } else {
+                                jQuery('.row-offcanvas').addClass('active');
+                            }
                         }
                     });
                     Sao.login();
diff --git a/offcanvas.css b/offcanvas.css
deleted file mode 100644
index ea413e1857..0000000000
--- a/offcanvas.css
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Off Canvas
- * --------------------------------------------------
- */
-@media screen and (max-width: 991px) {
-  .row-offcanvas {
-    position: relative;
-    -webkit-transition: all .25s ease-out;
-         -o-transition: all .25s ease-out;
-            transition: all .25s ease-out;
-  }
-
-  .row-offcanvas-right {
-    right: 0;
-  }
-
-  .row-offcanvas-left {
-    left: 0;
-  }
-
-  .row-offcanvas-right
-  .sidebar-offcanvas {
-    right: calc(-50% + 7px);
-  }
-
-  .row-offcanvas-left
-  .sidebar-offcanvas {
-    left: calc(-50% + 7.5px);
-  }
-
-  .row-offcanvas-right.active {
-    right: calc(50% + 7.5px);
-  }
-
-  .row-offcanvas-left.active {
-    left: calc(50% + 7.5px);
-  }
-
-  .sidebar-offcanvas {
-    position: absolute;
-    top: 0;
-    width: 50%;
-  }
-}
-
-@media screen and (max-width: 479px) {
-  .row-offcanvas-right
-  .sidebar-offcanvas {
-    right: calc(-100% + 15px);
-  }
-
-  .row-offcanvas-left
-  .sidebar-offcanvas {
-    left: calc(-100% + 15px);
-  }
-
-  .row-offcanvas-right.active {
-    right: calc(100% + 15px);
-  }
-
-  .row-offcanvas-left.active {
-    left: calc(100% + 15px);
-  }
-
-  .sidebar-offcanvas {
-    width: 100%;
-  }
-}
diff --git a/package.json b/package.json
index fabd304033..f82720767b 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "images",
     "index.html",
     "locale",
-    "offcanvas.css",
     "package.json",
     "src",
     "tests"
diff --git a/src/offcanvas.less b/src/offcanvas.less
new file mode 100644
index 0000000000..8c4a2522d5
--- /dev/null
+++ b/src/offcanvas.less
@@ -0,0 +1,76 @@
+/*
+ * Off Canvas
+ * --------------------------------------------------
+ */
+@import "variables";
+
+@offcanvas-md: @screen-md-max;
+
+body {
+    overflow-x: hidden;
+}
+
+.row-offcanvas {
+    position: relative;
+    -webkit-transition: all .25s ease-out;
+    -o-transition: all .25s ease-out;
+    transition: all .25s ease-out;
+}
+
+.row-offcanvas-right {
+    right: 0;
+}
+
+.row-offcanvas-left {
+    left: 0;
+}
+
+.row-offcanvas:not(.active) .main-offcanvas {
+    width: 100%;
+}
+
+.sidebar-offcanvas {
+    position: absolute;
+    top: 0;
+}
+
+.make-offcanvas(@size) {
+    .row-offcanvas-right
+    .sidebar-offcanvas {
+        right: -@size;
+    }
+
+    .row-offcanvas-left
+    .sidebar-offcanvas {
+        left: -@size;
+    }
+
+    .row-offcanvas-right.active {
+        right: @size;
+    }
+
+    .row-offcanvas-left.active {
+        left: @size;
+    }
+
+    .sidebar-offcanvas {
+        width: @size;
+    }
+}
+
+
+@media (min-width: @screen-lg-min) {
+    .make-offcanvas(16.6666%);
+}
+
+@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    .make-offcanvas(25%);
+}
+
+@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
+    .make-offcanvas(50%);
+}
+
+@media (max-width: (calc(@screen-xs-min - 1))) {
+    .make-offcanvas(100%);
+}
diff --git a/src/sao.js b/src/sao.js
index 5033f74b26..e27e2cc6ad 100644
--- a/src/sao.js
+++ b/src/sao.js
@@ -531,8 +531,9 @@ var Sao = {};
                 'method': 'model.' + name + '.get',
             };
             var menu = jQuery('<ul/>', {
-                'class': 'dropdown-menu',
-                'aria-expanded': 'false'
+                'class': 'dropdown-menu dropdown-menu-right',
+                'aria-expanded': 'false',
+                'aria-labelledby': 'user-favorites',
             });
             jQuery('#user-favorites').append(menu);
             Sao.rpc(args, session).then(function(fav) {
@@ -588,15 +589,20 @@ var Sao = {};
         jQuery('#user-favorites').children().remove();
         jQuery('#user-logout').children().remove();
         jQuery('#user-preferences').append(jQuery('<a/>', {
-            'href': '#'
-        }).click(Sao.preferences).append(preferences.status_bar));
-        jQuery('#user-logout').append(jQuery('<a/>', {
-            'href': '#'
-        }).click(Sao.logout).append(Sao.i18n.gettext('Logout')));
-        jQuery('#user-favorites').append(jQuery('<a/>', {
             'href': '#',
-            'data-toggle': 'dropdown'
-        }).click(Sao.favorites_menu).append(Sao.i18n.gettext('Favorites')));
+            'title': preferences.status_bar,
+        }).click(Sao.preferences).append(preferences.status_bar));
+        var title = Sao.i18n.gettext("Logout");
+        jQuery('#user-logout').append(jQuery('<a/>', {
+            'href': '#',
+            'title': title,
+            'aria-label': title,
+        }).click(Sao.logout).append(jQuery('<span/>', {
+            'class': 'glyphicon glyphicon-log-out hidden-xs',
+            'aria-hidden': true,
+        })).append(jQuery('<span/>', {
+            'class': 'visible-xs',
+        }).text(title)));
     };
 
     Sao.main_menu_row_activate = function() {
@@ -769,16 +775,35 @@ var Sao = {};
     Sao.GlobalSearch = Sao.class_(Object, {
         init: function() {
             this.el = jQuery('<div/>', {
-                'class': 'global-search-container'
+                'class': 'global-search-container',
             });
+            var group = jQuery('<div/>', {
+                'class': 'input-group',
+            }).appendTo(this.el);
+
             this.search_entry = jQuery('<input>', {
                 'id': 'global-search-entry',
                 'class': 'form-control mousetrap',
                 'placeholder': Sao.i18n.gettext('Search...')
-            });
-            this.el.append(this.search_entry);
+            }).appendTo(group);
+
+            jQuery('<div/>', {
+                'id': 'user-favorites',
+                'class': 'input-group-btn',
+            }).append(jQuery('<button/>', {
+                'class': 'btn btn-default dropdown-toggle',
+                'data-toggle': 'dropdown',
+                'aria-haspopup': true,
+                'aria-expanded': false,
+                'title': Sao.i18n.gettext("Favorites"),
+                'aria-label': Sao.i18n.gettext("Favorites"),
+            }).click(Sao.favorites_menu).append(jQuery('<span/>', {
+                'class': 'glyphicon glyphicon-bookmark',
+                'aria-hidden': true,
+            }))).appendTo(group);
+
             var completion = new Sao.common.InputCompletion(
-                    this.search_entry,
+                    this.el,
                     this.update.bind(this),
                     this.match_selected.bind(this),
                     this.format.bind(this));
diff --git a/src/sao.less b/src/sao.less
index caea1d484d..2f61c13685 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -21,7 +21,7 @@
 #menu {
     border-right: 2px solid @table-border-color;
 }
-@media screen and (max-width: 991px) {
+@media screen and (max-width: @screen-sm-max) {
     #menu {
         border-right: none;
     }
@@ -30,6 +30,13 @@
     }
 }
 
+#user-preferences > a {
+    max-width: 20em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 .tab-form, .tab-board {
     & nav.toolbar.affix {
         top: @navbar-height + 1px;
@@ -192,6 +199,11 @@ img.icon {
     }
     & .expander {
         cursor: pointer;
+        & > .glyphicon {
+            float: left;
+            margin-right: 5px;
+            width: 1em;
+        }
     }
     & label {
         font-weight: normal;
diff --git a/src/session.js b/src/session.js
index c17f80fb3f..5f90dc35b7 100644
--- a/src/session.js
+++ b/src/session.js
@@ -119,7 +119,10 @@
         dialog.button = jQuery('<button/>', {
             'class': 'btn btn-primary',
             'type': 'submit'
-        }).append(Sao.i18n.gettext('Login')).appendTo(dialog.footer);
+        }).append(jQuery('<span/>', {
+            'class': 'glyphicon glyphicon-log-in',
+            'aria-hidden': true,
+        })).append(' ' + Sao.i18n.gettext("Login")).appendTo(dialog.footer);
         return dialog;
     };
 
diff --git a/src/view/tree.js b/src/view/tree.js
index 1e6c822c13..d28966645c 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -898,7 +898,6 @@
                     });
                     this.expander.html('&nbsp;');
                     this.expander.css('margin-left', (depth - 1) + 'em');
-                    this.expander.css('float', 'left');
                     this.expander.on('click keypress',
                             Sao.common.click_press(this.toggle_row.bind(this)));
                     row.append(jQuery('<td/>', {