Better UI for whiteboard controls
This commit is contained in:
yflory
parent
fbdb8e547e
commit
f780087ac7
@ -1,5 +1,6 @@
|
||||
@import (reference) '../../customize/src/less2/include/tools.less';
|
||||
@import (reference) "../../customize/src/less2/include/framework.less";
|
||||
@import (reference) "../../customize/src/less2/include/buttons.less";
|
||||
|
||||
&.cp-app-whiteboard {
|
||||
|
||||
@ -36,6 +37,7 @@
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
// created in the html
|
||||
@ -74,6 +76,8 @@
|
||||
|
||||
padding: 10px;
|
||||
|
||||
.buttons_main();
|
||||
|
||||
& > * + * {
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
@ -82,10 +86,27 @@
|
||||
#cp-app-whiteboard-width, #cp-app-whiteboard-opacity {
|
||||
.middle;
|
||||
}
|
||||
#cp-app-whiteboard-clear, #cp-app-whiteboard-delete, #cp-app-whiteboard-toggledraw {
|
||||
|
||||
#cp-app-whiteboard-clear {
|
||||
display: inline;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -96,27 +117,30 @@
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.cp-app-whiteboard-range-group {
|
||||
.cp-whiteboard-brush {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
.cp-app-whiteboard-range-group:last-of-type {
|
||||
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;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
flex-wrap: wrap;
|
||||
min-width: 0;
|
||||
max-width: 300px;
|
||||
|
||||
padding: 10px;
|
||||
max-width: 320px;
|
||||
|
||||
span.cp-app-whiteboard-palette-color {
|
||||
height: 30px;
|
||||
|
||||
@ -50,7 +50,9 @@ define([
|
||||
var $widthLabel = $('label[for="cp-app-whiteboard-width"]');
|
||||
var $opacity = $('#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 metadataMgr = framework._.cpNfInner.metadataMgr;
|
||||
@ -97,7 +99,7 @@ define([
|
||||
var updateBrushWidth = function () {
|
||||
var val = $width.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');
|
||||
createCursor();
|
||||
};
|
||||
@ -108,7 +110,7 @@ define([
|
||||
var val = $opacity.val();
|
||||
brush.opacity = Number(val);
|
||||
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) + '%');
|
||||
createCursor();
|
||||
};
|
||||
@ -116,17 +118,27 @@ define([
|
||||
$opacity.on('change', updateBrushOpacity);
|
||||
|
||||
APP.draw = true;
|
||||
var toggleDrawMode = function () {
|
||||
$brush.click(function () {
|
||||
if (APP.draw) { return; }
|
||||
canvas.deactivateAll().renderAll();
|
||||
APP.draw = !APP.draw;
|
||||
APP.draw = true;
|
||||
canvas.isDrawingMode = APP.draw;
|
||||
$toggle.text(APP.draw ? Messages.canvas_disable : Messages.canvas_enable);
|
||||
if (APP.draw) { $deleteButton.hide(); }
|
||||
else { $deleteButton.show(); }
|
||||
};
|
||||
$toggle.click(toggleDrawMode);
|
||||
$type.find('button').removeClass('btn-primary');
|
||||
$brush.addClass('btn-primary');
|
||||
$deleteButton.prop('disabled', 'disabled');
|
||||
});
|
||||
$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 () {
|
||||
if (APP.draw) { return; }
|
||||
if (canvas.getActiveObject()) {
|
||||
canvas.getActiveObject().remove();
|
||||
}
|
||||
@ -211,6 +223,7 @@ define([
|
||||
if (first || Sortify(palette) !== Sortify(newPalette)) {
|
||||
palette = newPalette;
|
||||
$colors.html('<div class="hidden"> </div>');
|
||||
$colors.css('width', (palette.length * 20)+'px');
|
||||
palette.forEach(addColorToPalette);
|
||||
first = false;
|
||||
}
|
||||
@ -494,6 +507,9 @@ define([
|
||||
framework.start();
|
||||
};
|
||||
|
||||
Messages.canvas_brush = "Brush"; // XXX
|
||||
Messages.canvas_select = "Select"; // XXX
|
||||
|
||||
var initialContent = function () {
|
||||
return [
|
||||
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('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-delete.btn.btn-secondary', {
|
||||
style: {
|
||||
display: 'none',
|
||||
}
|
||||
}, Messages.canvas_delete),
|
||||
h('div.cp-app-whiteboard-range-group', [
|
||||
h('label', {
|
||||
'for': 'cp-app-whiteboard-width'
|
||||
}, Messages.canvas_width),
|
||||
h('input#cp-app-whiteboard-width', {
|
||||
type: 'range',
|
||||
min: "1",
|
||||
max: "100"
|
||||
}),
|
||||
h('span#cp-app-whiteboard-width-val', '5px')
|
||||
]),
|
||||
h('div.cp-app-whiteboard-range-group', [
|
||||
h('label', {
|
||||
'for': 'cp-app-whiteboard-opacity',
|
||||
}, Messages.canvas_opacity),
|
||||
h('input#cp-app-whiteboard-opacity', {
|
||||
type: 'range',
|
||||
min: "0.1",
|
||||
max: "1",
|
||||
step: "0.1"
|
||||
}),
|
||||
h('span#cp-app-whiteboard-opacity-val', '100%')
|
||||
}, Messages.canvas_delete),*/
|
||||
h('div.cp-whiteboard-brush', [
|
||||
h('div.cp-app-whiteboard-range-group', [
|
||||
h('label', {
|
||||
'for': 'cp-app-whiteboard-width'
|
||||
}, Messages.canvas_width),
|
||||
h('input#cp-app-whiteboard-width', {
|
||||
type: 'range',
|
||||
value: "20",
|
||||
min: "1",
|
||||
max: "100"
|
||||
}),
|
||||
h('span#cp-app-whiteboard-width-val', '5px')
|
||||
]),
|
||||
h('div.cp-app-whiteboard-range-group', [
|
||||
h('label', {
|
||||
'for': 'cp-app-whiteboard-opacity',
|
||||
}, Messages.canvas_opacity),
|
||||
h('input#cp-app-whiteboard-opacity', {
|
||||
type: 'range',
|
||||
value: "1",
|
||||
min: "0.1",
|
||||
max: "1",
|
||||
step: "0.1"
|
||||
}),
|
||||
h('span#cp-app-whiteboard-opacity-val', '100%')
|
||||
]),
|
||||
]),
|
||||
h('div.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
|
||||
h('img', {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user