Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/pages.js

@@ -756,10 +756,14 @@ define([
     Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () {
         return [
             appToolbar(),
-            h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', {
+            h('div#cp-app-whiteboard-canvas-area',
-                width: 600,
+                h('div#cp-app-whiteboard-container',
-                height: 600
+                    h('canvas#cp-app-whiteboard-canvas', {
-            })),
+                        width: 600,
+                        height: 600
+                    })
+                )
+            ),
             h('div#cp-app-whiteboard-controls', {
                 style: {
                     display: 'block',

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

@@ -25,6 +25,7 @@
         text-align: center;
         font: @colortheme_app-font;
         width: 100%;
+        outline: none;
         & > div {
             width: 60vw;
             max-width: 100%;
@@ -75,7 +76,7 @@
             }
         }
 
-        .cp-creation-create {
+        .cp-creation-create, .cp-creation-settings {
             button {
                 .tools_unselectable();
                 padding: 15px;
@@ -84,9 +85,14 @@
                 margin: 3px 10px;
                 border: none;
                 cursor: pointer;
+                outline: none;
                 &:hover {
                     background: darken(@colortheme_loading-bg, 5%);
                 }
+                &.cp-creation-button-selected {
+                    color: darken(@colortheme_loading-bg, 10%);
+                    background: @colortheme_loading-color;
+                }
             }
         }
 
@@ -159,6 +165,9 @@
                     color: lighten(#0275d8, 10%);
                 }
             }
+            &> span.fa {
+                margin-left: 15px;
+            }
         }
         .cp-creation-deleted {
             background: #111;

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

@@ -0,0 +1,32 @@
+@import (once) "./colortheme-all.less";
+
+.help_main (@color, @bg-color) {
+    .cp-help-container {
+        position: relative;
+        background-color: lighten(@bg-color, 15%);
+        &.cp-help-hidden {
+            display: none;
+        }
+
+        .cp-help-close {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+        }
+        .cp-help-text {
+            color: @color;
+            margin: 0;
+            padding: 15px;
+            h1 {
+                font-size: 20px;
+            }
+            h2 {
+                font-size: 18px;
+            }
+            h3 {
+                font-size: 16px;
+            }
+            ul, ol, p { margin: 0; }
+        }
+    }
+}

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

@@ -25,6 +25,10 @@
             text-overflow: ellipsis;
             word-wrap: break-word;
         }
+        &.cp-icons-element-selected {
+            background-color: white;
+            color: #666;
+        }
         .fa {
             display: block;
             font-size: 64px;

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

@@ -0,0 +1,20 @@
+@import (once) "./colortheme-all.less";
+
+.markdownToolbar_main (@color, @bg-color) {
+    .cp-markdown-toolbar {
+        height: @toolbar_line-height;
+        background-color: lighten(@bg-color, 20%);
+        display: none;
+        button {
+            height: @toolbar_line-height !important;
+            outline: 0;
+            color: @color;
+            .toolbar_button;
+            font: normal normal normal 14px/1 FontAwesome;
+            &:hover {
+                background-color: lighten(@bg-color, 8%);
+            }
+            &.cp-markdown-help { float: right; }
+        }
+    }
+}

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

@@ -8,6 +8,8 @@
 @import (once) "./tools.less";
 @import (once) "./icons.less";
 @import (once) "./modal.less";
+@import (once) "./markdown-toolbar.less";
+@import (once) "./help.less";
 
 .toolbar_main (
     @color: @colortheme_default-color, // Color of the text for the toolbar
@@ -24,6 +26,8 @@
     .ckeditor_fix();
     .history_main();
     .iconColors_main();
+    .markdownToolbar_main(@color, @bg-color);
+    .help_main(@color, @bg-color);
 
     .cp-toolbar-container {
         display: flex;
@@ -208,6 +212,7 @@
             width: auto;
             margin: 0;
             padding: 0;
+            outline: none;
         }
         label[for="cp-app-toolbar-creation-advanced"] {
             margin: 0;
@@ -238,55 +243,6 @@
         }
     }
 
-    // TODO(cjd) This ought to be in a less file for markdown-based editors
-    .cp-markdown-toolbar {
-        height: @toolbar_line-height;
-        background-color: lighten(@bg-color, 20%);
-        display: none;
-        button {
-            height: @toolbar_line-height !important;
-            outline: 0;
-            color: @color;
-            .toolbar_button;
-            font: normal normal normal 14px/1 FontAwesome;
-            &:hover {
-                background-color: lighten(@bg-color, 8%);
-            }
-            &.cp-markdown-help { float: right; }
-        }
-    }
-
-    // TODO put in a different less file
-    .cp-help-container {
-        position: relative;
-        background-color: lighten(@bg-color, 15%);
-        &.cp-help-hidden {
-            display: none;
-        }
-
-        .cp-help-close {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-        }
-        .cp-help-text {
-            color: @color;
-            margin: 0;
-            padding: 15px;
-            h1 {
-                font-size: 20px;
-            }
-            h2 {
-                font-size: 18px;
-            }
-            h3 {
-                font-size: 16px;
-            }
-            ul, ol, p { margin: 0; }
-        }
-    }
-
-
     .cp-toolbar-userlist-drawer {
         background-color: @bg-color;
         color: @color;
@@ -388,11 +344,6 @@
             margin: 0;
         }*/
 
-        .cp-toolbar-rightside-button {
-            float: right;
-            cursor: pointer;
-        }
-
         select {
             margin-left: 5px;
             margin-right: 5px;
@@ -454,6 +405,7 @@
                             font-size: @colortheme_app-font-size;
                             flex: 1;
                             max-width: none;
+                            line-height: calc(@toolbar_line-height - 12px); // padding + border
                         }
                     }
                 }
@@ -474,13 +426,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;
@@ -626,7 +571,7 @@
             }
             input {
                 max-width: ~"calc(100% - 40px)";
-                flex: 1;
+                //flex: 1;
                 vertical-align: middle;
                 box-sizing: border-box;
                 cursor: auto;
@@ -634,6 +579,7 @@
                 font-size: 20px;
                 padding: 5px 5px;
                 height: 40px;
+                line-height: 28px; // padding + border
             }
         }
         .cp-toolbar-link, .cp-toolbar-new {
@@ -829,13 +775,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;
         }
@@ -854,6 +824,7 @@
                 font-size: 17px;
             }
             &> span {
+                order: 8;
                 box-sizing: border-box;
                 min-width: 150px;
                 height: @toolbar_line-height;
@@ -868,15 +839,36 @@
                 border: 0;
                 width: 100%;
                 line-height: 1em;
+                &.cp-toolbar-button-active {
+                    background-color: inherit;
+                }
                 .cp-toolbar-drawer-element {
                     margin-left: 10px;
                     display: inline;
-                    vertical-align: top;
+                    vertical-align: baseline;
+                }
+                &.fa-info-circle, &.fa-history, &.fa-cog {
+                    .cp-toolbar-drawer-element {
+                        margin-left: 11px;
+                    }
+                }
+                &.fa-question {
+                    .cp-toolbar-drawer-element {
+                        margin-left: 16px;
+                    }
                 }
                 &:hover {
                     background-color: @colortheme_dropdown-bg-hover !important;
                     color: @colortheme_dropdown-color;
                 }
+                order: 8;
+                &.fa-history { order: 1; }
+                &.fa-download { order: 2; }
+                &.fa-upload { order: 3; }
+                &.fa-print { order: 4; }
+                &.fa-cog { order: 5; }
+                &.fa-info-circle { order: 6; }
+                &.fa-help { order: 7; }
             }
         }
     }

customize.dist/translations/messages.fr.js

@@ -218,6 +218,10 @@ define(function () {
     out.cancelButton = 'Annuler (Échap)';
     out.doNotAskAgain = "Ne plus demander (Échap)";
 
+    out.show_help_button = "Afficher l'aide";
+    out.hide_help_button = "Cacher l'aide";
+    out.help_button = "Aide";
+
     out.historyText = "Historique";
     out.historyButton = "Afficher l'historique du document";
     out.history_next = "Voir la version suivante";
@@ -278,9 +282,6 @@ define(function () {
     out.poll_locked = "Verrouillé";
     out.poll_unlocked = "Déverrouillé";
 
-    out.poll_show_help_button = "Afficher l'aide";
-    out.poll_hide_help_button = "Cacher l'aide";
-
     out.poll_bookmark_col = "Marquer cette colonne comme favorite pour qu'elle soit toujours déverouillée et affichée en première position.";
     out.poll_bookmarked_col = "Voici votre colonne favorite; elle sera toujours dévérouillée et affichée en première position.";
     out.poll_total = 'TOTAL';
@@ -857,6 +858,7 @@ define(function () {
     out.creation_createFromTemplate = "Depuis un modèle";
     out.creation_createFromScratch = "Nouveau pad vide";
     out.creation_settings = "Préférences des nouveaux pads";
+    out.creation_saveSettings = "Sauver les préférences";
     // Properties about creation data
     out.creation_owners = "Propriétaires";
     out.creation_ownedByOther = "Possédé par un autre utilisateur";
@@ -864,7 +866,8 @@ define(function () {
     out.creation_expiration = "Date d'expiration";
     out.creation_propertiesTitle = "Disponibilité";
     out.creation_appMenuName = "Mode avancé (Ctrl + E)";
-    out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez cocher la case pour afficher l'écran de création de pads";
+    out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez aussi appuyer sur <b>Tab</b> pour sélectionner un type et appuyer sur <b>Entrée</b> pour valider.";
+    out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads possédés ou à date d'expiration). Vous pouvez appuyer sur <b>Espace</b> pour changer sa valeur.";
     out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
 
     // New share modal

customize.dist/translations/messages.js

@@ -220,6 +220,10 @@ define(function () {
     out.cancelButton = 'Cancel (esc)';
     out.doNotAskAgain = "Don't ask me again (Esc)";
 
+    out.show_help_button = "Show help";
+    out.hide_help_button = "Hide help";
+    out.help_button = "Help";
+
     out.historyText = "History";
     out.historyButton = "Display the document history";
     out.history_next = "Go to the next version";
@@ -280,9 +284,6 @@ define(function () {
     out.poll_locked = "Locked";
     out.poll_unlocked = "Unlocked";
 
-    out.poll_show_help_button = "Show help";
-    out.poll_hide_help_button = "Hide help";
-
     out.poll_bookmark_col = 'Bookmark this column so that it is always unlocked and displayed at the beginning for you';
     out.poll_bookmarked_col = 'This is your bookmarked column. It will always be unlocked and displayed at the beginning for you.';
     out.poll_total = 'TOTAL';
@@ -895,6 +896,7 @@ define(function () {
     out.creation_createFromTemplate = "From template";
     out.creation_createFromScratch = "From scratch";
     out.creation_settings = "New Pad settings";
+    out.creation_saveSettings = "Save settings";
     // Properties about creation data
     out.creation_owners = "Owners";
     out.creation_ownedByOther = "Owned by another user";
@@ -902,7 +904,8 @@ define(function () {
     out.creation_expiration = "Expiration time";
     out.creation_propertiesTitle = "Availability";
     out.creation_appMenuName = "Advanced mode (Ctrl + E)";
-    out.creation_newPadModalDescription = "Click on a pad type to create it. You can check the box if you want to display the pad creation screen (for owned pads, expiring pads, etc.).";
+    out.creation_newPadModalDescription = "Click on a pad type to create it. You can also press <b>Tab</b> to select the type and press <b>Enter</b> to confirm.";
+    out.creation_newPadModalDescriptionAdvanced = "You can check the box (or press <b>Space</b> to change its value) if you want to display the pad creation screen (for owned pads, expiring pads, etc.).";
     out.creation_newPadModalAdvanced = "Display the pad creation screen";
 
     // New share modal

www/code/inner.js

@@ -54,6 +54,7 @@ define([
 
     var MEDIA_TAG_MODES = Object.freeze([
         'markdown',
+        'gfm',
         'html',
         'htmlembedded',
         'htmlmixed',
@@ -86,7 +87,7 @@ define([
 
         $(helpMenu.text).html(DiffMd.render(Messages.codeInitialState));
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
     var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
         var $previewContainer = $('#cp-app-code-preview');
@@ -101,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() === '') {
@@ -118,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);
@@ -327,6 +322,8 @@ define([
         framework.setTitleRecommender(CodeMirror.getHeadingText);
 
         framework.onReady(function (newPad) {
+            editor.focus();
+
             if (newPad && !CodeMirror.highlightMode) {
                 CodeMirror.setMode('gfm', evModeChange.fire);
                 //console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val());
@@ -370,13 +367,9 @@ define([
 
     var getThumbnailContainer = function () {
         var $preview = $('#cp-app-code-preview-content');
-        var $codeMirror = $('.CodeMirror');
         if ($preview.length && $preview.is(':visible')) {
             return $preview[0];
         }
-        if ($codeMirror.length) {
-            return $codeMirror[0];
-        }
     };
 
     var main = function () {

www/common/common-interface.js

@@ -668,7 +668,6 @@ define([
                 position: 'bottom',
                 distance: 0,
                 performance: true,
-                dynamicTitle: true,
                 delay: [delay, 0],
                 sticky: true
             });
@@ -678,6 +677,12 @@ define([
         setInterval(UI.clearTooltips, delay);
         var checkRemoved = function (x) {
             var out = false;
+            var xId = $(x).attr('aria-describedby');
+            if (xId) {
+                if (xId.indexOf('tippy-tooltip-') === 0) {
+                    return true;
+                }
+            }
             $(x).find('[aria-describedby]').each(function (i, el) {
                 var id = el.getAttribute('aria-describedby');
                 if (id.indexOf('tippy-tooltip-') !== 0) { return; }
@@ -691,6 +696,9 @@ define([
             mutations.forEach(function(mutation) {
                 if (mutation.type === "childList") {
                     for (var i = 0; i < mutation.addedNodes.length; i++) {
+                        if ($(mutation.addedNodes[i]).attr('title')) {
+                            addTippy(0, mutation.addedNodes[i]);
+                        }
                         $(mutation.addedNodes[i]).find('[title]').each(addTippy);
                     }
                     for (var j = 0; j < mutation.removedNodes.length; j++) {

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

@@ -463,12 +463,11 @@ define([
     UIElements.createButton = function (common, type, rightside, data, callback) {
         var AppConfig = common.getAppConfig();
         var button;
-        var size = "17px";
         var sframeChan = common.getSframeChannel();
         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 +478,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 +524,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 +570,44 @@ 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 +615,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 +629,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 +655,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 () {
@@ -657,13 +670,18 @@ define([
                     data.element.toggle();
                     var isVisible = data.element.is(':visible');
                     if (callback) { callback(isVisible); }
+                    if (isVisible) {
+                        button.addClass('cp-toolbar-button-active');
+                    } else {
+                        button.removeClass('cp-toolbar-button-active');
+                    }
                     updateIcon(isVisible);
                 });
                 updateIcon(data.element.is(':visible'));
                 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))
@@ -679,11 +697,24 @@ define([
                 });
                 break;
             default:
+                data = data || {};
+                var icon = data.icon || "fa-question";
                 button = $('<button>', {
-                    'class': "fa fa-question",
+                    'class': "fa " + icon,
-                    style: 'font:'+size+' FontAwesome'
                 })
                 .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');
@@ -860,7 +891,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, {
+            title: Messages.hide_help_button,
+            text: Messages.help_button,
+            name: 'help'
+        }).addClass('cp-toolbar-button-active');
         var help = h('div.cp-help-container', [
             closeButton,
             text
@@ -871,9 +906,11 @@ define([
                 if (forceClose) { return; }
                 common.setAttribute(['hideHelp', type], false);
                 $toolbarButton.addClass('cp-toolbar-button-active');
+                $toolbarButton.attr('title', Messages.hide_help_button);
                 return void $(help).removeClass('cp-help-hidden');
             }
             $toolbarButton.removeClass('cp-toolbar-button-active');
+            $toolbarButton.attr('title', Messages.show_help_button);
             $(help).addClass('cp-help-hidden');
             common.setAttribute(['hideHelp', type], true);
         };
@@ -1528,6 +1565,7 @@ define([
         if (!$blockContainer.length) {
             $blockContainer = $('<div>', {
                 'class': 'cp-modal-container',
+                tabindex: 1,
                 'id': cfg.id
             });
         }
@@ -1559,14 +1597,16 @@ define([
             $body: $('body')
         });
         var $title = $('<h3>').text(Messages.fm_newFile);
-        var $description = $('<p>').text(Messages.creation_newPadModalDescription);
+        var $description = $('<p>').html(Messages.creation_newPadModalDescription);
         $modal.find('.cp-modal').append($title);
         $modal.find('.cp-modal').append($description);
 
         var $advanced;
 
         var $advancedContainer = $('<div>');
-        if (common.isLoggedIn()) {
+        var priv = common.getMetadataMgr().getPrivateData();
+        var c = (priv.settings.general && priv.settings.general.creation) || {};
+        if (AppConfig.displayCreationScreen && common.isLoggedIn() && c.skip) {
             $advanced = $('<input>', {
                 type: 'checkbox',
                 checked: 'checked',
@@ -1575,9 +1615,12 @@ define([
             $('<label>', {
                 for: 'cp-app-toolbar-creation-advanced'
             }).text(Messages.creation_newPadModalAdvanced).appendTo($advancedContainer);
+            $description.append('<br>');
+            $description.append(Messages.creation_newPadModalDescriptionAdvanced);
         }
 
         var $container = $('<div>');
+        var i = 0;
         AppConfig.availablePadTypes.forEach(function (p) {
             if (p === 'drive') { return; }
             if (p === 'contacts') { return; }
@@ -1586,7 +1629,8 @@ define([
             if (!common.isLoggedIn() && AppConfig.registeredOnlyTypes &&
                 AppConfig.registeredOnlyTypes.indexOf(p) !== -1) { return; }
             var $element = $('<li>', {
-                'class': 'cp-icons-element'
+                'class': 'cp-icons-element',
+                'id': 'cp-newpad-icons-'+ (i++)
             }).prepend(UI.getIcon(p)).appendTo($container);
             $element.append($('<span>', {'class': 'cp-icons-name'})
                 .text(Messages.type[p]));
@@ -1594,7 +1638,7 @@ define([
             $element.click(function () {
                 $modal.hide();
                 if ($advanced && $advanced.is(':checked')) {
-                    common.sessionStorage.put(Constants.displayPadCreationScreen, true, function () {
+                    common.sessionStorage.put(Constants.displayPadCreationScreen, true, function (){
                         common.openURL('/' + p + '/');
                     });
                     return;
@@ -1605,11 +1649,41 @@ define([
             });
         });
 
+        var selected = -1;
+        var next = function () {
+            selected = ++selected % 5;
+            $container.find('.cp-icons-element-selected').removeClass('cp-icons-element-selected');
+            $container.find('#cp-newpad-icons-'+selected).addClass('cp-icons-element-selected');
+        };
+
+        $modal.off('keydown');
+        $modal.keydown(function (e) {
+            if (e.which === 9) {
+                e.preventDefault();
+                e.stopPropagation();
+                next();
+                return;
+            }
+            if (e.which === 13) {
+                if ($container.find('.cp-icons-element-selected').length === 1) {
+                    $container.find('.cp-icons-element-selected').click();
+                }
+                return;
+            }
+            if (e.which === 32 && $advanced) {
+                $advanced.prop('checked', !$advanced.prop('checked'));
+                $modal.focus();
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        });
+
 
-        /*var $content = createNewPadIcons($modal, isInRoot);*/
         $modal.find('.cp-modal').append($container).append($advancedContainer);
-        window.setTimeout(function () { $modal.show(); });
+        window.setTimeout(function () {
-        //addNewPadHandlers($modal, isInRoot);
+            $modal.show();
+            $modal.focus();
+        });
     };
 
     UIElements.initFilePicker = function (common, cfg) {
@@ -1702,7 +1776,7 @@ define([
 
         var $body = $('body');
         var $creationContainer = $('<div>', { id: 'cp-creation-container' }).appendTo($body);
-        var $creation = $('<div>', { id: 'cp-creation' }).appendTo($creationContainer);
+        var $creation = $('<div>', { id: 'cp-creation', tabindex: 1 }).appendTo($creationContainer);
 
         var setHTML = function (e, html) {
             e.innerHTML = html;
@@ -1802,8 +1876,7 @@ define([
         UIElements.setExpirationValue(cfg.expire, $creation);
 
         // Create the pad
-        var create = function (template) {
+        var getFormValues = function (template) {
-            $creationContainer.remove();
             // Type of pad
             var ownedVal = parseInt($('input[name="cp-creation-owned"]:checked').val());
             // Life time
@@ -1819,11 +1892,16 @@ define([
                 expireVal = ($('#cp-creation-expire-val').val() || 0) * unit;
             }
 
-            common.createPad({
+            return {
                 owned: ownedVal,
                 expire: expireVal,
                 template: template
-            }, function () {
+            };
+        };
+        var create = function (template) {
+            $creationContainer.remove();
+
+            common.createPad(getFormValues(template), function () {
                 cb();
             });
         };
@@ -1868,10 +1946,62 @@ define([
 
         // Settings button
         var origin = common.getMetadataMgr().getPrivateData().origin;
-        $(h('div.cp-creation-settings', h('a', {
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved}).hide();
-            href: origin + '/settings/#creation',
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'}).hide();
-            target: '_blank'
+        var okTo;
-        }, Messages.creation_settings))).appendTo($creation);
+        var $saveButton = $('<button>').text(Messages.creation_saveSettings).click(function () {
+            if (okTo) { clearTimeout(okTo); }
+            $ok.hide();
+            $spinner.show();
+            var val = getFormValues();
+            NThen(function (waitFor) {
+                common.setAttribute(['general', 'creation', 'owned'], val.owned, waitFor(function (e) {
+                    if (e) { return void console.error(e); }
+                }));
+                common.setAttribute(['general', 'creation', 'expire'], val.expire, waitFor(function (e) {
+                    if (e) { return void console.error(e); }
+                }));
+            }).nThen(function () {
+                $spinner.hide();
+                $ok.show();
+                okTo = setTimeout(function () {
+                    $ok.hide();
+                }, 5000);
+            });
+        });
+        $(h('div.cp-creation-settings', [
+            $saveButton[0],
+            h('br'),
+            h('a', {
+                href: origin + '/settings/#creation',
+                target: '_blank'
+            }, Messages.creation_settings),
+            $ok[0],
+            $spinner[0]
+        ])).appendTo($creation);
+
+        var selected = -1;
+        var next = function () {
+            selected = ++selected % $creation.find('button').length;
+            $creation.find('button').removeClass('cp-creation-button-selected');
+            $($creation.find('button').get(selected)).addClass('cp-creation-button-selected');
+        };
+
+        $creation.keydown(function (e) {
+            if (e.which === 9) {
+                e.preventDefault();
+                e.stopPropagation();
+                next();
+                return;
+            }
+            if (e.which === 13) {
+                if ($creation.find('.cp-creation-button-selected').length === 1) {
+                    $creation.find('.cp-creation-button-selected').click();
+                }
+                return;
+            }
+        });
+        $creation.focus();
     };
 
     UIElements.onServerError = function (common, err, toolbar, cb) {

www/common/diffMarked.js

@@ -116,6 +116,7 @@ define([
 
     /*  remove listeners from the DOM */
     var removeListeners = function (root) {
+        if (!root) { return; }
         slice(root.attributes).map(function (attr) {
             if (/^on/i.test(attr.name)) {
                 console.log('removing attribute', attr.name, root.attributes[attr.name]);
@@ -171,7 +172,9 @@ define([
             return mt + '</media-tag>';
         });
 
-        var safe_newHtmlFixed = domFromHTML(unsafe_newHtmlFixed).body.outerHTML;
+        var newDomFixed = domFromHTML(unsafe_newHtmlFixed);
+        if (!newDomFixed || !newDomFixed.body) { return; }
+        var safe_newHtmlFixed = newDomFixed.body.outerHTML;
         var $div = $('<div>', {id: id}).append(safe_newHtmlFixed);
 
         var Dom = domFromHTML($('<div>').append($div).html());

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/common/toolbar3.js

@@ -318,7 +318,7 @@ define([
                 $span.append($rightCol);
             } else {
                 Common.displayAvatar($span, data.avatar, name, function ($img) {
-                    if (data.avatar && $img.length) {
+                    if (data.avatar && $img && $img.length) {
                         avatars[data.avatar] = $img[0].outerHTML;
                     }
                     $span.append($rightCol);
@@ -610,7 +610,7 @@ define([
                 });
             });
             $('.cp-toolbar-top').append($msg);
-            UI.addTooltips();
+            //UI.addTooltips();
         });
     };
 
@@ -768,21 +768,19 @@ define([
                 content: $('<div>').append(UI.getIcon(p)).html() + Messages.type[p]
             });
         });
-        if (Config.displayCreationScreen) {
+        pads_options.push({
-            pads_options.push({
+            tag: 'a',
-                tag: 'a',
+            attributes: {
-                attributes: {
+                id: 'cp-app-toolbar-creation-advanced',
-                    id: 'cp-app-toolbar-creation-advanced',
+                href: origin
-                    href: origin
+            },
-                },
+            content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
-                content: '<span class="fa fa-plus-circle"></span> ' + Messages.creation_appMenuName
+        });
-            });
+        $(window).keydown(function (e) {
-            $(window).keydown(function (e) {
+            if (e.which === 69 && (e.ctrlKey || (navigator.platform === "MacIntel" && e.metaKey))) {
-                if (e.which === 69 && e.ctrlKey) {
+                Common.createNewPadModal();
-                    Common.createNewPadModal();
+            }
-                }
+        });
-            });
-        }
         var dropdownConfig = {
             text: '', // Button initial text
             options: pads_options, // Entries displayed in the menu

www/drive/app-drive.less

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

www/drive/inner.js

@@ -41,7 +41,8 @@ define([
 {
     var APP = window.APP = {
         editable: false,
-        mobile: function () { return $('body').width() <= 600; } // Menu and content area are not inline-block anymore for mobiles
+        mobile: function () { return $('body').width() <= 600; }, // Menu and content area are not inline-block anymore for mobiles
+        isMac: navigator.platform === "MacIntel"
     };
 
     var stringify = function (obj) {
@@ -548,6 +549,13 @@ define([
                 return;
             }
 
+            // Ctrl+A select all
+            if (e.which === 65 && (e.ctrlKey || (e.metaKey && APP.isMac))) {
+                $content.find('.cp-app-drive-element:not(.cp-app-drive-element-selected)')
+                    .addClass('cp-app-drive-element-selected');
+                return;
+            }
+
             // [Left, Up, Right, Down]
             if ([37, 38, 39, 40].indexOf(e.which) === -1) { return; }
             e.preventDefault();
@@ -2908,6 +2916,7 @@ define([
                 }
                 // else move to trash
                 moveElements(paths, [TRASH], false, refresh);
+                return;
             }
         });
         var isCharacterKey = function (e) {

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/pad/app-pad.less

@@ -13,7 +13,6 @@
     #cke_1_top {
         overflow: visible;
         padding: 0px;
-        display: flex;
     }
     .cke_toolbox_main {
         background-color: @colortheme_pad-toolbar-bg;
@@ -23,10 +22,7 @@
         }
     }
     .cke_wysiwyg_frame {
-        min-width: 60%;
+        width: 100%;
-    }
-    #cke_1_toolbox {
-        flex: 1;
     }
     #cke_editor1 {
         display: flex;

www/pad/inner.js

@@ -143,7 +143,7 @@ define([
 
         $(helpMenu.text).html(Messages.initialState);
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
 
     var mkDiffOptions = function (cursor, readOnly) {
@@ -437,6 +437,8 @@ define([
         }
 
         framework.onReady(function (newPad) {
+            editor.focus();
+
             if (!module.isMaximized) {
                 module.isMaximized = true;
                 $('iframe.cke_wysiwyg_frame').css('width', '');
@@ -444,7 +446,6 @@ define([
             }
             $('body').addClass('app-pad');
 
-            editor.focus();
             if (newPad) {
                 cursor.setToEnd();
             } else if (framework.isReadOnly()) {
@@ -474,9 +475,18 @@ define([
                     $iframe.find('html').addClass('cke_body_width');
                 }
             });
+            /*setTimeout(function () {
+                $('iframe.cke_wysiwyg_frame').focus();
+                editor.focus();
+                console.log(editor);
+                console.log(editor.focusManager);
+                $(window).trigger('resize');
+            });*/
         });
 
-        framework.onDefaultContentNeeded(function () { });
+        framework.onDefaultContentNeeded(function () {
+            inner.innerHTML = '<p></p>';
+        });
 
         var importMediaTags = function (dom, cb) {
             var $dom = $(dom);
@@ -616,9 +626,10 @@ define([
                 var backColor = AppConfig.appBackgroundColor;
                 var newCss = '.cke_body_width { background: '+ backColor +'; height: 100%; }' +
                     '.cke_body_width body {' +
-                        'max-width: 50em; padding: 10px 30px; margin: 0 auto; min-height: 100%;'+
+                        'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
-                        'box-sizing: border-box;'+
+                        'box-sizing: border-box; overflow: auto;'+
-                    '}';
+                    '}' +
+                    '.cke_body_width body > *:first-child { margin-top: 0; }';
                 Ckeditor.addCss(newCss);
                 Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
                 module.ckeditor = editor = Ckeditor.replace('editor1', {
@@ -640,6 +651,7 @@ define([
                 $contentContainer.prepend($toolbarContainer.find('.cke_toolbox_main'));
                 $mainContainer.prepend($toolbarContainer);
                 $contentContainer.find('.cke_toolbox_main').addClass('cke_reset_all');
+                $toolbarContainer.removeClass('cke_reset_all');
             }).nThen(waitFor());
 
         }).nThen(function (/*waitFor*/) {

www/poll/inner.js

@@ -820,6 +820,7 @@ define([
     var checkDeletedCells = function () {
         // faster than forEach?
         var c;
+        if (!APP.proxy || !APP.proxy.content) { return; }
         for (var k in APP.proxy.content.cells) {
             c = Render.getCoordinates(k);
             if (APP.proxy.content.colsOrder.indexOf(c[0]) === -1 ||
@@ -1064,7 +1065,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();
@@ -1200,7 +1201,7 @@ define([
 
         var helpMenu = common.createHelpMenu();
         $('#cp-app-poll-form').prepend(helpMenu.menu);
-        $rightside.append(helpMenu.button);
+        $drawer.append(helpMenu.button);
         var setHTML = function (e, html) {
             e.innerHTML = html;
             return e;
@@ -1213,9 +1214,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 +1233,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");
@@ -435,7 +437,7 @@ define([
 
         $(helpMenu.text).html(DiffMd.render(Messages.slideInitialState));
 
-        framework._.toolbar.$rightside.append(helpMenu.button);
+        framework._.toolbar.$drawer.append(helpMenu.button);
     };
 
     var activateLinks = function ($content, framework) {
@@ -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);
@@ -502,6 +504,8 @@ define([
         });
 
         framework.onReady(function (/*newPad*/) {
+            editor.focus();
+
             CodeMirror.setMode('markdown', function () { });
             Slide.onChange(function (o, n, l) {
                 var slideNumber = '';
@@ -552,14 +556,10 @@ define([
     };
 
     var getThumbnailContainer = function () {
-        var $codeMirror = $('.CodeMirror');
         var $c = $('#cp-app-slide-editor');
         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,10 +31,24 @@
         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;
     }
 
+    #cp-app-whiteboard-container {
+        flex: 1;
+        display: flex;
+        flex-flow: column;
+        overflow: auto;
+    }
+
     // created in the html
     #cp-app-whiteboard-canvas-area {
         flex: 1;
@@ -44,6 +58,8 @@
     .cp-app-whiteboard-canvas-container {
         margin: auto;
         background: white;
+        flex: 1;
+        min-height: 0;
         & > canvas {
             border: 1px solid black;
         }
@@ -64,7 +80,7 @@
         border-top: 1px solid black;
         background: white;
 
-        padding: 1em;
+        padding: 10px;
 
         & > * + * {
             margin: 0;
@@ -120,7 +136,7 @@
         display: flex;
         justify-content: space-between;
 
-        padding: 1em;
+        padding: 10px;
 
         span.cp-app-whiteboard-palette-color {
             height: 4vw;

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);
                 });
@@ -453,6 +454,14 @@ define([
             var $properties = common.createButton('properties', true);
             toolbar.$drawer.append($properties);
 
+            if (Messages.whiteboardHelp) {
+                var $appContainer = $('#cp-app-whiteboard-container');
+                var helpMenu = common.createHelpMenu();
+                $appContainer.prepend(helpMenu.menu);
+                $(helpMenu.text).html(Messages.whiteboardHelp);
+                toolbar.$drawer.append(helpMenu.button);
+            }
+
             if (!readOnly) {
                 makeColorButton($rightside);
 
@@ -469,12 +478,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 +503,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'],