improve whiteboard styles

customize.dist/pages.js

@@ -427,33 +427,43 @@ define([
                     display: 'block',
                 }
             }, [
-                h('button#clear', Msg.canvas_clear), ' ',
+                h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
-                h('button#toggleDraw', Msg.canvas_disable),
+                h('button#toggleDraw.btn.btn-default', Msg.canvas_disable),
-                h('button#delete', {
+                h('button#delete.btn.btn-default', {
                     style: {
                         display: 'none',
                     }
-                }),
+                }, Msg.canvas_delete),
-                h('input#width', {
+                h('div.range-group', [
-                    type: 'range',
+                    h('label', {
-                    value: "5",
+                        'for': 'width'
-                    min: "1",
+                    }, Msg.canvas_width),
-                    max: "100"
+                    h('input#width', {
-                }),
+                        type: 'range',
-                h('label', {
+                        value: "5",
-                    'for': 'width'
+                        min: "1",
-                }, Msg.canvas_width),
+                        max: "100"
-                h('input#opacity', {
+                    }),
-                    type: 'range',
+                    h('span#width-val', '5px')
-                    value: "1",
+                ]),
-                    min: "0.1",
+                h('div.range-group', [
-                    max: "1",
+                    h('label', {
-                    step: "0.1"
+                        'for': 'opacity',
-                }),
+                    }, Msg.canvas_opacity),
-                h('label', {
+                    h('input#opacity', {
-                    'for': 'width',
+                        type: 'range',
-                }),
+                        value: "1",
-                h('span.selected')
+                        min: "0.1",
+                        max: "1",
+                        step: "0.1"
+                    }),
+                    h('span#opacity-val', '100%')
+                ]),
+                h('span.selected', [
+                    h('img', {
+                        title: Msg.canvas_currentBrush
+                    })
+                ])
             ]),
             setHTML(h('div#colors'), ' '),
             loadingScreen(),

www/whiteboard/main.js

@@ -15,6 +15,7 @@ define([
     '/bower_components/file-saver/FileSaver.min.js',
 
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'less!/customize/src/less/cryptpad.less',
     'less!/whiteboard/whiteboard.less',
     'less!/customize/src/less/toolbar.less',
@@ -89,13 +90,8 @@ window.canvas = canvas;
             ctx.strokeStyle = '#000000';
             ctx.stroke();
 
-
             var img = ccanvas.toDataURL("image/png");
-            var $img = $('<img>', {
+            $controls.find('.selected > img').attr('src', img);
-                src: img,
-                title: Messages.canvas_currentBrush
-            });
-            $controls.find('.selected').html('').append($img);
             canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
         };
 
@@ -103,6 +99,7 @@ window.canvas = canvas;
             var val = $width.val();
             canvas.freeDrawingBrush.width = Number(val);
             $widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
+            $('#width-val').text(val + 'px');
             createCursor();
         };
         updateBrushWidth();
@@ -114,6 +111,7 @@ window.canvas = canvas;
             brush.opacity = Number(val);
             canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
             $opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
+            $('#opacity-val').text((Number(val) * 100) + '%');
             createCursor();
         };
         updateBrushOpacity();
@@ -188,7 +186,7 @@ window.canvas = canvas;
 
         var setEditable = function (bool) {
             if (readOnly && bool) { return; }
-            if (bool) { $controls.show(); }
+            if (bool) { $controls.css('display', 'flex'); }
             else { $controls.hide(); }
 
             canvas.isDrawingMode = bool ? module.draw : false;
@@ -199,7 +197,7 @@ window.canvas = canvas;
             canvas.forEachObject(function (object) {
                 object.selectable = bool;
             });
-            $canvasContainer.css('border-color', bool? 'black': 'red');
+            $canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
         };
 
         var saveImage = module.saveImage = function () {

www/whiteboard/whiteboard.less

@@ -27,20 +27,29 @@ body {
 }
 // created by fabricjs. styled so defaults don't break anything
 .canvas-container {
-    border: 1px solid black;
     margin: auto;
     background: white;
+    & > canvas {
+        border: 1px solid black;
+    }
 }
 
 // contains user tools
 #controls {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     position: relative;
     border-top: 1px solid black;
     background: white;
-    height: 100px;
+
-    line-height: 100px;
+    padding: 1em;
-    padding-bottom: 5px;
+
+    & > * + * {
+        margin: 0;
+        margin-left: 1em;
+    }
 
     #width, #opacity {
         .middle;
@@ -50,15 +59,36 @@ body {
         vertical-align: middle;
     }
     .selected {
-        margin-left: 20px;
+        display: flex;
-        display: inline-block;
+        align-items: center;
-        height: 135px;
+        justify-content: center;
-        width: 135px;
         z-index: 9001;
-        text-align: center;
+
-        img {
+        width: 100px;
-            vertical-align: middle;
+        height: 100px;
+    }
+
+    .range-group {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        input[type="range"] {
+            background-color: inherit;
         }
+
+        & > span {
+            cursor: default;
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+    .range-group:first-of-type {
+        margin-left: 2em;
+    }
+    .range-group:last-of-type {
+        margin-right: 1em;
     }
 }
 
@@ -70,13 +100,21 @@ body {
     display: flex;
     justify-content: space-between;
 
+    padding: 1em;
+
     span.palette-color {
         height: 4vw;
         width: 4vw;
-        display: inline-block;
+        display: block;
         margin: 5px;
         border: 1px solid black;
         vertical-align: top;
+        border-radius: 50%;
+        transition: transform 0.1s;
+
+        &:hover {
+            transform: scale(1.2);
+        }
     }
 }
 
@@ -87,6 +125,7 @@ body {
 
 // input[type=color] must exist in the dom to work correctly
 // styled so that they don't break layouts
+
 #pickers {
     visibility: hidden;
     position: absolute;
@@ -95,3 +134,11 @@ body {
     z-index: -5;
 }
 
+.btn.btn-default {
+    background-color: #BBB;
+    color: black;
+
+    &:hover {
+        background-color: #DDD;
+    }
+}