Merge pull request #1578 from cryptpad/Misaligned-file-menu-items

Fix misaligned/missing file dropdown menu items

customize.dist/src/less2/include/toolbar-history.less

@@ -73,8 +73,8 @@
                 text-transform: uppercase;
                 display: inline-flex;
                 align-items: center;
-                .fa:not(:last-child) {
+                i:not(:last-child) {
-                    margin-right: 5px;
+                    margin-right: 0.5rem;
                 }
                 &:hover {
                     background-color: fade(@cp_toolbar-fg, 30%);

customize.dist/src/less2/include/toolbar.less

@@ -987,11 +987,8 @@
             height: @toolbar_line-height;
             display: inline-flex;
             align-items: center;
-            .fa, .cptools {
+            i ~ span {
-                margin-right: 5px;
+                margin-left: 0.5rem;
-            }
-            .cp-dropdown-button-title .cp-icon {
-                margin-left: 5px;
             }
             &:hover {
                 background-color: fade(@cp_toolbar-bottom-bg, 70%);
@@ -1113,15 +1110,6 @@
             }
         }
         .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 {
                 order: 1;
             }

www/common/common-ui-elements.js

@@ -623,13 +623,22 @@ define([
         var appType = (common.getMetadataMgr().getMetadata().type || 'pad').toUpperCase();
         data = data || {};
         if (!callback && data.callback) { callback = data.callback; }
+
+        let makeButton = function(iconClasses, buttonClasses, title, text) {
+            const ariaLabel = title || text || '';
+            return $(h('button', {
+                class: buttonClasses,
+                title: title,
+                'aria-label': ariaLabel
+            }, [
+                iconClasses ? h('i', { class: iconClasses }) : null,
+                text ? h('span', { class: 'cp-toolbar-drawer-element' }, text) : null
+            ]));
+        };
+
         switch (type) {
             case 'export':
-                button = $('<button>', {
+                button = makeButton('fa fa-download', 'cp-toolbar-icon-export', Messages.exportButtonTitle, Messages.exportButton);
-                    'class': 'fa fa-download cp-toolbar-icon-export',
-                    title: Messages.exportButtonTitle,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.exportButton));
-
                 button
                 .click(common.prepareFeedback(type))
                 .click(UI.clearTooltipsDelay);
@@ -638,34 +647,28 @@ define([
                 }
                 break;
             case 'import':
-                button = $('<button>', {
+                button = makeButton('fa fa-upload', 'cp-toolbar-icon-import', Messages.importButtonTitle, Messages.importButton);
-                    'class': 'fa fa-upload cp-toolbar-icon-import',
+                var importer = importContent((data && data.binary) ? 'application/octet-stream' : 'text/plain', callback, {
-                    title: Messages.importButtonTitle,
+                    accept: data ? data.accept : undefined,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.importButton));
+                    binary: data ? data.binary : undefined
-                    var importer = importContent((data && data.binary) ? 'application/octet-stream' : 'text/plain', callback, {
+                });
-                        accept: data ? data.accept : undefined,
-                        binary: data ? data.binary : undefined
-                    });
 
-                    var handler = data.first? function () {
+                var handler = data.first? function () {
-                        data.first(function () {
+                    data.first(function () {
-                            importer(); // Make sure we don't pass arguments to importer
+                        importer(); // Make sure we don't pass arguments to importer
-                        });
-                    }: importer; //importContent;
-
-                    button
-                    .click(common.prepareFeedback(type))
-                    .click(function () {
-                        handler();
-                        UI.clearTooltipsDelay();
                     });
+                }: importer; //importContent;
+
+                button
+                .click(common.prepareFeedback(type))
+                .click(function () {
+                    handler();
+                    UI.clearTooltipsDelay();
+                });
                 //}
                 break;
             case 'upload':
-                button = $('<button>', {
+                button = makeButton('fa fa-upload', 'btn btn-primary new', Messages.uploadButtonTitle, Messages.uploadButton);
-                    'class': 'btn btn-primary new',
-                    title: Messages.uploadButtonTitle,
-                }).append($('<span>', {'class':'fa fa-upload'})).append(' '+Messages.uploadButton);
                 if (!data.FM) { return; }
                 var $input = $('<input>', {
                     'type': 'file',
@@ -697,9 +700,7 @@ define([
                 });
                 break;
             case 'copy':
-                button = $('<button>', {
+                button = makeButton('fa fa-files-o', 'cp-toolbar-icon-import', '', Messages.makeACopy);
-                    'class': 'fa fa-files-o cp-toolbar-icon-import',
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.makeACopy));
                 button
                 .click(common.prepareFeedback(type))
                 .click(function () {
@@ -710,9 +711,7 @@ define([
             case 'importtemplate':
                 if (!AppConfig.enableTemplates) { return; }
                 if (!common.isLoggedIn()) { return; }
-                button = $('<button>', {
+                button = makeButton('fa fa-upload', 'cp-toolbar-icon-import', '', Messages.template_import);
-                    'class': 'fa fa-upload cp-toolbar-icon-import',
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.template_import));
                 button
                 .click(common.prepareFeedback(type))
                 .click(function () {
@@ -724,9 +723,7 @@ define([
             case 'template':
                 if (!AppConfig.enableTemplates) { return; }
                 if (!common.isLoggedIn()) { return; }
-                button = $('<button>', {
+                button = makeButton('cptools cptools-new-template', 'cp-toolbar-icon-template', '', Messages.saveTemplateButton);
-                    'class': 'cptools cptools-new-template cp-toolbar-icon-template',
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.saveTemplateButton));
                 if (data.rt || data.callback) {
                     button
                     .click(function () {
@@ -774,9 +771,7 @@ define([
                 }
                 break;
             case 'forget':
-                button = $('<button>', {
+                button = makeButton('fa fa-trash', 'cp-toolbar-icon-forget', '', Messages.fc_delete);
-                    '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))
@@ -837,25 +832,16 @@ define([
                 ])).click(common.prepareFeedback(type));
                 break;
             case 'print':
-                button = $('<button>', {
+                button = makeButton('fa fa-print', 'cp-toolbar-icon-print', Messages.printButtonTitle2, Messages.printText);
-                    title: Messages.printButtonTitle2,
-                    'class': "fa fa-print cp-toolbar-icon-print",
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.printText));
                 break;
             case 'history':
                 if (!AppConfig.enableHistory) {
                     button = $('<span>');
                     break;
                 }
-                button = $('<button>', {
+                button = makeButton('fa fa-history', 'cp-toolbar-icon-history', Messages.historyButton, Messages.historyText, Messages.historyButton);
-                    title: Messages.historyButton,
-                    'aria-label': Messages.historyButton,
-                    'class': "fa fa-history cp-toolbar-icon-history",
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
                 if (data.histConfig) {
-                    button
+                    button.click(common.prepareFeedback(type)).on('click', function () {
-                        .click(common.prepareFeedback(type))
-                        .on('click', function () {
                         common.getHistory(data.histConfig);
                         UI.clearTooltipsDelay();
                     });
@@ -879,9 +865,10 @@ define([
                 if (callback) { button.click(callback); }
                 break;
             case 'storeindrive':
-                button = $(h('button.cp-toolbar-storeindrive.fa.fa-hdd-o', {
+                button = $(h('button.cp-toolbar-storeindrive', {
                     style: 'display:none;'
                 }, [
+                    h('i.fa.fa-hdd-o'),
                     h('span.cp-toolbar-name.cp-toolbar-drawer-element', Messages.toolbar_storeInDrive)
                 ])).click(common.prepareFeedback(type)).click(function () {
                     $(button).hide();
@@ -902,10 +889,7 @@ define([
                 });
                 break;
             case 'hashtag':
-                button = $('<button>', {
+                button = makeButton('fa fa-hashtag', 'cp-toolbar-icon-hashtag', Messages.tags_title, Messages.fc_hashtag);
-                    'class': 'fa fa-hashtag cp-toolbar-icon-hashtag',
-                    title: Messages.tags_title,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.fc_hashtag));
                 button.click(common.prepareFeedback(type))
                 .click(function () {
                     common.isPadStored(function (err, data) {
@@ -950,11 +934,8 @@ define([
                 //updateIcon(data.element.is(':visible'));
                 break;
             case 'properties':
-                button = $('<button>', {
+                button = makeButton('fa fa-info-circle', 'cp-toolbar-icon-properties', Messages.propertiesButtonTitle, Messages.propertiesButton);
-                    'class': 'fa fa-info-circle cp-toolbar-icon-properties',
+                button
-                    title: Messages.propertiesButtonTitle,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
-                .text(Messages.propertiesButton))
                 .click(common.prepareFeedback(type))
                 .click(function () {
                     var isTop;
@@ -970,11 +951,8 @@ define([
                 });
                 break;
             case 'save': // OnlyOffice save
-                button = $('<button>', {
+                button = makeButton('fa fa-save', '', Messages.settings_save, Messages.settings_save);
-                    'class': 'fa fa-save',
+                button
-                    title: Messages.settings_save,
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
-                .text(Messages.settings_save))
                 .click(function() {
                     common.prepareFeedback(type);
                     UI.clearTooltipsDelay();
@@ -982,10 +960,7 @@ define([
                 if (callback) { button.click(callback); }
                 break;
             case 'newpad':
-                button = $('<button>', {
+                button = makeButton('fa fa-plus', 'cp-toolbar-icon-newpad', Messages.newButtonTitle, Messages.newButton);
-                    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 () {
@@ -994,10 +969,7 @@ define([
                 });
                 break;
             case 'snapshots':
-                button = $('<button>', {
+                button = makeButton('fa fa-camera', 'cp-toolbar-icon-snapshots', Messages.snapshots_button,Messages.snapshots_button);
-                    title: Messages.snapshots_button,
-                    'class': 'fa fa-camera cp-toolbar-icon-snapshots',
-                }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.snapshots_button));
                 button
                 .click(common.prepareFeedback(type))
                 .click(function () {
@@ -1280,6 +1252,7 @@ define([
             kanban: 'kanban',
             form: 'form',
             whiteboard: 'whiteboard',
+            diagram: 'diagram',
         };
 
         var href = "https://docs.cryptpad.org/en/user_guide/applications.html";

www/diagram/inner.js

@@ -4,20 +4,24 @@
 
 // This is the initialization loading the CryptPad libraries
 define([
+    'jquery',
     '/common/sframe-app-framework.js',
     '/customize/messages.js', // translation keys
     '/components/pako/dist/pako.min.js',
     '/components/x2js/x2js.js',
     '/diagram/util.js',
+    '/common/common-ui-elements.js',
     '/components/tweetnacl/nacl-fast.min.js',
     'less!/diagram/app-diagram.less',
     'css!/diagram/drawio.css',
 ], function (
+    $,
     Framework,
     Messages,
     pako,
     X2JS,
-    DiagramUtil
+    DiagramUtil,
+    UIElements
 ) {
     const Nacl = window.nacl;
     const APP = window.APP = {};
@@ -61,6 +65,15 @@ define([
         return JSON.stringify(o1) === JSON.stringify(o2);
     };
 
+    var mkHelpMenu = function (framework) {
+        var $codeMirrorContainer = $('#cp-app-diagram-container');
+        var helpMenu = framework._.sfCommon.createHelpMenu(['diagram']);
+        $codeMirrorContainer.prepend(helpMenu.menu);
+
+        var $helpMenuButton = UIElements.getEntryFromButton(helpMenu.button);
+        framework._.toolbar.$drawer.append($helpMenuButton);
+    };
+
     // This is the main initialization loop
     var onFrameworkReady = function (framework) {
         var EMPTY_DRAWIO = "<mxfile type=\"embed\"><diagram id=\"bWoO5ACGZIaXrIiKNTKd\" name=\"Page-1\"><mxGraphModel dx=\"1259\" dy=\"718\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" connect=\"1\" arrows=\"1\" fold=\"1\" page=\"1\" pageScale=\"1\" pageWidth=\"827\" pageHeight=\"1169\" math=\"0\" shadow=\"0\"><root><mxCell id=\"0\"/><mxCell id=\"1\" parent=\"0\"/></root></mxGraphModel></diagram></mxfile>";
@@ -69,6 +82,11 @@ define([
         var lastContent = x2js.xml2js(EMPTY_DRAWIO);
         var drawIoInitalized = false;
 
+        var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
+        if (!privateData.isEmbed) {
+            mkHelpMenu(framework);
+        }
+
         var postMessageToDrawio = function(msg) {
             if (!drawIoInitalized) {
                 return;