From e6ce5a55e5258e1da65c94d8b2fe136e7066500b Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 13 May 2020 14:42:22 +0200
Subject: [PATCH] Add missing button for all the apps

---
 customize.dist/src/less2/include/toolbar.less | 46 +++++---------
 www/code/inner.js                             | 61 ++++++++++++++++---
 www/code/markers.js                           |  7 +--
 www/common/common-ui-elements.js              | 17 +++---
 www/common/onlyoffice/inner.js                | 14 ++---
 www/common/toolbar.js                         |  5 +-
 www/pad/inner.js                              | 13 +++-
 www/poll/inner.js                             | 28 +++++----
 www/slide/inner.js                            |  4 +-
 www/whiteboard/app-whiteboard.less            |  8 +--
 www/whiteboard/inner.js                       | 46 +++-----------
 11 files changed, 126 insertions(+), 123 deletions(-)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 5cd9f64fa..8eee90a41 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -17,13 +17,11 @@
     @warn-color: @colortheme_default-warn // color of the warning text in the toolbar
 ) {
     @toolbar-color: @color;
-    //@toolbar-color: @bg-color;
     @toolbar-color-l20: lighten(@color, 20%);
     @toolbar-color-d20: darken(@color, 20%);
     @toolbar-color-d15: darken(@color, 15%);
 
     @toolbar-bg-color: @bg-color;
-    //@toolbar-bg-color: #FFFFFF;
     @toolbar-bg-color-l8: lighten(@bg-color, 8%);
     @toolbar-bg-color-l20: lighten(@bg-color, 20%);
     @toolbar-bg-color-d5: darken(@bg-color, 5%);
@@ -731,6 +729,8 @@ color: var(--toolbar-bg-color);
                 font-size: 25px;
                 font-style: italic;
                 white-space: nowrap;
+                display: inline-flex;
+                align-items: center;
             }
             .cp-toolbar-title-hoverable {
                 display: inline-flex;
@@ -1056,9 +1056,20 @@ color: var(--toolbar-bg-color);
                     }
                 }
             }
+            .cp-toolbar-file {
+                order: 1;
+            }
+            .cp-toolbar-appmenu {
+                order: 3;
+            }
+            .cp-toolbar-mediatag {
+                order: 5;
+            }
+            .cp-toolbar-tools {
+                order: 7;
+            }
             .cp-toolbar-file {
                 button {
-                    order: 50;
                     &.fa-plus { order: 0; }
                     &.fa-history { order: 5; }
                     &.fa-hashtag { order: 10; }
@@ -1070,9 +1081,6 @@ color: var(--toolbar-bg-color);
                     &.fa-trash { order: 40; }
                     &.fa-info-circle { order: 100; }
 
-                    &.fa-arrows-h { order: 5; }
-                    &.fa-cog { order: 5; }
-                    &.fa-paint-brush { order: 5; }
                     &.cp-toolbar-icon-help { order: 150; }
                 }
             }
@@ -1125,36 +1133,10 @@ color: var(--toolbar-bg-color);
                         display: inline;
                         vertical-align: baseline;
                     }
-                    &.fa-info-circle, &.fa-history, &.fa-cog {
-                        .cp-toolbar-drawer-element {
-                            margin-left: 11px;
-                        }
-                    }
-                    &.fa-unlock-alt {
-                        .cp-toolbar-drawer-element {
-                            margin-left: 15px;
-                        }
-                    }
-                    &.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-clone { order: 1; }
-                    &.fa-download { order: 2; }
-                    &.fa-upload { order: 3; }
-                    &.fa-print { order: 4; }
-                    &.fa-arrows-h { order: 5; }
-                    &.fa-cog { order: 5; }
-                    &.fa-paint-brush { order: 5; }
-                    &.fa-info-circle { order: 6; }
-                    &.fa-help { order: 7; }
                 }
             }
         }
diff --git a/www/code/inner.js b/www/code/inner.js
index 3ffb2baef..53ebf08ef 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -77,6 +77,51 @@ define([
         'xml',
     ]);
 
+    var mkThemeButton = function (framework) {
+        Messages.toolbar_theme = "Theme"; // XXX (duplicate from slide/inner.js)
+        var $theme = $(h('button.cp-toolbar-appmenu', [
+            h('i.cptools.cptools-palette'),
+            h('span.cp-button-name', Messages.toolbar_theme)
+        ]));
+        var $content = $(h('div.cp-toolbar-drawer-content', {
+            tabindex: 1
+        })).hide();
+        $theme.click(function () {
+            $content.toggle();
+            $theme.removeClass('cp-toolbar-button-active');
+            if ($content.is(':visible')) {
+                $theme.addClass('cp-toolbar-button-active');
+                $content.focus();
+                var wh = $(window).height();
+                var topPos = $theme[0].getBoundingClientRect().bottom;
+                $content.css('max-height', Math.floor(wh - topPos - 1)+'px');
+            }
+        });
+        var onBlur = function (e) {
+            if (e.relatedTarget) {
+                if ($(e.relatedTarget).is('.cp-toolbar-drawer-button')) { return; }
+                if ($(e.relatedTarget).parents('.cp-toolbar-drawer-content').length) {
+                    $(e.relatedTarget).blur(onBlur);
+                    return;
+                }
+            }
+            $theme.removeClass('cp-toolbar-button-active');
+            $content.hide();
+        };
+        $content.blur(onBlur).appendTo($theme);
+        framework._.toolbar.$theme = $content;
+        framework._.toolbar.$bottomL.append($theme);
+    };
+
+    var mkCbaButton = function (framework, markers) {
+        var $showAuthorColorsButton = framework._.sfCommon.createButton('', true, {
+            text: Messages.cba_hide,
+            name: 'authormarks',
+            icon: 'fa-paint-brush',
+        }).hide();
+        framework._.toolbar.$theme.append($showAuthorColorsButton); // XXX
+        markers.setButton($showAuthorColorsButton);
+    };
     var mkPrintButton = function (framework, $content, $print) {
         var $printButton = framework._.sfCommon.createButton('print', true);
         $printButton.click(function () {
@@ -92,7 +137,7 @@ define([
         var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor);
         $codeMirrorContainer.prepend(markdownTb.toolbar);
 
-        framework._.toolbar.$rightside.append(markdownTb.button);
+        framework._.toolbar.$bottomL.append(markdownTb.button);
 
         var modeChange = function (mode) {
             if (['markdown', 'gfm'].indexOf(mode) !== -1) { return void markdownTb.setState(true); }
@@ -168,7 +213,7 @@ define([
             }
         });
 
-        framework._.toolbar.$rightside.append($previewButton);
+        framework._.toolbar.$bottomM.append($previewButton);
 
         $preview.click(function (e) {
             if (!e.target) { return; }
@@ -325,7 +370,7 @@ define([
             setButton(!markers.getState());
             UI.alert(content);
         });
-        framework._.toolbar.$drawer.append($cbaButton);
+        framework._.toolbar.$theme.append($cbaButton);
     };
 
     var mkFilePicker = function (framework, editor, evModeChange) {
@@ -356,6 +401,8 @@ define([
         var previewPane = mkPreviewPane(editor, CodeMirror, framework, isPresentMode);
         var markdownTb = mkMarkdownTb(editor, framework);
 
+        mkThemeButton(framework);
+
         var markers = Markers.create({
             common: common,
             framework: framework,
@@ -363,17 +410,13 @@ define([
             devMode: privateData.devMode,
             editor: editor
         });
-
-        var $showAuthorColorsButton = framework._.sfCommon.createButton('', true, {
-            icon: 'fa-paint-brush',
-        }).hide();
-        framework._.toolbar.$rightside.append($showAuthorColorsButton);
-        markers.setButton($showAuthorColorsButton);
+        mkCbaButton(framework, markers);
 
         var $print = $('#cp-app-code-print');
         var $content = $('#cp-app-code-preview-content');
         mkPrintButton(framework, $content, $print);
 
+
         mkHelpMenu(framework);
 
         var evModeChange = Util.mkEvent();
diff --git a/www/code/markers.js b/www/code/markers.js
index bf3f00f82..fb67736a6 100644
--- a/www/code/markers.js
+++ b/www/code/markers.js
@@ -604,16 +604,13 @@ define([
 
     var setButton = function (Env, $button) {
         var toggle = function () {
-            var tippy = $button[0] && $button[0]._tippy;
             if (Env.opacity) {
                 Env.opacity = 0;
-                if (tippy) { tippy.title = Messages.cba_show; }
-                else { $button.attr('title', Messages.cba_show); }
+                $button.find('.cp-toolbar-drawer-element').text(Messages.cba_show);
                 $button.removeClass("cp-toolbar-button-active");
             } else {
                 Env.opacity = MARK_OPACITY;
-                if (tippy) { tippy.title = Messages.cba_hide; }
-                else { $button.attr('title', Messages.cba_hide); }
+                $button.find('.cp-toolbar-drawer-element').text(Messages.cba_hide);
                 $button.addClass("cp-toolbar-button-active");
             }
         };
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 17e90857c..ef6bfc67e 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1556,7 +1556,7 @@ define([
                 break;
             case 'mediatag':
                 Messages.toolbar_insert = "Insert"; // XXX
-                button = $(h('button', {
+                button = $(h('button.cp-toolbar-mediatag', {
                     title: Messages.filePickerButton, // XXX remove tippy?
                 }, [
                     h('i.fa.fa-picture-o'),
@@ -1564,11 +1564,13 @@ define([
                 ])).click(common.prepareFeedback(type));
                 break;
             case 'savetodrive':
-                button = $('<button>', {
-                    'class': 'fa fa-cloud-upload cp-toolbar-icon-savetodrive',
+                Messages.toolbar_savetodrive = "Save as image"; // XXX
+                button = $(h('button.cp-toolbar-savetodrive', {
                     title: Messages.canvas_saveToDrive,
-                })
-                .click(common.prepareFeedback(type));
+                }, [
+                    h('i.fa.fa-file-image-o'),
+                    h('span.cp-toolbar-name.cp-toolbar-drawer-element', Messages.toolbar_savetodrive)
+                ])).click(common.prepareFeedback(type));
                 break;
             case 'hashtag':
                 button = $('<button>', {
@@ -1587,7 +1589,7 @@ define([
                 break;
             case 'toggle':
                 Messages.toolbar_tools = "Tools"; // XXX
-                button = $(h('button', {
+                button = $(h('button.cp-toolbar-tools', {
                     title: data.title || '', // XXX remove tippy?
                 }, [
                     h('i.fa.fa-wrench'),
@@ -1656,12 +1658,13 @@ define([
                 break;
             default:
                 data = data || {};
+                var drawerCls = data.drawer === false ? '' : '.cp-toolbar-drawer-element';
                 var icon = data.icon || "fa-question";
                 button = $(h('button', {
                     title: data.title || '', // XXX remove tippy?
                 }, [
                     h('i.fa.' + icon),
-                    h('span.cp-toolbar-name.cp-toolbar-drawer-element', data.text)
+                    h('span.cp-toolbar-name'+drawerCls, data.text)
                 ])).click(common.prepareFeedback(data.name || 'DEFAULT'));
                 if (callback) {
                     button.click(callback);
diff --git a/www/common/onlyoffice/inner.js b/www/common/onlyoffice/inner.js
index 777d696db..3a182ba7f 100644
--- a/www/common/onlyoffice/inner.js
+++ b/www/common/onlyoffice/inner.js
@@ -1574,13 +1574,11 @@ define([
             toolbar = APP.toolbar = Toolbar.create(configTb);
             Title.setToolbar(toolbar);
 
-            var $rightside = toolbar.$rightside;
-
             if (window.CP_DEV_MODE) {
                 var $save = common.createButton('save', true, {}, function () {
                     makeCheckpoint(true);
                 });
-                $save.appendTo($rightside);
+                $save.appendTo(toolbar.$bottomM);
             }
             if (window.CP_DEV_MODE || DISPLAY_RESTORE_BUTTON) {
                 common.createButton('', true, {
@@ -1590,11 +1588,11 @@ define([
                 }).click(function () {
                     if (initializing) { return void console.error('initializing'); }
                     restoreLastCp();
-                }).attr('title', 'Restore last checkpoint').appendTo($rightside);
+                }).attr('title', 'Restore last checkpoint').appendTo(toolbar.$bottomM);
             }
 
             var $exportXLSX = common.createButton('export', true, {}, exportXLSXFile);
-            $exportXLSX.appendTo($rightside);
+            $exportXLSX.appendTo(toolbar.$drawer);
 
             var type = common.getMetadataMgr().getPrivateData().ooType;
             var accept = [".bin", ".ods", ".xlsx"];
@@ -1610,17 +1608,17 @@ define([
                 accept: accept,
                 binary : ["ods", "xlsx", "odt", "docx", "odp", "pptx"]
             }, importXLSXFile);
-            $importXLSX.appendTo($rightside);
+            $importXLSX.appendTo(toolbar.$drawer);
 
             if (common.isLoggedIn()) {
-                common.createButton('hashtag', true).appendTo($rightside);
+                common.createButton('hashtag', true).appendTo(toolbar.$drawer);
             }
 
             var $forget = common.createButton('forget', true, {}, function (err) {
                 if (err) { return; }
                 setEditable(false);
             });
-            $rightside.append($forget);
+            toolbar.$drawer.append($forget);
 
             var helpMenu = APP.helpMenu = common.createHelpMenu(['beta', 'oo']);
             $('#cp-app-oo-editor').prepend(common.getBurnAfterReadingWarning());
diff --git a/www/common/toolbar.js b/www/common/toolbar.js
index c9a6785ee..00c24bfae 100644
--- a/www/common/toolbar.js
+++ b/www/common/toolbar.js
@@ -108,7 +108,6 @@ MessengerUI, Messages) {
                     $drawerContent.focus();
                     var wh = $(window).height();
                     var topPos = $drawer[0].getBoundingClientRect().bottom;
-                    console.error(wh, topPos);
                     $drawerContent.css('max-height', Math.floor(wh - topPos - 1)+'px');
                 }
             });
@@ -675,7 +674,7 @@ MessengerUI, Messages) {
             'title': Messages.saveTitle
         }).hide();
         if (config.readOnly === 1) {
-            $titleContainer.append($('<span>', {'class': 'cp-toolbar-title-readonly'})
+            $hoverable.append($('<span>', {'class': 'cp-toolbar-title-readonly'})
                 .text('('+Messages.readonly+')'));
             return $titleContainer;
         }
@@ -905,6 +904,7 @@ MessengerUI, Messages) {
         };
     };
     var createSpinner = function (toolbar, config) {
+        if (config.readOnly === 1) { return; }
         var $spin = $('<span>', {'class': SPINNER_CLS}).appendTo(toolbar.title);
         $spin.text(Messages.synchronizing);
 
@@ -1341,6 +1341,7 @@ MessengerUI, Messages) {
 
         // If we had to create a new chainpad instance, reset the one used in the toolbar
         toolbar.resetChainpad = function (chainpad) {
+            if (config.readOnly === 1) { return; }
             if (config.realtime !== chainpad) {
                 config.realtime = chainpad;
                 config.realtime.onPatch(ks(toolbar, config));
diff --git a/www/pad/inner.js b/www/pad/inner.js
index b3e4708d4..c5bf1a04a 100644
--- a/www/pad/inner.js
+++ b/www/pad/inner.js
@@ -400,10 +400,19 @@ define([
             framework._.sfCommon.setAttribute(['pad', 'showToolbar'], visible);
         };
         framework._.sfCommon.getAttribute(['pad', 'showToolbar'], function(err, data) {
+            var state = false;
             if (($(window).height() >= 800 || $(window).width() >= 800) &&
-                (typeof(data) === "undefined" || data)) { $('.cke_toolbox_main').show(); } else { $('.cke_toolbox_main').hide(); }
+                (typeof(data) === "undefined" || data)) {
+                state = true;
+                $('.cke_toolbox_main').show();
+            } else {
+                $('.cke_toolbox_main').hide();
+            }
             var $collapse = framework._.sfCommon.createButton('toggle', true, cfg, onClick);
-            framework._.toolbar.$rightside.append($collapse);
+            framework._.toolbar.$bottomL.append($collapse);
+            if (state) {
+                $collapse.addClass('cp-toolbar-button-active');
+            }
         });
     };
 
diff --git a/www/poll/inner.js b/www/poll/inner.js
index 623fc9afe..04287a197 100644
--- a/www/poll/inner.js
+++ b/www/poll/inner.js
@@ -563,13 +563,13 @@ define([
     var updatePublishButton = function () {
         if (!APP.ready || !APP.proxy || !APP.$publishButton) { return; }
         var p = APP.proxy.published;
-        var msg = (p ? Messages.poll_admin_button : Messages.poll_publish_button);
-        APP.$publishButton.attr('title', msg);
+        var msg = (p ? Messages.poll_edit : Messages.poll_publish_button);
+        APP.$publishButton.find('.cp-toolbar-name').text(msg);
         if (p) {
-            APP.$publishButton.removeClass('fa-check').addClass('fa-pencil');
+            APP.$publishButton.find('i').removeClass('fa-check').addClass('fa-pencil');
             return;
         }
-        APP.$publishButton.addClass('fa-check').removeClass('fa-pencil');
+        APP.$publishButton.find('i').addClass('fa-check').removeClass('fa-pencil');
     };
     var publish = APP.publish = function (bool) {
         if (!APP.readOnly) {
@@ -938,7 +938,7 @@ define([
 
         var markdownTb = APP.markdownTb = common.createMarkdownToolbar(APP.editor);
         $('.CodeMirror').parent().prepend(markdownTb.toolbar);
-        APP.toolbar.$rightside.append(markdownTb.button);
+        APP.toolbar.$bottomL.append(markdownTb.button);
 
         // Initialize author name for comments.
         // Disable name modification for logged in users
@@ -1138,7 +1138,6 @@ define([
 
         Title.setToolbar(APP.toolbar);
 
-        var $rightside = APP.toolbar.$rightside;
         var $drawer = APP.toolbar.$drawer;
 
         metadataMgr.onChange(function () {
@@ -1156,19 +1155,19 @@ define([
             setEditable(false);
         };
         var $forgetPad = common.createButton('forget', true, {}, forgetCb);
-        $rightside.append($forgetPad);
+        $drawer.append($forgetPad);
 
         var $properties = common.createButton('properties', true);
         $drawer.append($properties);
 
         /* save as template */
-        if (!metadataMgr.getPrivateData().isTemplate) {
+        if (!metadataMgr.getPrivateData().isTemplate && common.isLoggedIn()) {
             var templateObj = {
                 rt: info.realtime,
                 getTitle: function () { return metadataMgr.getMetadata().title; }
             };
             var $templateButton = common.createButton('template', true, templateObj);
-            $rightside.append($templateButton);
+            $drawer.append($templateButton);
         }
 
         var $copy = common.createButton('copy', true);
@@ -1186,9 +1185,11 @@ define([
         if (APP.readOnly) { publish(true); return; }
         var $publish = common.createButton('', true, {
             name: 'publish',
+            text: Messages.poll_publish_button,
             icon: 'fa-check',
+            drawer: false,
             hiddenReadOnly: true
-        }).click(function () { publish(!APP.proxy.published); }).appendTo($rightside);
+        }).click(function () { publish(!APP.proxy.published); }).appendTo(APP.toolbar.$bottomM);
         APP.$publishButton = $publish;
         updatePublishButton();
 
@@ -1205,10 +1206,13 @@ define([
                         return;
                     }
                 });
-            }).appendTo($rightside);
+            }).appendTo(APP.toolbar.$bottomL);
+
+            var $importTemplateButton = common.createButton('importtemplate', true);
+            $drawer.append($importTemplateButton);
 
             var $tags = common.createButton('hashtag', true);
-            $rightside.append($tags);
+            $drawer.append($tags);
         }
     };
 
diff --git a/www/slide/inner.js b/www/slide/inner.js
index adce8e2b3..e70503325 100644
--- a/www/slide/inner.js
+++ b/www/slide/inner.js
@@ -101,7 +101,7 @@ define([
     };
 
     var mkThemeButton = function (framework) {
-        Messages.toolbar_theme = "Theme";
+        Messages.toolbar_theme = "Theme"; // XXX
         var $theme = $(h('button.cp-toolbar-appmenu', [
             h('i.cptools.cptools-palette'),
             h('span.cp-button-name', Messages.toolbar_theme)
@@ -491,13 +491,13 @@ define([
 
         activateLinks($content, framework);
         Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
+        mkMarkdownToolbar(framework, editor);
         mkThemeButton(framework);
         mkPrintButton(framework, editor, $content, $print);
         mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
         mkColorConfiguration(framework, $modal);
         mkFilePicker(framework, editor);
         mkSlidePreviewPane(framework, $contentContainer);
-        mkMarkdownToolbar(framework, editor);
         mkHelpMenu(framework);
 
         CodeMirror.mkIndentSettings(framework._.cpNfInner.metadataMgr);
diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
index 210da403b..0fe594dda 100644
--- a/www/whiteboard/app-whiteboard.less
+++ b/www/whiteboard/app-whiteboard.less
@@ -22,11 +22,9 @@
         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-toolbar-file {
+        .cp-toolbar-savetodrive { order: 31; }
+        .cp-toolbar-icon-embedImage { order: 21; }
     }
 
     #cp-app-whiteboard-media-hidden {
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
index 0af0b8ee1..d4c9bf458 100644
--- a/www/whiteboard/inner.js
+++ b/www/whiteboard/inner.js
@@ -175,9 +175,6 @@ define([
             c = Colors.rgb2hex(c);
             brush.color = c;
             canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            APP.$color.css({
-                'color': c,
-            });
             createCursor();
         };
 
@@ -236,35 +233,6 @@ define([
             APP.onLocal();
         };
 
-        var makeColorButton = function ($container) {
-            var $testColor = $('<input>', { type: 'color', value: '!' });
-
-            // if colors aren't supported, bail out
-            if ($testColor.attr('type') !== 'color' ||
-                $testColor.val() === '!') {
-                console.log("Colors aren't supported. Aborting");
-                return;
-            }
-
-            var $color = APP.$color = framework._.sfCommon.createButton(null, true, {
-                icon: 'fa-square',
-                title: Messages.canvas_chooseColor,
-                name: 'color',
-                id: 'cp-app-whiteboard-color-picker'
-            });
-            $color.on('click', function () {
-                pickColor($color.css('background-color'), function (color) {
-                    setColor(color);
-                });
-            });
-
-            setColor('#000');
-
-            $container.append($color);
-
-            return $color;
-        };
-
         updateLocalPalette(palette);
 
         metadataMgr.onChange(function () {
@@ -276,7 +244,6 @@ define([
 
         return {
             palette: palette,
-            makeColorButton: makeColorButton,
             updateLocalPalette: updateLocalPalette,
         };
     };
@@ -351,7 +318,7 @@ define([
         // Whiteboard custom buttons
         // ---------------------------------------------
 
-        var $rightside = framework._.toolbar.$rightside;
+        var $drawer = framework._.toolbar.$drawer;
 
         APP.FM = framework._.sfCommon.createFileManager({});
         APP.upload = function (title) {
@@ -400,13 +367,16 @@ define([
             };
             reader.readAsDataURL(file);
         };
+
+        Messages.canvas_insertImage = "Insert local image"; // XXX
         framework._.sfCommon.createButton('', true, {
             title: Messages.canvas_imageEmbed,
-            icon: 'fa-file-image-o',
+            text: Messages.canvas_insertImage,
+            icon: 'fa-upload',
             name: 'embedImage'
         }).click(function () {
             $('<input>', {type:'file'}).on('change', onUpload).click();
-        }).appendTo($rightside);
+        }).appendTo($drawer);
 
         if (framework._.sfCommon.isLoggedIn()) {
             framework.setMediaTagEmbedder(function ($mt) {
@@ -429,13 +399,11 @@ define([
                     if (name === null || !name.trim()) { return; }
                     APP.upload(name);
                 });
-            }).appendTo($rightside);
+            }).appendTo($drawer);
         }
 
         if (framework.isReadOnly()) {
             setEditable(false);
-        } else {
-            controls.makeColorButton($rightside);
         }
 
         $('#cp-app-whiteboard-clear').on('click', function () {