blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
yflory 2017-04-07 14:54:02 +02:00
parent 84029ac2d7
commit dedf2b3c69
4 changed files with 41 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
customize.dist/translations/messages.fr.js
View file

@ -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";

5
customize.dist/translations/messages.js
View file

@ -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";

20
www/whiteboard/index.html
View file

@ -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">

16
www/whiteboard/main.js
View file

@ -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();