web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve whiteboard UI

Browse Source
This commit is contained in:
yflory 2017-03-27 18:12:11 +02:00
parent 89877baa69
commit 4ddf9b4e04
3 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
www/slide/main.js
View File

@ -569,7 +569,9 @@ define([
}, {ok: Messages.printButton}); }, {ok: Messages.printButton});
//$('body').append(createPrintDialog()); //$('body').append(createPrintDialog());
}); });
$rightside.append($printButton); var $slideOptions = $('<button>', { $rightside.append($printButton);
var $slideOptions = $('<button>', {
title: Messages.slideOptionsTitle, title: Messages.slideOptionsTitle,
'class': 'rightside-button fa fa-cog', 'class': 'rightside-button fa fa-cog',
style: 'font-size: 17px' style: 'font-size: 17px'

26
www/whiteboard/index.html
View File

@ -1,16 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html class="cp">
<head> <head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/> <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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> <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="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/customize/main.css" /> <link rel="stylesheet" href="/customize/main.css" />
<style> <style>
html, body{ html, body{
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
@ -32,8 +36,9 @@
/* disallow textarea resizes */ /* disallow textarea resizes */
resize: none; resize: none;
} }
canvas { .canvas-container {
border: 5px solid black; border: 5px solid black;
margin: auto;
} }
#clear { #clear {
display: inline; display: inline;
@ -66,20 +71,25 @@
<body> <body>
<div id="toolbar" class="toolbar-container"></div> <div id="toolbar" class="toolbar-container"></div>
<div id="canvas-area">
<canvas id="canvas" width="600" height="600" ></canvas> <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>
<div id="controls"> <div id="controls">
<button id="clear">Clear</button> <button id="clear">Clear</button>
<button id="save">Save</button>
<input id="width" type="number" value="5"></input> <input id="width" type="number" value="5"></input>
<div id="colors">&nbsp;</div> <div id="colors">&nbsp;</div>
</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> </body>
</html> </html>

50
www/whiteboard/main.js
View File

@ -24,6 +24,9 @@ define([
$(function () { $(function () {
Cryptpad.addLoadingScreen(); Cryptpad.addLoadingScreen();
var onConnectError = function (info) {
Cryptpad.errorLoadingScreen(Messages.websocketError);
};
var toolbar; var toolbar;
var secret = Cryptpad.getSecrets(); var secret = Cryptpad.getSecrets();
@ -36,6 +39,8 @@ define([
/* Initialize Fabric */ /* Initialize Fabric */
var canvas = module.canvas = new Fabric.Canvas('canvas'); var canvas = module.canvas = new Fabric.Canvas('canvas');
var $canvas = $('canvas'); var $canvas = $('canvas');
var $controls = $('#controls');
var $canvasContainer = $('canvas').parents('.canvas-container');
var $width = $('#width'); var $width = $('#width');
var updateBrushWidth = function () { var updateBrushWidth = function () {
@ -61,6 +66,9 @@ define([
var setEditable = function (bool) { var setEditable = function (bool) {
if (readOnly && bool) { return; } if (readOnly && bool) { return; }
if (bool) { $controls.show(); }
else { $controls.hide(); }
canvas.isDrawingMode = bool; canvas.isDrawingMode = bool;
if (!bool) { if (!bool) {
canvas.deactivateAll(); canvas.deactivateAll();
@ -69,7 +77,7 @@ define([
canvas.forEachObject(function (object) { canvas.forEachObject(function (object) {
object.selectable = bool; object.selectable = bool;
}); });
$canvas.css('border-color', bool? 'black': 'red'); $canvasContainer.css('border-color', bool? 'black': 'red');
}; };
var saveImage = module.saveImage = function () { var saveImage = module.saveImage = function () {
@ -115,6 +123,20 @@ define([
myUserName = myID; 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 = { var config = module.config = {
initialState: '{}', initialState: '{}',
websocketURL: Cryptpad.getWebsocketURL(), websocketURL: Cryptpad.getWebsocketURL(),
@ -148,6 +170,11 @@ define([
if (readOnly) {delete config.changeNameID; } if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, userList, config); 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 editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys); 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) { var updateTitle = function (newTitle) {
if (newTitle === document.title) { return; } if (newTitle === document.title) { return; }
// Change the title now, and set it back to the old value if there is an error // 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); } if (readOnly) { setEditable(false); }
}); });
setEditable(false);
var stringifyInner = function (textValue) { var stringifyInner = function (textValue) {
var obj = { var obj = {
@ -296,6 +310,7 @@ define([
realtime: realtime realtime: realtime
}); });
Cryptpad.removeLoadingScreen();
setEditable(true); setEditable(true);
initializing = false; initializing = false;
onRemote(); onRemote();
@ -347,6 +362,11 @@ define([
Cryptpad.ready(function (err, env) { Cryptpad.ready(function (err, env) {
andThen(); andThen();
}); });
Cryptpad.onError(function (info) {
if (info) {
onConnectError();
}
});
}); });
}); });