infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Better UI for whiteboard controls

Browse Source
pull/1/head
yflory 5 years ago
parent fbdb8e547e
commit f780087ac7
2 changed files with 106 additions and 57 deletions
Show Stats Download Patch File Download Diff File

67
www/whiteboard/app-whiteboard.less
Unescape Escape View File

@ -1,5 +1,6 @@
@import (reference) '../../customize/src/less2/include/tools.less'; @import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) "../../customize/src/less2/include/framework.less"; @import (reference) "../../customize/src/less2/include/framework.less";
@import (reference) "../../customize/src/less2/include/buttons.less";
&.cp-app-whiteboard { &.cp-app-whiteboard {
@ -36,6 +37,7 @@
flex: 1; flex: 1;
display: flex; display: flex;
overflow: auto; overflow: auto;
flex-flow: column;
} }
// created in the html // created in the html
@ -74,6 +76,8 @@
padding: 10px; padding: 10px;
.buttons_main();
& > * + * { & > * + * {
margin: 0; margin: 0;
margin-left: 1em; margin-left: 1em;
@ -82,10 +86,27 @@
#cp-app-whiteboard-width, #cp-app-whiteboard-opacity { #cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
.middle; .middle;
} }
#cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
#cp-app-whiteboard-clear {
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
} }
#cp-app-whiteboard-delete {
min-width: 40px;
}
.cp-whiteboard-type {
button {
min-width: 40px;
text-align: center;
&:not(:first-child) {
margin-left: -1px;
}
&.btn-primary:hover {
cursor: default;
}
}
}
.cp-app-whiteboard-selected { .cp-app-whiteboard-selected {
display: flex; display: flex;
align-items: center; align-items: center;
@ -96,27 +117,30 @@
height: 100px; height: 100px;
} }
.cp-app-whiteboard-range-group { .cp-whiteboard-brush {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
input[type="range"] {
background-color: inherit;
}
& > span {
cursor: default;
position: absolute;
top: 0;
right: 0;
}
}
.cp-app-whiteboard-range-group:first-of-type {
margin-left: 2em; margin-left: 2em;
}
.cp-app-whiteboard-range-group:last-of-type {
margin-right: 1em; margin-right: 1em;
.cp-app-whiteboard-range-group {
display: flex;
align-items: center;
position: relative;
label {
margin-bottom: 0;
margin-right: 5px;
}
input[type="range"] {
background-color: inherit;
margin-right: 5px;
}
& > span {
cursor: default;
}
}
} }
} }
@ -125,14 +149,9 @@
.middle; .middle;
z-index: 100; z-index: 100;
background: white; background: white;
justify-content: space-between;
display: flex; display: flex;
flex-shrink: 1;
flex-wrap: wrap; flex-wrap: wrap;
min-width: 0; max-width: 320px;
max-width: 300px;
padding: 10px;
span.cp-app-whiteboard-palette-color { span.cp-app-whiteboard-palette-color {
height: 30px; height: 30px;

96
www/whiteboard/inner.js
Unescape Escape View File

@ -50,7 +50,9 @@ define([
var $widthLabel = $('label[for="cp-app-whiteboard-width"]'); var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
var $opacity = $('#cp-app-whiteboard-opacity'); var $opacity = $('#cp-app-whiteboard-opacity');
var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]'); var $opacityLabel = $('label[for="cp-app-whiteboard-opacity"]');
var $toggle = $('#cp-app-whiteboard-toggledraw'); var $type = $('.cp-whiteboard-type');
var $brush = $('.cp-whiteboard-type .brush');
var $move = $('.cp-whiteboard-type .move');
var $deleteButton = $('#cp-app-whiteboard-delete'); var $deleteButton = $('#cp-app-whiteboard-delete');
var metadataMgr = framework._.cpNfInner.metadataMgr; var metadataMgr = framework._.cpNfInner.metadataMgr;
@ -97,7 +99,7 @@ define([
var updateBrushWidth = function () { var updateBrushWidth = function () {
var val = $width.val(); var val = $width.val();
canvas.freeDrawingBrush.width = Number(val); canvas.freeDrawingBrush.width = Number(val);
$widthLabel.text(Messages._getKey("canvas_widthLabel", [val])); $widthLabel.text(Messages._getKey("canvas_widthLabel", ['']));
$('#cp-app-whiteboard-width-val').text(val + 'px'); $('#cp-app-whiteboard-width-val').text(val + 'px');
createCursor(); createCursor();
}; };
@ -108,7 +110,7 @@ define([
var val = $opacity.val(); var val = $opacity.val();
brush.opacity = Number(val); brush.opacity = Number(val);
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity); canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
$opacityLabel.text(Messages._getKey("canvas_opacityLabel", [val])); $opacityLabel.text(Messages._getKey("canvas_opacityLabel", ['']));
$('#cp-app-whiteboard-opacity-val').text((Number(val) * 100) + '%'); $('#cp-app-whiteboard-opacity-val').text((Number(val) * 100) + '%');
createCursor(); createCursor();
}; };
@ -116,17 +118,27 @@ define([
$opacity.on('change', updateBrushOpacity); $opacity.on('change', updateBrushOpacity);
APP.draw = true; APP.draw = true;
var toggleDrawMode = function () { $brush.click(function () {
if (APP.draw) { return; }
canvas.deactivateAll().renderAll(); canvas.deactivateAll().renderAll();
APP.draw = !APP.draw; APP.draw = true;
canvas.isDrawingMode = APP.draw; canvas.isDrawingMode = APP.draw;
$toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable); $type.find('button').removeClass('btn-primary');
if (APP.draw) { $deleteButton.hide(); } $brush.addClass('btn-primary');
else { $deleteButton.show(); } $deleteButton.prop('disabled', 'disabled');
}; });
$toggle.click(toggleDrawMode); $move.click(function () {
if (!APP.draw) { return; }
canvas.deactivateAll().renderAll();
APP.draw = false;
canvas.isDrawingMode = APP.draw;
$type.find('button').removeClass('btn-primary');
$move.addClass('btn-primary');
$deleteButton.prop('disabled', '');
});
var deleteSelection = function () { var deleteSelection = function () {
if (APP.draw) { return; }
if (canvas.getActiveObject()) { if (canvas.getActiveObject()) {
canvas.getActiveObject().remove(); canvas.getActiveObject().remove();
} }
@ -211,6 +223,7 @@ define([
if (first || Sortify(palette) !== Sortify(newPalette)) { if (first || Sortify(palette) !== Sortify(newPalette)) {
palette = newPalette; palette = newPalette;
$colors.html('<div class="hidden">&nbsp;</div>'); $colors.html('<div class="hidden">&nbsp;</div>');
$colors.css('width', (palette.length * 20)+'px');
palette.forEach(addColorToPalette); palette.forEach(addColorToPalette);
first = false; first = false;
} }
@ -494,6 +507,9 @@ define([
framework.start(); framework.start();
}; };
Messages.canvas_brush = "Brush"; // XXX
Messages.canvas_select = "Select"; // XXX
var initialContent = function () { var initialContent = function () {
return [ return [
h('div#cp-toolbar.cp-toolbar-container'), h('div#cp-toolbar.cp-toolbar-container'),
@ -509,34 +525,48 @@ define([
} }
}, [ }, [
h('button#cp-app-whiteboard-clear.btn.btn-danger', Messages.canvas_clear), ' ', h('button#cp-app-whiteboard-clear.btn.btn-danger', Messages.canvas_clear), ' ',
h('div.cp-whiteboard-type', [
h('button.brush.fa.fa-paint-brush.btn-primary', {title: Messages.canvas_brush}),
h('button.move.fa.fa-arrows', {title: Messages.canvas_select}),
]),
h('button.fa.fa-trash#cp-app-whiteboard-delete', {
disabled: 'disabled',
title: Messages.canvas_delete
}),
/*
h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Messages.canvas_disable),
h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Messages.canvas_disable), h('button#cp-app-whiteboard-toggledraw.btn.btn-secondary', Messages.canvas_disable),
h('button#cp-app-whiteboard-delete.btn.btn-secondary', { h('button#cp-app-whiteboard-delete.btn.btn-secondary', {
style: { style: {
display: 'none', display: 'none',
} }
}, Messages.canvas_delete), }, Messages.canvas_delete),*/
h('div.cp-app-whiteboard-range-group', [ h('div.cp-whiteboard-brush', [
h('label', { h('div.cp-app-whiteboard-range-group', [
'for': 'cp-app-whiteboard-width' h('label', {
}, Messages.canvas_width), 'for': 'cp-app-whiteboard-width'
h('input#cp-app-whiteboard-width', { }, Messages.canvas_width),
type: 'range', h('input#cp-app-whiteboard-width', {
min: "1", type: 'range',
max: "100" value: "20",
}), min: "1",
h('span#cp-app-whiteboard-width-val', '5px') max: "100"
]), }),
h('div.cp-app-whiteboard-range-group', [ h('span#cp-app-whiteboard-width-val', '5px')
h('label', { ]),
'for': 'cp-app-whiteboard-opacity', h('div.cp-app-whiteboard-range-group', [
}, Messages.canvas_opacity), h('label', {
h('input#cp-app-whiteboard-opacity', { 'for': 'cp-app-whiteboard-opacity',
type: 'range', }, Messages.canvas_opacity),
min: "0.1", h('input#cp-app-whiteboard-opacity', {
max: "1", type: 'range',
step: "0.1" value: "1",
}), min: "0.1",
h('span#cp-app-whiteboard-opacity-val', '100%') max: "1",
step: "0.1"
}),
h('span#cp-app-whiteboard-opacity-val', '100%')
]),
]), ]),
h('div.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [ h('div.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
h('img', { h('img', {

Write Preview
Loading…
Cancel
Save