From 92b6e6057346be0b2c87f4667884e09a3e92c41b Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 22 Jun 2017 11:13:53 +0200
Subject: [PATCH] Small improvements for the new toolbar

---
 customize.dist/src/less/toolbar.less | 89 +++++++++++--------------
 customize.dist/toolbar.css           | 98 +++++++++++-----------------
 www/code/main.js                     |  7 +-
 www/common/common-codemirror.js      |  6 +-
 www/common/cryptpad-common.js        |  2 +-
 www/common/toolbar2.js               | 14 ++--
 www/slide/main.js                    | 11 ++--
 7 files changed, 95 insertions(+), 132 deletions(-)

diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less
index 706cacbd7..8626066e0 100644
--- a/customize.dist/src/less/toolbar.less
+++ b/customize.dist/src/less/toolbar.less
@@ -32,52 +32,7 @@
 
     //background-color: #BBBBFF;
     background-color: @toolbar-default-bg;
-    color: @toolbar-default-color;/*
-    &.pad {
-        @bgcolor: @toolbar-pad-bg;
-        @color: @toolbar-pad-color;
-        background-color: @bgcolor;
-        color: @color;
-    }
-    &.code {
-        @bgcolor: @toolbar-code-bg;
-        @color: @toolbar-code-color;
-        background-color: @bgcolor;
-        color: @color;
-        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
-            lighten($bgcolor, 15%);
-        }
-    }
-    &.slide {
-        @bgcolor: @toolbar-slide-bg;
-        @color: @toolbar-slide-color;
-        background-color: @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.poll {
-        @bgcolor: @toolbar-poll-bg;
-        @color: @toolbar-poll-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.whiteboard {
-        @bgcolor: @toolbar-whiteboard-bg;
-        @color: @toolbar-whiteboard-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.drive {
-        @bgcolor: @toolbar-drive-bg;
-        @color: @toolbar-drive-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.file {
-        @bgcolor: @toolbar-file-bg;
-        @color: @toolbar-file-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }*/
+    color: @toolbar-default-color;
 
     .addToolbarColors (@color, @bg-color) {
         background-color: @bgcolor;
@@ -118,7 +73,6 @@
             color: @color;
         }
         .dropdown-bar-content {
-            line-height: 14px;
             background: darken(@bgcolor, 5%);
             border: 1px solid @color;
             color: @color;
@@ -208,6 +162,9 @@
             margin: 0;
             background: transparent;
         }
+        .dropdown-bar-content {
+            line-height: 14px;
+        }
     }
 
     .separator {
@@ -523,12 +480,17 @@
     flex-flow: row;
     height: @toolbar-top-height;
     position: relative;
+    .filler {
+        height: 100%;
+        display: inline-block;
+        order: 4;
+        flex: 1;
+    }
     .cryptpad-title {
         order: 3;
         height: 100%;
         display: inline-block;
         line-height: @toolbar-top-height;
-        flex: 1;
         margin-left: 20px;
         .title, .pencilIcon, .saveIcon {
             font-size: 25px;
@@ -632,6 +594,9 @@
             background-color: rgba(0,0,0,0.5);
         }
         order: 1;
+        .fa {
+            margin: 0;
+        }
         a.cryptpad-logo {
             cursor: pointer;
             font-size: 1em;
@@ -644,7 +609,7 @@
     .cryptpad-user {
         height: 100%;
         display: inline-block;
-        order: 4;
+        order: 5;
         line-height: @toolbar-top-height;
         &> * {
             display: inline-block;
@@ -714,17 +679,37 @@
         border-radius: 0;
         padding: 0 10px;
     }
+    .drawer-content:empty ~ .drawer-button {
+        display: none;
+    }
     .drawer-content {
         position: absolute;
         right:0px;
         top:96px;
-        width: 50px;
+        min-width: 50px;
         background: white;
         border: 1px solid black;
-        display: none;
+        display: flex;
+        flex-flow: column;
+        z-index:1000;
+        &> span {
+            box-sizing: border-box;
+            width: 150px;
+            height: 26px;
+            border-radius: 0;
+            border: 0;
+            &:not(:last-child) {
+                border-bottom: 1px solid rgba(0,0,0,0.2);
+            }
+            button {
+                border: 0;
+            }
+        }
         button {
-            text-align: center;
             width: 100%;
+        }
+        &> button {
+            text-align: center;
             margin: 0;
             border-radius: 0;
             border: 1px solid transparent;
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 7a63bc9df..70bcff7a2 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -106,52 +106,6 @@
   padding: 0px;
   background-color: #ddd;
   color: #000;
-  /*
-    &.pad {
-        @bgcolor: @toolbar-pad-bg;
-        @color: @toolbar-pad-color;
-        background-color: @bgcolor;
-        color: @color;
-    }
-    &.code {
-        @bgcolor: @toolbar-code-bg;
-        @color: @toolbar-code-color;
-        background-color: @bgcolor;
-        color: @color;
-        .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside {
-            lighten($bgcolor, 15%);
-        }
-    }
-    &.slide {
-        @bgcolor: @toolbar-slide-bg;
-        @color: @toolbar-slide-color;
-        background-color: @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.poll {
-        @bgcolor: @toolbar-poll-bg;
-        @color: @toolbar-poll-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.whiteboard {
-        @bgcolor: @toolbar-whiteboard-bg;
-        @color: @toolbar-whiteboard-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.drive {
-        @bgcolor: @toolbar-drive-bg;
-        @color: @toolbar-drive-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }
-    &.file {
-        @bgcolor: @toolbar-file-bg;
-        @color: @toolbar-file-color;
-        background: linear-gradient(20deg, @color 150px, @toolbar-default-bg 150px);
-        border-bottom: 2px solid @color;
-    }*/
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
@@ -204,7 +158,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.pad .dropdown-bar-content {
-  line-height: 14px;
   background: #18448a;
   border: 1px solid #fff;
   color: #fff;
@@ -271,7 +224,6 @@
   color: #000;
 }
 .cryptpad-toolbar.code .dropdown-bar-content {
-  line-height: 14px;
   background: #e69d00;
   border: 1px solid #000;
   color: #000;
@@ -338,7 +290,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.slide .dropdown-bar-content {
-  line-height: 14px;
   background: #ce6a12;
   border: 1px solid #fff;
   color: #fff;
@@ -405,7 +356,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.poll .dropdown-bar-content {
-  line-height: 14px;
   background: #004a03;
   border: 1px solid #fff;
   color: #fff;
@@ -472,7 +422,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.whiteboard .dropdown-bar-content {
-  line-height: 14px;
   background: #670066;
   border: 1px solid #fff;
   color: #fff;
@@ -539,7 +488,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.drive .dropdown-bar-content {
-  line-height: 14px;
   background: #0079e6;
   border: 1px solid #fff;
   color: #fff;
@@ -606,7 +554,6 @@
   color: #fff;
 }
 .cryptpad-toolbar.file .dropdown-bar-content {
-  line-height: 14px;
   background: #b7212d;
   border: 1px solid #fff;
   color: #fff;
@@ -648,6 +595,9 @@
   margin: 0;
   background: transparent;
 }
+.cryptpad-toolbar .dropdown-bar .dropdown-bar-content {
+  line-height: 14px;
+}
 .cryptpad-toolbar .separator {
   content: '';
   display: inline-block;
@@ -961,12 +911,17 @@
   height: 64px;
   position: relative;
 }
+.cryptpad-toolbar-top .filler {
+  height: 100%;
+  display: inline-block;
+  order: 4;
+  flex: 1;
+}
 .cryptpad-toolbar-top .cryptpad-title {
   order: 3;
   height: 100%;
   display: inline-block;
   line-height: 64px;
-  flex: 1;
   margin-left: 20px;
 }
 .cryptpad-toolbar-top .cryptpad-title .title,
@@ -1073,6 +1028,9 @@
 .cryptpad-toolbar-top .cryptpad-link:hover {
   background-color: rgba(0, 0, 0, 0.5);
 }
+.cryptpad-toolbar-top .cryptpad-link .fa {
+  margin: 0;
+}
 .cryptpad-toolbar-top .cryptpad-link a.cryptpad-logo {
   cursor: pointer;
   font-size: 1em;
@@ -1084,7 +1042,7 @@
 .cryptpad-toolbar-top .cryptpad-user {
   height: 100%;
   display: inline-block;
-  order: 4;
+  order: 5;
   line-height: 64px;
 }
 .cryptpad-toolbar-top .cryptpad-user > * {
@@ -1152,26 +1110,46 @@
   border-radius: 0;
   padding: 0 10px;
 }
+.cryptpad-toolbar-rightside .drawer-content:empty ~ .drawer-button {
+  display: none;
+}
 .cryptpad-toolbar-rightside .drawer-content {
   position: absolute;
   right: 0px;
   top: 96px;
-  width: 50px;
+  min-width: 50px;
   background: white;
   border: 1px solid black;
-  display: none;
+  display: flex;
+  flex-flow: column;
+  z-index: 1000;
+}
+.cryptpad-toolbar-rightside .drawer-content > span {
+  box-sizing: border-box;
+  width: 150px;
+  height: 26px;
+  border-radius: 0;
+  border: 0;
+}
+.cryptpad-toolbar-rightside .drawer-content > span:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+.cryptpad-toolbar-rightside .drawer-content > span button {
+  border: 0;
 }
 .cryptpad-toolbar-rightside .drawer-content button {
-  text-align: center;
   width: 100%;
+}
+.cryptpad-toolbar-rightside .drawer-content > button {
+  text-align: center;
   margin: 0;
   border-radius: 0;
   border: 1px solid transparent;
 }
-.cryptpad-toolbar-rightside .drawer-content button:hover {
+.cryptpad-toolbar-rightside .drawer-content > button:hover {
   border: 1px solid transparent;
 }
-.cryptpad-toolbar-rightside .drawer-content button:not(:last-child) {
+.cryptpad-toolbar-rightside .drawer-content > button:not(:last-child) {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }
 .cryptpad-toolbar-history {
diff --git a/www/code/main.js b/www/code/main.js
index e9f42dae3..6e0270285 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -196,6 +196,7 @@ define([
                 CodeMirror.init(config.onLocal, Title, toolbar);
 
                 var $rightside = toolbar.$rightside;
+                var $drawer = toolbar.$drawer;
 
                 var editHash;
                 if (!readOnly) {
@@ -215,7 +216,7 @@ define([
                     $toolbar: $bar
                 };
                 var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-                $rightside.append($hist);
+                $drawer.append($hist);
 
                 /* save as template */
                 if (!Cryptpad.isTemplate(window.location.href)) {
@@ -230,12 +231,12 @@ define([
 
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText);
-                $rightside.append($export);
+                $drawer.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
                     var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText);
-                    $rightside.append($import);
+                    $drawer.append($import);
                 }
 
                 /* add a forget button */
diff --git a/www/common/common-codemirror.js b/www/common/common-codemirror.js
index ca53b8887..75da658b8 100644
--- a/www/common/common-codemirror.js
+++ b/www/common/common-codemirror.js
@@ -21,12 +21,14 @@ define([
         var Title;
         var onLocal = function () {};
         var $rightside;
+        var $drawer;
         exp.init = function (local, title, toolbar) {
             if (typeof local === "function") {
                 onLocal = local;
             }
             Title = title;
             $rightside = toolbar.$rightside;
+            $drawer = toolbar.$drawer;
         };
 
         var editor = exp.editor = CMeditor.fromTextArea($textarea[0], {
@@ -156,7 +158,7 @@ define([
                 onLocal();
             });
 
-            if ($rightside) { $rightside.append($block); }
+            if ($drawer) { $drawer.append($block); }
             if (cb) { cb(); }
         };
 
@@ -194,7 +196,7 @@ define([
                 localStorage.setItem(themeKey, theme);
             });
 
-            if ($rightside) { $rightside.append($block); }
+            if ($drawer) { $drawer.append($block); }
             if (cb) { cb(); }
         };
 
diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js
index 26295c14a..fb19e0f52 100644
--- a/www/common/cryptpad-common.js
+++ b/www/common/cryptpad-common.js
@@ -1100,7 +1100,7 @@ define([
             case 'more':
                 button = $('<button>', {
                     title: Messages.moreActions || 'TODO',
-                    'class': "fa fa-ellipsis-h",
+                    'class': "drawer-button fa fa-ellipsis-h",
                     style: 'font:'+size+' FontAwesome'
                 });
                 break;
diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js
index d4f986cad..8849eed4e 100644
--- a/www/common/toolbar2.js
+++ b/www/common/toolbar2.js
@@ -33,7 +33,7 @@ define([
     var LAG_CLS = Bar.constants.lag = 'cryptpad-lag';
     var LIMIT_CLS = Bar.constants.lag = 'cryptpad-limit';
     var TITLE_CLS = Bar.constants.title = "cryptpad-title";
-    var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-newpad";
+    var NEWPAD_CLS = Bar.constants.newpad = "cryptpad-new";
     var UPGRADE_CLS = Bar.constants.upgrade = "cryptpad-upgrade";
 
     // User admin menu
@@ -74,6 +74,7 @@ define([
         }
 
         var $topContainer = $('<div>', {'class': TOP_CLS});
+        $('<span>', {'class': 'filler'}).appendTo($topContainer);
         var $userContainer = $('<span>', {
             'class': USER_CLS
         }).appendTo($topContainer);
@@ -92,9 +93,9 @@ define([
 
         var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
         if (!config.hideDrawer) {
-            var $drawerContent = $('<div>', {'class': 'drawer-content'}).appendTo($rightside);
+            var $drawerContent = $('<div>', {'class': DRAWER_CLS}).appendTo($rightside).hide();
             var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
-            $drawer.click(function (e) {
+            $drawer.click(function () {
                 $drawerContent.toggle();
             });
         }
@@ -224,11 +225,6 @@ define([
         // Update the buttons
         var fa_editusers = '<span class="fa fa-users"></span>';
         var fa_viewusers = '<span class="fa fa-eye"></span>';
-        var viewersText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
-        var editorsText = numberOfEditUsers !== 1 ? Messages.editors : Messages.editor;
-        //var $span = $('<span>', {'class': 'large'}).html(fa_editusers + ' ' + numberOfEditUsers + ' ' + editorsText + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers + ' ' + viewersText);
-        //var $spansmall = $('<span>', {'class': 'narrow'}).html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
-        //$userButtons.find('.buttonTitle').html('').append($span).append($spansmall);
         var $spansmall = $('<span>').html(fa_editusers + ' ' + numberOfEditUsers + '&nbsp;&nbsp; ' + fa_viewusers + ' ' + numberOfViewUsers);
         $userButtons.find('.buttonTitle').html('').append($spansmall);
 
@@ -670,7 +666,7 @@ define([
 
     var createNewPad = function (toolbar) {
         var $newPad = $('<span>', {
-            'class': "cryptpad-new dropdown-bar"
+            'class': NEWPAD_CLS + " dropdown-bar"
         }).appendTo(toolbar.$top);
 
         var pads_options = [];
diff --git a/www/slide/main.js b/www/slide/main.js
index 4b7e13b85..9ea3925e9 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -366,6 +366,7 @@ define([
                 CodeMirror.init(config.onLocal, Title, toolbar);
 
                 var $rightside = toolbar.$rightside;
+                var $drawer = toolbar.$drawer;
 
                 var editHash;
 
@@ -386,7 +387,7 @@ define([
                     $toolbar: $bar
                 };
                 var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
-                $rightside.append($hist);
+                $drawer.append($hist);
 
                 /* save as template */
                 if (!Cryptpad.isTemplate(window.location.href)) {
@@ -401,12 +402,12 @@ define([
 
                 /* add an export button */
                 var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText);
-                $rightside.append($export);
+                $drawer.append($export);
 
                 if (!readOnly) {
                     /* add an import button */
                     var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText);
-                    $rightside.append($import);
+                    $drawer.append($import);
                 }
 
                 /* add a forget button */
@@ -459,7 +460,7 @@ define([
                     }, {ok: Messages.printButton});
                     //$('body').append(createPrintDialog());
                 });
-                $rightside.append($printButton);
+                $drawer.append($printButton);
 
                 var $slideOptions = $('<button>', {
                     title: Messages.slideOptionsTitle,
@@ -468,7 +469,7 @@ define([
                 }).click(function () {
                     $('body').append(createPrintDialog());
                 });
-                $rightside.append($slideOptions);
+                $drawer.append($slideOptions);
 
                 var $present = Cryptpad.createButton('present', true)
                     .click(function () {