Add fixed order for rightside icons in the toolbar

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

@@ -389,11 +389,6 @@
             margin: 0;
         }*/
 
-        .cp-toolbar-rightside-button {
-            float: right;
-            cursor: pointer;
-        }
-
         select {
             margin-left: 5px;
             margin-right: 5px;
@@ -475,13 +470,6 @@
                 background-color: @bg-color;
             }
         }
-        .cp-toolbar-rightside {
-            @media screen and (max-width: @barWidth) { // 450px
-                flex-wrap: wrap;
-                height: auto;
-                width: 100%;
-            }
-        }
         .cp-toolbar-title-hoverable:hover {
             .cp-toolbar-title-editable, .cp-toolbar-title-edit {
                 cursor: text;
@@ -830,13 +818,37 @@
         }
     }
     .cp-toolbar-rightside {
+        display: flex;
         min-height: @toolbar_line-height;
         overflow: hidden;
+        @media screen and (max-width: @barWidth) { // 450px
+            flex-wrap: wrap;
+            height: auto;
+            width: 100%;
+        }
         &:empty {
             min-height: 0;
             height: 0;
         }
-        text-align: right;
+
+        .cp-toolbar-rightside-button {
+            cursor: pointer;
+            // UI actions
+            &.cp-toolbar-icon-toggle { order: 1; }
+            &.cp-toolbar-icon-preview { order: 2; }
+            &.cp-toolbar-icon-present { order: 3; }
+            // Content actions
+            &.cp-toolbar-icon-mediatag { order: 10; }
+            order: 11;
+            // Storage actions
+            &.cp-toolbar-icon-hashtag { order: 20; }
+            &.cp-toolbar-icon-template { order: 21; }
+            &.cp-toolbar-icon-forget { order: 22; }
+            // Drawer
+            &.cp-toolbar-drawer-button { order: 30; }
+
+        }
+
         .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button {
             display: none;
         }

www/code/inner.js

@@ -102,7 +102,7 @@ define([
             class: 'cp-app-code-preview-empty'
         }).appendTo($previewContainer);
 
-        var $previewButton = framework._.sfCommon.createButton(null, true);
+        var $previewButton = framework._.sfCommon.createButton('preview', true);
         var forceDrawPreview = function () {
             try {
                 if (editor.getValue() === '') {
@@ -119,12 +119,6 @@ define([
             forceDrawPreview();
         }, 150);
 
-        $previewButton.removeClass('fa-question').addClass('fa-eye');
-        window.setTimeout(function () {
-            // setTimeout needed for tippy (tooltip), otherwise we have the browser's default
-            // tooltips
-            $previewButton.attr('title', Messages.previewButtonTitle);
-        });
         var previewTo;
         $previewButton.click(function () {
             clearTimeout(previewTo);
@@ -377,9 +371,6 @@ define([
         if ($preview.length && $preview.is(':visible')) {
             return $preview[0];
         }
-        if ($codeMirror.length) {
-            return $codeMirror[0];
-        }
     };
 
     var main = function () {

www/common/common-thumbnail.js

@@ -177,6 +177,7 @@ define([
     window.html2canvas = undefined;
     Thumb.fromDOM = function (opts, cb) {
         var element = opts.getContainer();
+        if (!element) { return; }
         var todo = function () {
             if (opts.filter) { opts.filter(element, true); }
             window.html2canvas(element, {
@@ -202,8 +203,8 @@ define([
         var mkThumbnail = function () {
             var content = opts.getContent();
             if (content === oldThumbnailState) { return; }
+            oldThumbnailState = content;
             Thumb.fromDOM(opts, function (err, b64) {
-                oldThumbnailState = content;
                 Thumb.setPadThumbnail(common, opts.href, b64);
             });
         };

www/common/common-ui-elements.js

@@ -468,7 +468,7 @@ define([
         switch (type) {
             case 'export':
                 button = $('<button>', {
-                    'class': 'fa fa-download',
+                    'class': 'fa fa-download cp-toolbar-icon-export',
                     title: Messages.exportButtonTitle,
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.exportButton));
 
@@ -479,7 +479,7 @@ define([
                 break;
             case 'import':
                 button = $('<button>', {
-                    'class': 'fa fa-upload',
+                    'class': 'fa fa-upload cp-toolbar-icon-import',
                     title: Messages.importButtonTitle,
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.importButton));
                 if (callback) {
@@ -525,7 +525,8 @@ define([
                 if (!common.isLoggedIn()) { return; }
                 button = $('<button>', {
                     title: Messages.saveTemplateButton,
-                }).append($('<span>', {'class':'fa fa-bookmark', style: 'font:'+size+' FontAwesome'}));
+                    class: 'fa fa-bookmark cp-toolbar-icon-template'
+                });
                 if (data.rt) {
                     button
                     .click(function () {
@@ -570,37 +571,45 @@ define([
                 break;
             case 'forget':
                 button = $('<button>', {
-                    id: 'cryptpad-forget',
                     title: Messages.forgetButtonTitle,
-                    'class': "fa fa-trash cryptpad-forget",
+                    'class': "fa fa-trash cp-toolbar-icon-forget"
-                    style: 'font:'+size+' FontAwesome'
                 });
-                if (callback) {
+                callback = typeof callback === "function" ? callback : function () {};
-                    button
+                button
-                    .click(common.prepareFeedback(type))
+                .click(common.prepareFeedback(type))
-                    .click(function() {
+                .click(function() {
-                        var msg = common.isLoggedIn() ? Messages.forgetPrompt : Messages.fm_removePermanentlyDialog;
+                    var msg = common.isLoggedIn() ? Messages.forgetPrompt : Messages.fm_removePermanentlyDialog;
-                        UI.confirm(msg, function (yes) {
+                    UI.confirm(msg, function (yes) {
-                            if (!yes) { return; }
+                        if (!yes) { return; }
-                            sframeChan.query('Q_MOVE_TO_TRASH', null, function (err) {
+                        sframeChan.query('Q_MOVE_TO_TRASH', null, function (err) {
-                                if (err) { return void callback(err); }
+                            if (err) { return void callback(err); }
-                                var cMsg = common.isLoggedIn() ? Messages.movedToTrash : Messages.deleted;
+                            var cMsg = common.isLoggedIn() ? Messages.movedToTrash : Messages.deleted;
-                                UI.alert(cMsg, undefined, true);
+                            UI.alert(cMsg, undefined, true);
-                                callback();
+                            callback();
-                                return;
+                            return;
-                            });
                         });
-
                     });
-                }
+
+                });
                 break;
             case 'present':
                 button = $('<button>', {
                     title: Messages.presentButtonTitle,
-                    'class': "fa fa-play-circle cp-app-slide-present-button", // used in slide.js
+                    'class': "fa fa-play-circle cp-toolbar-icon-present", // used in slide.js
-                    style: 'font:'+size+' FontAwesome'
                 });
                 break;
+            case 'preview':
+                button = $('<button>', {
+                    title: Messages.previewButtonTitle,
+                    'class': "fa fa-eye cp-toolbar-icon-preview",
+                });
+                break;
+            case 'print':
+                button = $('<button>', {
+                    title: Messages.printButtonTitle,
+                    '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>');
@@ -608,7 +617,7 @@ define([
                 }
                 button = $('<button>', {
                     title: Messages.historyButton,
-                    'class': "fa fa-history history",
+                    'class': "fa fa-history cp-toolbar-icon-history",
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
                 if (data.histConfig) {
                     button
@@ -622,19 +631,25 @@ define([
                 button = $('<button>', {
                     title: Messages.moreActions,
                     'class': "cp-toolbar-drawer-button fa fa-ellipsis-h",
-                    style: 'font:'+size+' FontAwesome'
                 });
                 break;
+            case 'mediatag':
+                button = $('<button>', {
+                    'class': 'fa fa-picture-o cp-toolbar-icon-mediatag',
+                    title: Messages.filePickerButton,
+                })
+                .click(common.prepareFeedback(type));
+                break;
             case 'savetodrive':
                 button = $('<button>', {
-                    'class': 'fa fa-cloud-upload',
+                    'class': 'fa fa-cloud-upload cp-toolbar-icon-savetodrive',
                     title: Messages.canvas_saveToDrive,
                 })
                 .click(common.prepareFeedback(type));
                 break;
             case 'hashtag':
                 button = $('<button>', {
-                    'class': 'fa fa-hashtag',
+                    'class': 'fa fa-hashtag cp-toolbar-icon-hashtag',
                     title: Messages.tags_title,
                 })
                 .click(common.prepareFeedback(type))
@@ -642,7 +657,7 @@ define([
                 break;
             case 'toggle':
                 button = $('<button>', {
-                    'class': 'fa fa-caret-down',
+                    'class': 'fa fa-caret-down cp-toolbar-icon-toggle',
                 })
                 .click(common.prepareFeedback(type));
                 window.setTimeout(function () {
@@ -668,7 +683,7 @@ define([
                 break;
             case 'properties':
                 button = $('<button>', {
-                    'class': 'fa fa-info-circle',
+                    'class': 'fa fa-info-circle cp-toolbar-icon-properties',
                     title: Messages.propertiesButtonTitle,
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'})
                 .text(Messages.propertiesButton))
@@ -684,10 +699,24 @@ define([
                 });
                 break;
             default:
+                data = data || {};
+                var icon = data.icon || "fa-question";
                 button = $('<button>', {
-                    'class': "fa fa-question",
+                    'class': "fa " + icon,
                 })
                 .click(common.prepareFeedback(type));
+                if (data.title) { button.attr('title', data.title); }
+                if (data.style) { button.attr('style', data.style); }
+                if (data.id) { button.attr('id', data.id); }
+                if (data.hiddenReadOnly) { button.addClass('cp-hidden-if-readonly'); }
+                if (data.name) {
+                    button.addClass('cp-toolbar-icon-'+data.name);
+                    button.click(common.prepareFeedback(data.name));
+                }
+                if (data.text) {
+                    $('<span>', {'class': 'cp-toolbar-drawer-element'}).text(data.text)
+                        .appendTo(button);
+                }
         }
         if (rightside) {
             button.addClass('cp-toolbar-rightside-button');
@@ -864,10 +893,11 @@ define([
 
         var text = h('p.cp-help-text');
         var closeButton = h('span.cp-help-close.fa.fa-window-close');
-        var $toolbarButton = common.createButton('', true).addClass('cp-toolbar-button-active');
+        var $toolbarButton = common.createButton('', true, {
-        $toolbarButton.attr('title', Messages.hide_help_button);
+            title: Messages.hide_help_button,
-        $toolbarButton
+            text: Messages.help_button,
-            .append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.help_button));
+            name: 'help'
+        }).addClass('cp-toolbar-button-active');
         var help = h('div.cp-help-container', [
             closeButton,
             text

www/common/sframe-app-framework.js

@@ -398,11 +398,7 @@ define([
                         '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
                 }
             });
-            $embedButton = $('<button>', {
+            $embedButton = common.createButton('mediatag', true).click(function () {
-                title: Messages.filePickerButton,
-                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-                style: 'font-size: 17px'
-            }).click(function () {
                 common.openFilePicker({
                     types: ['file'],
                     where: ['root']

www/drive/app-drive.less

@@ -724,7 +724,7 @@ span {
         }
     }
 
-    .history {
+    .cp-toolbar-icon-history {
         float: right;
         .cp-toolbar-drawer-element {
             display: none;

www/file/app-file.less

@@ -30,6 +30,8 @@ flex-flow: column;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-flow: column;
+    min-height: 0;
 }
 
 #cp-app-file-content.ready {
@@ -134,3 +136,25 @@ media-tag {
     z-index: 10000;
     display: block;
 }
+
+#cp-app-file-download-view {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    align-items: center;
+    justify-content: center;
+    flex-flow: column;
+    media-tag {
+        flex: 1;
+        min-height: 0;
+        max-width: 100vw;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &> * {
+            max-height: 100%;
+            max-width: 100%;
+        }
+    }
+
+}

www/file/inner.js

@@ -100,6 +100,11 @@ define([
                 var title = document.title = metadata.name;
                 Title.updateTitle(title || Title.defaultTitle);
                 toolbar.addElement(['pageTitle'], {pageTitle: title});
+                toolbar.$rightside.append(common.createButton('forget', true));
+                if (common.isLoggedIn()) {
+                    toolbar.$rightside.append(common.createButton('hashtag', true));
+                }
+
 
                 common.setPadAttribute('fileType', metadata.type);
 
@@ -118,7 +123,6 @@ define([
                     $mt.attr('data-crypto-key', 'cryptpad:'+cryptKey);
 
                     var rightsideDisplayed = false;
-
                     $(window.document).on('decryption', function (e) {
                         var decrypted = e.originalEvent;
                         if (decrypted.callback) {
@@ -142,13 +146,7 @@ define([
                             toolbar.$rightside
                             .append(common.createButton('export', true, {}, function () {
                                 saveAs(decrypted.blob, decrypted.metadata.name);
-                            }))
-                            .append(common.createButton('forget', true, {}, function () {
-                                // not sure what to do here
                             }));
-                            if (common.isLoggedIn()) {
-                                toolbar.$rightside.append(common.createButton('hashtag', true));
-                            }
                             rightsideDisplayed = true;
                         }
 

www/poll/inner.js

@@ -1064,7 +1064,7 @@ define([
                     setTimeout(waitFor());
                 }).nThen(function (waitFor) {
                     // Switch to non-admin mode
-                    $('.cp-toolbar-rightside-button.fa-check').click();
+                    $('.cp-toolbar-icon-publish').click();
                     setTimeout(waitFor());
                 }).nThen(function (waitFor) {
                     $('.cp-app-poll-comments-add-name').val("Mr.Me").keyup();
@@ -1213,9 +1213,11 @@ define([
         $(helpMenu.text).html($(help).html());
 
         if (APP.readOnly) { publish(true); return; }
-        var $publish = common.createButton('', true)
+        var $publish = common.createButton('', true, {
-            .removeClass('fa-question').addClass('fa-check')
+            name: 'publish',
-            .click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
+            icon: 'fa-check',
+            hiddenReadOnly: true
+        }).click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
         APP.$publishButton = $publish;
         updatePublishButton();
 
@@ -1230,11 +1232,7 @@ define([
                 }
             };
             common.initFilePicker(fileDialogCfg);
-            APP.$mediaTagButton = $('<button>', {
+            APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
-                title: Messages.filePickerButton,
-                'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-                style: 'font-size: 17px'
-            }).click(function () {
                 var pickerCfg = {
                     types: ['file'],
                     where: ['root']

www/slide/inner.js

@@ -73,9 +73,7 @@ define([
     };
 
     var mkSlidePreviewPane = function (framework, $contentContainer) {
-        var $previewButton = framework._.sfCommon.createButton(null, true);
+        var $previewButton = framework._.sfCommon.createButton('preview', true);
-        $previewButton.removeClass('fa-question').addClass('fa-eye');
-        $previewButton.attr('title', Messages.previewButtonTitle);
         $previewButton.click(function () {
             var $c = $contentContainer;
             if ($c.hasClass('cp-app-slide-preview')) {
@@ -102,19 +100,16 @@ define([
         });
     };
 
-    var mkPrintButton = function (framework, editor, $content, $print, $toolbarDrawer) {
+    var mkPrintButton = function (framework, editor, $content, $print) {
-        var $printButton = $('<button>', {
+        var $printButton = framework._.sfCommon.createButton('print', true);
-            title: Messages.printButtonTitle,
+        $printButton.click(function () {
-            'class': 'cp-toolbar-rightside-button fa fa-print',
-            style: 'font-size: 17px'
-        }).click(function () {
             Slide.update(editor.getValue(), true);
             $print.html($content.html());
             window.focus();
             window.print();
             framework.feedback('PRINT_SLIDES');
-        }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.printText));
+        });
-        $toolbarDrawer.append($printButton);
+        framework._.toolbar.$drawer.append($printButton);
     };
 
     // Flag to check if a file from the filepicker is a mediatag for the slides or a background image
@@ -122,7 +117,7 @@ define([
         isBackground: false
     };
 
-    var mkSlideOptionsButton = function (framework, slideOptions, $toolbarDrawer) {
+    var mkSlideOptionsButton = function (framework, slideOptions) {
         var metadataMgr = framework._.cpNfInner.metadataMgr;
         var updateSlideOptions = function (newOpt) {
             if (JSONSortify(newOpt) !== JSONSortify(slideOptions)) {
@@ -319,14 +314,17 @@ define([
             return $container;
         };
 
-        var $slideOptions = $('<button>', {
+        var $optionsButton = framework._.sfCommon.createButton(null, true, {
+            icon: 'fa-cog',
             title: Messages.slideOptionsTitle,
-            'class': 'cp-toolbar-rightside-button fa fa-cog cp-hidden-if-readonly',
+            hiddenReadOnly: true,
-            style: 'font-size: 17px'
+            text: Messages.slideOptionsText,
-        }).click(function () {
+            name: 'options'
+        });
+        $optionsButton.click(function () {
             $('body').append(createPrintDialog());
-        }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.slideOptionsText));
+        });
-        $toolbarDrawer.append($slideOptions);
+        framework._.toolbar.$drawer.append($optionsButton);
 
         metadataMgr.onChange(function () {
             var md = metadataMgr.getMetadata();
@@ -363,17 +361,21 @@ define([
             framework.localChange();
         };
 
-        var $back = $('<button>', {
+        var $back = framework._.sfCommon.createButton(null, true, {
-            id: SLIDE_BACKCOLOR_ID,
+            icon: 'fa-square',
-            'class': 'fa fa-square cp-toolbar-rightside-button cp-hidden-if-readonly',
+            title: Messages.backgroundButtonTitle,
-            'style': 'font-family: FontAwesome; color: #000;',
+            hiddenReadOnly: true,
-            title: Messages.backgroundButtonTitle
+            name: 'background',
+            style: 'color: #000;',
+            id: SLIDE_BACKCOLOR_ID
         });
-        var $text = $('<button>', {
+        var $text = framework._.sfCommon.createButton(null, true, {
-            id: SLIDE_COLOR_ID,
+            icon: 'fa-i-cursor',
-            'class': 'fa fa-i-cursor cp-toolbar-rightside-button cp-hidden-if-readonly',
+            title: Messages.colorButtonTitle,
-            'style': 'font-family: FontAwesome; font-weight: bold; color: #fff;',
+            hiddenReadOnly: true,
-            title: Messages.colorButtonTitle
+            name: 'color',
+            style: 'font-weight: bold; color: #FFF;',
+            id: SLIDE_COLOR_ID
         });
         var $testColor = $('<input>', { type: 'color', value: '!' });
         var $check = $("#cp-app-slide-colorpicker");
@@ -471,7 +473,7 @@ define([
 
         activateLinks($content, framework);
         Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
-        mkPrintButton(framework, editor, $content, $print, $toolbarDrawer);
+        mkPrintButton(framework, editor, $content, $print);
         mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
         mkColorConfiguration(framework, $modal);
         mkFilePicker(framework, editor);
@@ -559,9 +561,6 @@ define([
         if ($c.hasClass('cp-app-slide-preview')) {
             return $('.cp-app-slide-frame').first()[0];
         }
-        if ($codeMirror.length) {
-            return $codeMirror[0];
-        }
     };
 
     var main = function () {

www/slide/slide.js

@@ -139,7 +139,6 @@ define([
 
             change(null, Slide.index);
             Common.setPresentUrl(true);
-            $('.cp-app-slide-present-button').hide();
             updateFontSize();
             return;
         }
@@ -147,8 +146,6 @@ define([
         Common.setTabTitle(); // Remove the slide number from the title
         Common.setPresentUrl(false);
         change(Slide.index, null);
-        $('.cp-app-slide-present-button').show();
-        $('.cp-app-slide-source-button').hide();
         $modal.removeClass('cp-app-slide-shown');
         updateFontSize();
     };

www/whiteboard/app-whiteboard.less

@@ -31,6 +31,13 @@
         display: none;
     }
 
+    .cp-toolbar-rightside {
+        .cp-toolbar-icon-savetodrive { order: 13; }
+        .cp-toolbar-icon-embedImage { order: 12; }
+        .cp-toolbar-icon-mediatag { order: 11; }
+        .cp-toolbar-icon-color { order: 10; }
+    }
+
     #cp-app-whiteboard-media-hidden {
         display: none;
     }

www/whiteboard/inner.js

@@ -312,12 +312,13 @@ define([
                 return;
             }
 
-            var $color = APP.$color = $('<button>', {
+            var $color = APP.$color = common.createButton(null, true, {
-                id: "cp-app-whiteboard-color-picker",
+                icon: 'fa-square',
                 title: Messages.canvas_chooseColor,
-                'class': "fa fa-square cp-toolbar-rightside-button",
+                name: 'color',
-            })
+                id: 'cp-app-whiteboard-color-picker'
-            .on('click', function () {
+            });
+            $color.on('click', function () {
                 pickColor($color.css('background-color'), function (color) {
                     setColor(color);
                 });
@@ -469,12 +470,13 @@ define([
                     };
                     reader.readAsDataURL(file);
                 };
-                common.createButton('', true)
+                common.createButton('', true, {
-                    .attr('title', Messages.canvas_imageEmbed)
+                    title: Messages.canvas_imageEmbed,
-                    .removeClass('fa-question').addClass('fa-file-image-o')
+                    icon: 'fa-file-image-o',
-                    .click(function () {
+                    name: 'embedImage'
-                        $('<input>', {type:'file'}).on('change', onUpload).click();
+                }).click(function () {
-                    }).appendTo($rightside);
+                    $('<input>', {type:'file'}).on('change', onUpload).click();
+                }).appendTo($rightside);
 
                 if (common.isLoggedIn()) {
                     var fileDialogCfg = {
@@ -493,11 +495,7 @@ define([
                         }
                     };
                     common.initFilePicker(fileDialogCfg);
-                    APP.$mediaTagButton = $('<button>', {
+                    APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
-                        title: Messages.filePickerButton,
-                        'class': 'cp-toolbar-rightside-button fa fa-picture-o',
-                        style: 'font-size: 17px'
-                    }).click(function () {
                         var pickerCfg = {
                             types: ['file'],
                             where: ['root'],