From 96f6e0ebafac5b52df659688c463e47441c91f35 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 13 May 2020 11:28:00 +0200
Subject: [PATCH] Fix ordering in file menu, add scrollbars and remove 'new
 pad' button

---
 customize.dist/src/less2/include/toolbar.less | 52 +++++++++++++------
 www/common/common-ui-elements.js              | 36 +++++++++----
 www/common/sframe-common-codemirror.js        |  9 +++-
 www/common/toolbar.js                         | 52 +++----------------
 www/slide/inner.js                            |  5 +-
 5 files changed, 83 insertions(+), 71 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index ee435c19a..3256394f9 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -603,17 +603,6 @@ color: var(--toolbar-bg-color);
                             }
                         }
                     }
-                    .cp-toolbar-new {
-                        height: @toolbar_line-height;
-                        width: @toolbar_line-height;
-                        margin-left: 0;
-                        button {
-                            height: @toolbar_line-height;
-                            width: @toolbar_line-height;
-                            font-size: 20px;
-                            margin-top: -1px;
-                        }
-                    }
                     .cp-toolbar-user-dropdown {
                         height: @toolbar_line-height;
                         width: @toolbar_line-height;
@@ -797,7 +786,7 @@ color: var(--toolbar-bg-color);
                 height: 43px;
             }
         }
-        .cp-toolbar-link, .cp-toolbar-new, .cp-toolbar-notifications {
+        .cp-toolbar-link, .cp-toolbar-notifications {
             font-size: 48px;
             line-height: @toolbar_top-height;
             width: 64px;
@@ -816,7 +805,7 @@ color: var(--toolbar-bg-color);
  */
 
         }
-        .cp-toolbar-notifications, .cp-toolbar-new {
+        .cp-toolbar-notifications {
 /*
             // XXX
             background-color: rgba(0,0,0,0.2);
@@ -928,7 +917,6 @@ color: var(--toolbar-bg-color);
  */
 
             .cp-toolbar-notifications { order: 1; }
-            .cp-toolbar-new { order: 2; }
             .cp-toolbar-user-dropdown { order: 3; }
             .cp-toolbar-backup { order: 4; } // TODO drive migration to secure iframe
             &> * {
@@ -955,7 +943,6 @@ color: var(--toolbar-bg-color);
 
                 .cp-dropdown-content {
                     margin: 0;
-                    overflow: visible;
                 }
                 & > button {
                     display: flex;
@@ -1059,11 +1046,46 @@ color: var(--toolbar-bg-color);
         }
 
         .cp-toolbar-bottom-left {
+            .cp-toolbar-appmenu, .cp-toolbar-file {
+                button {
+                    &::before, .fa {
+                        min-width: 20px;
+                        text-align: center;
+                        margin-right: 0;
+                    }
+                }
+            }
+            .cp-toolbar-file {
+                button {
+                    order: 50;
+                    &.fa-plus { order: 0; }
+                    &.fa-history { order: 5; }
+                    &.fa-hashtag { order: 10; }
+                    &.fa-bookmark { order: 15; }
+                    &.fa-upload { order: 20; }
+                    &.fa-clone { order: 25; }
+                    &.fa-download { order: 30; }
+                    &.fa-print { order: 35; }
+                    &.fa-trash { order: 40; }
+                    &.fa-info-circle { order: 100; }
+
+                    &.fa-arrows-h { order: 5; }
+                    &.fa-cog { order: 5; }
+                    &.fa-paint-brush { order: 5; }
+                    &.cp-toolbar-icon-help { order: 150; }
+                }
+            }
+
             .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
                 display: none;
             }
             .cp-toolbar-drawer-content {
                 box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+                overflow-y: auto;
+                overflow-x: hidden;
+                &.cp-dropdown-visible {
+                    overflow: visible;
+                }
                 position: absolute;
                 left: 0px;
                 top: @toolbar_line-height;
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 6a54b8f07..17e90857c 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1400,7 +1400,6 @@ define([
             case 'copy':
                 button = $('<button>', {
                     'class': 'fa fa-clone cp-toolbar-icon-import',
-                    title: Messages.makeACopy,
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.makeACopy));
                 button
                 .click(common.prepareFeedback(type))
@@ -1413,7 +1412,6 @@ define([
                 if (!common.isLoggedIn()) { return; }
                 button = $('<button>', {
                     'class': 'fa fa-upload cp-toolbar-icon-import',
-                    title: Messages.template_import,
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.template_import));
                 button
                 .click(common.prepareFeedback(type))
@@ -1425,9 +1423,8 @@ define([
                 if (!AppConfig.enableTemplates) { return; }
                 if (!common.isLoggedIn()) { return; }
                 button = $('<button>', {
-                    title: Messages.saveTemplateButton,
-                    class: 'fa fa-bookmark cp-toolbar-icon-template'
-                });
+                    'class': 'fa fa-bookmark cp-toolbar-icon-template',
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.saveTemplateButton));
                 if (data.rt) {
                     button
                     .click(function () {
@@ -1472,9 +1469,8 @@ define([
                 break;
             case 'forget':
                 button = $('<button>', {
-                    title: Messages.forgetButtonTitle,
                     'class': "fa fa-trash cp-toolbar-icon-forget"
-                });
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.fc_delete));
                 callback = typeof callback === "function" ? callback : function () {};
                 button
                 .click(common.prepareFeedback(type))
@@ -1578,8 +1574,8 @@ define([
                 button = $('<button>', {
                     'class': 'fa fa-hashtag cp-toolbar-icon-hashtag',
                     title: Messages.tags_title,
-                })
-                .click(common.prepareFeedback(type))
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.fc_hashtag));
+                button.click(common.prepareFeedback(type))
                 .click(function () {
                     common.isPadStored(function (err, data) {
                         if (!data) {
@@ -1647,6 +1643,17 @@ define([
                 .click(common.prepareFeedback(type));
                 if (callback) { button.click(callback); }
                 break;
+            case 'newpad':
+                button = $('<button>', {
+                    title: Messages.newButtonTitle,
+                    'class': 'fa fa-plus cp-toolbar-icon-newpad',
+                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.newButton));
+                button
+                .click(common.prepareFeedback(type))
+                .click(function () {
+                    common.createNewPadModal();
+                });
+                break;
             default:
                 data = data || {};
                 var icon = data.icon || "fa-question";
@@ -2293,6 +2300,17 @@ define([
                 content: h('span', Messages.type.teams)
             });
         }
+        if (padType !== 'contacts' && accountName) {
+            options.push({
+                tag: 'a',
+                attributes: {
+                    'target': '_blank',
+                    'href': origin+'/contacts/',
+                    'class': 'cptools cptools-contacts'
+                },
+                content: h('span', Messages.type.contacts)
+            });
+        }
         options.push({ tag: 'hr' });
         // Add the change display name button if not in read only mode
         if (config.changeNameButtonCls && config.displayChangeName && !AppConfig.disableProfile) {
diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js
index 0e482b9ad..e3a7e793b 100644
--- a/www/common/sframe-common-codemirror.js
+++ b/www/common/sframe-common-codemirror.js
@@ -363,7 +363,14 @@ define([
                     common: Common
                 };
                 var $block = exp.$theme = UIElements.createDropdown(dropdownConfig);
-                $block.find('button').attr('title', Messages.themeButtonTitle);
+                $block.find('button').attr('title', Messages.themeButtonTitle).click(function () {
+                    var state = $block.find('.cp-dropdown-content').is(':visible');
+                    var $c = $block.closest('.cp-toolbar-drawer-content');
+                    $c.removeClass('cp-dropdown-visible');
+                    if (!state) {
+                        $c.addClass('cp-dropdown-visible');
+                    }
+                });
 
                 setTheme(lastTheme, $block);
 
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index 5e1c2cb55..c9a6785ee 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -42,7 +42,6 @@ MessengerUI, Messages) {
     var SPINNER_CLS = Bar.constants.spinner = 'cp-toolbar-spinner';
     var LIMIT_CLS = Bar.constants.limit = 'cp-toolbar-limit';
     var TITLE_CLS = Bar.constants.title = "cp-toolbar-title";
-    var NEWPAD_CLS = Bar.constants.newpad = "cp-toolbar-new";
     var LINK_CLS = Bar.constants.link = "cp-toolbar-link";
     var NOTIFICATIONS_CLS = Bar.constants.user = 'cp-toolbar-notifications';
 
@@ -79,7 +78,6 @@ MessengerUI, Messages) {
         }).appendTo($topContainer);
         $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
         $('<span>', {'class': NOTIFICATIONS_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
-        $('<span>', {'class': NEWPAD_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
         $('<span>', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer);
 
         $toolbar.append($topContainer);
@@ -108,6 +106,10 @@ MessengerUI, Messages) {
                 if ($drawerContent.is(':visible')) {
                     $drawer.addClass('cp-toolbar-button-active');
                     $drawerContent.focus();
+                    var wh = $(window).height();
+                    var topPos = $drawer[0].getBoundingClientRect().bottom;
+                    console.error(wh, topPos);
+                    $drawerContent.css('max-height', Math.floor(wh - topPos - 1)+'px');
                 }
             });
             var onBlur = function (e) {
@@ -948,49 +950,9 @@ MessengerUI, Messages) {
     };
 
     var createNewPad = function (toolbar, config) {
-        var $newPad = toolbar.$top.find('.'+NEWPAD_CLS).show();
-
-        var origin = config.metadataMgr.getPrivateData().origin;
-
-        var pads_options = [];
-        Config.availablePadTypes.forEach(function (p) {
-            if (p === 'drive') { return; }
-            if (!Common.isLoggedIn() && Config.registeredOnlyTypes &&
-                Config.registeredOnlyTypes.indexOf(p) !== -1) { return; }
-            pads_options.push({
-                tag: 'a',
-                attributes: {
-                    'target': '_blank',
-                    'href': origin + '/' + p + '/',
-                },
-                content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
-            });
-        });
-        pads_options.push({
-            tag: 'a',
-            attributes: {
-                id: 'cp-app-toolbar-creation-advanced',
-                href: origin
-            },
-            content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
-        });
-        var dropdownConfig = {
-            text: '', // Button initial text
-            options: pads_options, // Entries displayed in the menu
-            container: $newPad,
-            left: true,
-            feedback: /drive/.test(window.location.pathname)?
-                'DRIVE_NEWPAD': 'NEWPAD',
-            common: Common
-        };
-        var $newPadBlock = UIElements.createDropdown(dropdownConfig);
-        $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
-        $newPadBlock.find('button').addClass('fa fa-th');
-        $newPadBlock.find('#cp-app-toolbar-creation-advanced').click(function (e) {
-            e.preventDefault();
-            Common.createNewPadModal();
-        });
-        return $newPadBlock;
+        var $button = Common.createButton('newpad', true);
+        toolbar.$drawer.append($button);
+        return $button;
     };
 
     var createUserAdmin = function (toolbar, config) {
diff --git a/www/slide/inner.js b/www/slide/inner.js
index eca5aadac..adce8e2b3 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -102,7 +102,7 @@ define([
 
     var mkThemeButton = function (framework) {
         Messages.toolbar_theme = "Theme";
-        var $theme = $(h('button', [
+        var $theme = $(h('button.cp-toolbar-appmenu', [
             h('i.cptools.cptools-palette'),
             h('span.cp-button-name', Messages.toolbar_theme)
         ]));
@@ -115,6 +115,9 @@ define([
             if ($content.is(':visible')) {
                 $theme.addClass('cp-toolbar-button-active');
                 $content.focus();
+                var wh = $(window).height();
+                var topPos = $theme[0].getBoundingClientRect().bottom;
+                $content.css('max-height', Math.floor(wh - topPos - 1)+'px');
             }
         });
         var onBlur = function (e) {