Better UI for whiteboard controls

www/whiteboard/app-whiteboard.less

@@ -1,5 +1,6 @@
 @import (reference) '../../customize/src/less2/include/tools.less';
 @import (reference) "../../customize/src/less2/include/framework.less";
+@import (reference) "../../customize/src/less2/include/buttons.less";
 
 &.cp-app-whiteboard {
 
@@ -36,6 +37,7 @@
         flex: 1;
         display: flex;
         overflow: auto;
+        flex-flow: column;
     }
 
     // created in the html
@@ -74,6 +76,8 @@
 
         padding: 10px;
 
+        .buttons_main();
+
         & > * + * {
             margin: 0;
             margin-left: 1em;
@@ -82,10 +86,27 @@
         #cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
             .middle;
         }
-        #cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
+
+        #cp-app-whiteboard-clear {
             display: inline;
             vertical-align: middle;
         }
+        #cp-app-whiteboard-delete {
+            min-width: 40px;
+        }
+        .cp-whiteboard-type {
+            button {
+                min-width: 40px;
+                text-align: center;
+                &:not(:first-child) {
+                    margin-left: -1px;
+                }
+                &.btn-primary:hover {
+                    cursor: default;
+                }
+            }
+        }
+
         .cp-app-whiteboard-selected {
             display: flex;
             align-items: center;
@@ -96,27 +117,30 @@
             height: 100px;
         }
 
-        .cp-app-whiteboard-range-group {
+        .cp-whiteboard-brush {
             display: flex;
             flex-direction: column;
-            position: relative;
-
-            input[type="range"] {
-                background-color: inherit;
-            }
-
-            & > span {
-                cursor: default;
-                position: absolute;
-                top: 0;
-                right: 0;
-            }
-        }
-        .cp-app-whiteboard-range-group:first-of-type {
             margin-left: 2em;
-        }
-        .cp-app-whiteboard-range-group:last-of-type {
             margin-right: 1em;
+            .cp-app-whiteboard-range-group {
+                display: flex;
+                align-items: center;
+                position: relative;
+
+                label {
+                    margin-bottom: 0;
+                    margin-right: 5px;
+                }
+
+                input[type="range"] {
+                    background-color: inherit;
+                    margin-right: 5px;
+                }
+
+                & > span {
+                    cursor: default;
+                }
+            }
         }
     }
 
@@ -125,14 +149,9 @@
         .middle;
         z-index: 100;
         background: white;
-        justify-content: space-between;
         display: flex;
-        flex-shrink: 1;
         flex-wrap: wrap;
-        min-width: 0;
-        max-width: 300px;
-
-        padding: 10px;
+        max-width: 320px;
 
         span.cp-app-whiteboard-palette-color {
             height: 30px;

www/whiteboard/inner.js

@@ -50,7 +50,9 @@ define([
         var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
         var $opacity = $('#cp-app-whiteboard-opacity');
         var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]');
-        var $toggle = $('#cp-app-whiteboard-toggledraw');
+        var $type = $('.cp-whiteboard-type');
+        var $brush = $('.cp-whiteboard-type .brush');
+        var $move = $('.cp-whiteboard-type .move');
         var $deleteButton = $('#cp-app-whiteboard-delete');
 
         var metadataMgr = framework._.cpNfInner.metadataMgr;
@@ -97,7 +99,7 @@ define([
         var updateBrushWidth = function () {
             var val = $width.val();
             canvas.freeDrawingBrush.width = Number(val);
-            $widthLabel.text(Messages._getKey("canvas_widthLabel", [val]));
+            $widthLabel.text(Messages._getKey("canvas_widthLabel", ['']));
             $('#cp-app-whiteboard-width-val').text(val + 'px');
             createCursor();
         };
@@ -108,7 +110,7 @@ define([
             var val = $opacity.val();
             brush.opacity = Number(val);
             canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
-            $opacityLabel.text(Messages._getKey("canvas_opacityLabel", [val]));
+            $opacityLabel.text(Messages._getKey("canvas_opacityLabel", ['']));
             $('#cp-app-whiteboard-opacity-val').text((Number(val) * 100) + '%');
             createCursor();
         };
@@ -116,17 +118,27 @@ define([
         $opacity.on('change', updateBrushOpacity);
 
         APP.draw = true;
-        var toggleDrawMode = function () {
+        $brush.click(function () {
+            if (APP.draw) { return; }
             canvas.deactivateAll().renderAll();
-            APP.draw = !APP.draw;
+            APP.draw = true;
             canvas.isDrawingMode = APP.draw;
-            $toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
-            if (APP.draw) { $deleteButton.hide(); }
-            else { $deleteButton.show(); }
-        };
-        $toggle.click(toggleDrawMode);
+            $type.find('button').removeClass('btn-primary');
+            $brush.addClass('btn-primary');
+            $deleteButton.prop('disabled', 'disabled');
+        });
+        $move.click(function () {
+            if (!APP.draw) { return; }
+            canvas.deactivateAll().renderAll();
+            APP.draw = false;
+            canvas.isDrawingMode = APP.draw;
+            $type.find('button').removeClass('btn-primary');
+            $move.addClass('btn-primary');
+            $deleteButton.prop('disabled', '');
+        });
 
         var deleteSelection = function () {
+            if (APP.draw) { return; }
             if (canvas.getActiveObject()) {
                 canvas.getActiveObject().remove();
             }
@@ -211,6 +223,7 @@ define([
             if (first || Sortify(palette) !== Sortify(newPalette)) {
                 palette = newPalette;
                 $colors.html('<div class="hidden">&nbsp;</div>');
+                $colors.css('width', (palette.length * 20)+'px');
                 palette.forEach(addColorToPalette);
                 first = false;
             }
@@ -494,6 +507,9 @@ define([
         framework.start();
     };
 
+    Messages.canvas_brush = "Brush"; // XXX
+    Messages.canvas_select = "Select"; // XXX
+
     var initialContent = function () {
         return [
             h('div#cp-toolbar.cp-toolbar-container'),
@@ -509,34 +525,48 @@ define([
                 }
             }, [
                 h('button#cp-app-whiteboard-clear.btn.btn-danger', Messages.canvas_clear), ' ',
+                h('div.cp-whiteboard-type', [
+                    h('button.brush.fa.fa-paint-brush.btn-primary', {title: Messages.canvas_brush}),
+                    h('button.move.fa.fa-arrows', {title: Messages.canvas_select}),
+                ]),
+                h('button.fa.fa-trash#cp-app-whiteboard-delete', {
+                    disabled: 'disabled',
+                    title: Messages.canvas_delete
+                }),
+                /*
+                h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Messages.canvas_disable),
                 h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Messages.canvas_disable),
                 h('button#cp-app-whiteboard-delete.btn.btn-secondary', {
                     style: {
                         display: 'none',
                     }
-                }, Messages.canvas_delete),
-                h('div.cp-app-whiteboard-range-group', [
-                    h('label', {
-                        'for': 'cp-app-whiteboard-width'
-                    }, Messages.canvas_width),
-                    h('input#cp-app-whiteboard-width', {
-                        type: 'range',
-                        min: "1",
-                        max: "100"
-                    }),
-                    h('span#cp-app-whiteboard-width-val', '5px')
-                ]),
-                h('div.cp-app-whiteboard-range-group', [
-                    h('label', {
-                        'for': 'cp-app-whiteboard-opacity',
-                    }, Messages.canvas_opacity),
-                    h('input#cp-app-whiteboard-opacity', {
-                        type: 'range',
-                        min: "0.1",
-                        max: "1",
-                        step: "0.1"
-                    }),
-                    h('span#cp-app-whiteboard-opacity-val', '100%')
+                }, Messages.canvas_delete),*/
+                h('div.cp-whiteboard-brush', [
+                    h('div.cp-app-whiteboard-range-group', [
+                        h('label', {
+                            'for': 'cp-app-whiteboard-width'
+                        }, Messages.canvas_width),
+                        h('input#cp-app-whiteboard-width', {
+                            type: 'range',
+                            value: "20",
+                            min: "1",
+                            max: "100"
+                        }),
+                        h('span#cp-app-whiteboard-width-val', '5px')
+                    ]),
+                    h('div.cp-app-whiteboard-range-group', [
+                        h('label', {
+                            'for': 'cp-app-whiteboard-opacity',
+                        }, Messages.canvas_opacity),
+                        h('input#cp-app-whiteboard-opacity', {
+                            type: 'range',
+                            value: "1",
+                            min: "0.1",
+                            max: "1",
+                            step: "0.1"
+                        }),
+                        h('span#cp-app-whiteboard-opacity-val', '100%')
+                    ]),
                 ]),
                 h('div.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
                     h('img', {