From 4ddf9b4e048ae1c2efdc4f83a772bcba3e1aed8d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Mon, 27 Mar 2017 18:12:11 +0200
Subject: [PATCH] Improve whiteboard UI

---
 www/slide/main.js         |  4 +++-
 www/whiteboard/index.html | 26 +++++++++++++-------
 www/whiteboard/main.js    | 50 +++++++++++++++++++++++++++------------
 3 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/www/slide/main.js b/www/slide/main.js
index 38c9354c0..45b80e1a9 100644
--- a/www/slide/main.js
+++ b/www/slide/main.js
@@ -569,7 +569,9 @@ define([
                     }, {ok: Messages.printButton});
                     //$('body').append(createPrintDialog());
                 });
-                $rightside.append($printButton);                var $slideOptions = $('<button>', {
+                $rightside.append($printButton);
+
+                var $slideOptions = $('<button>', {
                     title: Messages.slideOptionsTitle,
                     'class': 'rightside-button fa fa-cog',
                     style: 'font-size: 17px'
diff --git a/www/whiteboard/index.html b/www/whiteboard/index.html
index 6c0a8c9e8..96205efc1 100644
--- a/www/whiteboard/index.html
+++ b/www/whiteboard/index.html
@@ -1,16 +1,20 @@
 <!DOCTYPE html>
-<html>
+<html class="cp">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+    <link rel="icon" type="image/png"
+        href="/customize/main-favicon.png"
+        data-main-favicon="/customize/main-favicon.png"
+        data-alt-favicon="/customize/alt-favicon.png"
+        id="favicon" />
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="/customize/main.css" />
     <style>
         html, body{
             padding: 0px;
             margin: 0px;
-            overflow: hidden;
             box-sizing: border-box;
         }
         body {
@@ -32,8 +36,9 @@
             /* disallow textarea resizes */
             resize: none;
         }
-        canvas {
+        .canvas-container {
             border: 5px solid black;
+            margin: auto;
         }
         #clear {
             display: inline;
@@ -66,20 +71,25 @@
 <body>
     <div id="toolbar" class="toolbar-container"></div>
 
+    <div id="canvas-area">
     <canvas id="canvas" width="600" height="600" ></canvas>
-
-    <div id="copy">
-        <h2>Welcome to CryptCanvas!</h2>
-        <h3>Zero Knowledge Realtime Collaborative Canvas Editing</h3>
     </div>
 
     <div id="controls">
         <button id="clear">Clear</button>
-        <button id="save">Save</button>
         <input id="width" type="number" value="5"></input>
         <div id="colors">&nbsp;</div>
     </div>
 
+    <div id="loading">
+        <div class="loadingContainer">
+            <img class="cryptofist" src="/customize/cryptofist_small.png" />
+            <div class="spinnerContainer">
+                <span class="fa fa-spinner fa-pulse fa-4x fa-fw"></span>
+            </div>
+            <p data-localization="loading"></p>
+        </div>
+    </div>
 
 </body>
 </html>
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js
index 01834c1c2..e4aea11d2 100644
--- a/www/whiteboard/main.js
+++ b/www/whiteboard/main.js
@@ -24,6 +24,9 @@ define([
 
     $(function () {
     Cryptpad.addLoadingScreen();
+    var onConnectError = function (info) {
+        Cryptpad.errorLoadingScreen(Messages.websocketError);
+    };
     var toolbar;
 
     var secret = Cryptpad.getSecrets();
@@ -36,6 +39,8 @@ define([
         /* Initialize Fabric */
         var canvas = module.canvas = new Fabric.Canvas('canvas');
         var $canvas = $('canvas');
+        var $controls = $('#controls');
+        var $canvasContainer = $('canvas').parents('.canvas-container');
 
         var $width = $('#width');
         var updateBrushWidth = function () {
@@ -61,6 +66,9 @@ define([
 
         var setEditable = function (bool) {
             if (readOnly && bool) { return; }
+            if (bool) { $controls.show(); }
+            else { $controls.hide(); }
+
             canvas.isDrawingMode = bool;
             if (!bool) {
                 canvas.deactivateAll();
@@ -69,7 +77,7 @@ define([
             canvas.forEachObject(function (object) {
                 object.selectable = bool;
             });
-            $canvas.css('border-color', bool? 'black': 'red');
+            $canvasContainer.css('border-color', bool? 'black': 'red');
         };
 
         var saveImage = module.saveImage = function () {
@@ -115,6 +123,20 @@ define([
           myUserName = myID;
         };
 
+        var suggestName = function (fallback) {
+            if (document.title === defaultName) {
+                return fallback || "";
+            } else {
+                return document.title || defaultName;
+            }
+        };
+
+        var renameCb = function (err, title) {
+            if (err) { return; }
+            document.title = title;
+            module.onLocal();
+        };
+
         var config = module.config = {
             initialState: '{}',
             websocketURL: Cryptpad.getWebsocketURL(),
@@ -148,6 +170,11 @@ define([
             if (readOnly) {delete config.changeNameID; }
             toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, userList, config);
 
+            var $rightside = $bar.find('.' + Toolbar.constants.rightside);
+
+            var $export = Cryptpad.createButton('export', true, {}, saveImage);
+            $rightside.append($export);
+
             var editHash;
             var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
 
@@ -168,20 +195,6 @@ define([
             };
         };
 
-        var suggestName = function (fallback) {
-            if (document.title === defaultName) {
-                return fallback || "";
-            } else {
-                return document.title || defaultName;
-            }
-        };
-
-        var renameCb = function (err, title) {
-            if (err) { return; }
-            document.title = title;
-            onLocal();
-        };
-
         var updateTitle = function (newTitle) {
             if (newTitle === document.title) { return; }
             // Change the title now, and set it back to the old value if there is an error
@@ -242,6 +255,7 @@ define([
 
             if (readOnly) { setEditable(false); }
         });
+        setEditable(false);
 
         var stringifyInner = function (textValue) {
             var obj = {
@@ -296,6 +310,7 @@ define([
                 realtime: realtime
             });
 
+            Cryptpad.removeLoadingScreen();
             setEditable(true);
             initializing = false;
             onRemote();
@@ -347,6 +362,11 @@ define([
     Cryptpad.ready(function (err, env) {
         andThen();
     });
+    Cryptpad.onError(function (info) {
+        if (info) {
+            onConnectError();
+        }
+    });
 
     });
 });
