Improve whiteboard UI

8 years ago · 4ddf9b4e04
parent 89877baa69
commit 4ddf9b4e04
3 changed files with 56 additions and 24 deletions
--- 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'
--- 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>
--- 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();
+        }
+    });

    });
 });