Display selected color and button to turn off draw mode in canvas

customize.dist/translations/messages.fr.js

@@ -144,6 +144,11 @@ define(function () {
     out.poll_titleHint = "Titre";
     out.poll_descriptionHint = "Description";
 
+    // Canvas
+    out.canvas_clear = "Nettoyer";
+    out.canvas_disable = "Désactiver le dessin";
+    out.canvas_enable = "Activer le dessin";
+
     // File manager
 
     out.fm_rootName = "Documents";

customize.dist/translations/messages.js

@@ -146,6 +146,11 @@ define(function () {
     out.poll_titleHint = "Title";
     out.poll_descriptionHint = "Describe your poll, and use the 'publish' button when you're done. Anyone with the link can change the description, but this is discouraged.";
 
+    // Canvas
+    out.canvas_clear = "Clear";
+    out.canvas_disable = "Disable draw";
+    out.canvas_enable = "Enable draw";
+
     // File manager
 
     out.fm_rootName = "Documents";

www/whiteboard/index.html

@@ -34,17 +34,24 @@
             margin: auto;
             background: white;
         }
-        #clear {
+        #clear, #toggleDraw {
             display: inline;
+            vertical-align: middle;
         }
         #colors {
             z-index: 100;
             border: 3px solid black;
             padding: 5px;
             vertical-align: top;
+            background: white;
         }
         .selected {
-            margin-right: 20px;
+            margin-left: 20px;
+            display: inline-block;
+            height: 100px;
+        }
+        .selected img {
+            vertical-align: middle;
         }
         #copy {
             padding-left: 75px;
@@ -62,9 +69,12 @@
             position: relative;
             border: 3px solid black;
             background: white;
+            height: 100px;
+            line-height: 100px;
         }
         #width, #colors {
             position: relative;
+            vertical-align: middle;
         }
         #color-picker {
             display: block;
@@ -86,10 +96,12 @@
     </div>
 
     <div id="controls">
-        <button id="clear">Clear</button>
+        <button id="clear" data-localization="canvas_clear">Clear</button>
+        <button id="toggleDraw" data-localization="canvas_disable"></button>
         <input id="width" type="range" value="5" min="1" max="100"></input><label for="width">5</label>
-        <div id="colors"><div class="selected-container"><span class="selected"></span></div>&nbsp;</div>
+        <span class="selected"></span>
     </div>
+    <div id="colors">&nbsp;</div>
 
     <div id="loading">
         <div class="loadingContainer">

www/whiteboard/main.js

@@ -47,6 +47,7 @@ define([
         var $colors = $('#colors');
         var $cursors = $('#cursors');
 
+        var $toggle = $('#toggleDraw');
         var $width = $('#width');
         var $widthLabel = $('label[for="width"]');
 
@@ -82,6 +83,11 @@ define([
             //context.stroke();
 
             var img = ccanvas.toDataURL("image/png");
+            var $img = $('<img>', {
+                src: img,
+                title: 'Current brush'
+            });
+            $controls.find('.selected').html('').append($img);
             canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
         };
 
@@ -143,12 +149,20 @@ define([
             setColor(color);
         });
 
+        module.draw = true;
+        var toggleDrawMode = function () {
+            module.draw = !module.draw;
+            canvas.isDrawingMode = module.draw;
+            $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable);
+        };
+        $toggle.click(toggleDrawMode);
+
         var setEditable = function (bool) {
             if (readOnly && bool) { return; }
             if (bool) { $controls.show(); }
             else { $controls.hide(); }
 
-            canvas.isDrawingMode = bool;
+            canvas.isDrawingMode = bool ? module.draw : false;
             if (!bool) {
                 canvas.deactivateAll();
                 canvas.renderAll();