tildeverse/cryptpad
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improve whiteboard styles

Browse Source
This commit is contained in:
Pierre Bondoerffer 2017-08-09 14:43:32 +02:00
parent 8b2cb37c2f
commit b34e252eda
No known key found for this signature in database
GPG Key ID: C0C7C0C5063F2236
3 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
customize.dist/pages.js
View File

@ -427,33 +427,43 @@ define([
display: 'block',
}
}, [
h('button#clear', Msg.canvas_clear), ' ',
h('button#toggleDraw', Msg.canvas_disable),
h('button#delete', {
h('button#clear.btn.btn-danger', Msg.canvas_clear), ' ',
h('button#toggleDraw.btn.btn-default', Msg.canvas_disable),
h('button#delete.btn.btn-default', {
style: {
display: 'none',
}
}),
h('input#width', {
type: 'range',
value: "5",
min: "1",
max: "100"
}),
h('label', {
'for': 'width'
}, Msg.canvas_width),
h('input#opacity', {
type: 'range',
value: "1",
min: "0.1",
max: "1",
step: "0.1"
}),
h('label', {
'for': 'width',
}),
h('span.selected')
}, Msg.canvas_delete),
h('div.range-group', [
h('label', {
'for': 'width'
}, Msg.canvas_width),
h('input#width', {
type: 'range',
value: "5",
min: "1",
max: "100"
}),
h('span#width-val', '5px')
]),
h('div.range-group', [
h('label', {
'for': 'opacity',
}, Msg.canvas_opacity),
h('input#opacity', {
type: 'range',
value: "1",
min: "0.1",
max: "1",
step: "0.1"
}),
h('span#opacity-val', '100%')
]),
h('span.selected', [
h('img', {
title: Msg.canvas_currentBrush
})
])
]),
setHTML(h('div#colors'), ' '),
loadingScreen(),

14
www/whiteboard/main.js
View File

@ -15,6 +15,7 @@ define([
'/bower_components/file-saver/FileSaver.min.js',
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'less!/customize/src/less/cryptpad.less',
'less!/whiteboard/whiteboard.less',
'less!/customize/src/less/toolbar.less',
@ -89,13 +90,8 @@ window.canvas = canvas;
ctx.strokeStyle = '#000000';
ctx.stroke();
var img = ccanvas.toDataURL("image/png");
var $img = $('<img>', {
src: img,
title: Messages.canvas_currentBrush
});
$controls.find('.selected').html('').append($img);
$controls.find('.selected > img').attr('src', img);
canvas.freeDrawingCursor = 'url('+img+') '+size/2+' '+size/2+', crosshair';
};
@ -103,6 +99,7 @@ window.canvas = canvas;
var val = $width.val();
canvas.freeDrawingBrush.width = Number(val);
$widthLabel.text(Cryptpad.Messages._getKey("canvas_widthLabel", [val]));
$('#width-val').text(val + 'px');
createCursor();
};
updateBrushWidth();
@ -114,6 +111,7 @@ window.canvas = canvas;
brush.opacity = Number(val);
canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity);
$opacityLabel.text(Cryptpad.Messages._getKey("canvas_opacityLabel", [val]));
$('#opacity-val').text((Number(val) * 100) + '%');
createCursor();
};
updateBrushOpacity();
@ -188,7 +186,7 @@ window.canvas = canvas;
var setEditable = function (bool) {
if (readOnly && bool) { return; }
if (bool) { $controls.show(); }
if (bool) { $controls.css('display', 'flex'); }
else { $controls.hide(); }
canvas.isDrawingMode = bool ? module.draw : false;
@ -199,7 +197,7 @@ window.canvas = canvas;
canvas.forEachObject(function (object) {
object.selectable = bool;
});
$canvasContainer.css('border-color', bool? 'black': 'red');
$canvasContainer.find('canvas').css('border-color', bool? 'black': 'red');
};
var saveImage = module.saveImage = function () {

73
www/whiteboard/whiteboard.less
View File

@ -27,20 +27,29 @@ body {
}
// created by fabricjs. styled so defaults don't break anything
.canvas-container {
border: 1px solid black;
margin: auto;
background: white;
& > canvas {
border: 1px solid black;
}
}
// contains user tools
#controls {
display: block;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-top: 1px solid black;
background: white;
height: 100px;
line-height: 100px;
padding-bottom: 5px;
padding: 1em;
& > * + * {
margin: 0;
margin-left: 1em;
}
#width, #opacity {
.middle;
@ -50,15 +59,36 @@ body {
vertical-align: middle;
}
.selected {
margin-left: 20px;
display: inline-block;
height: 135px;
width: 135px;
display: flex;
align-items: center;
justify-content: center;
z-index: 9001;
text-align: center;
img {
vertical-align: middle;
width: 100px;
height: 100px;
}
.range-group {
display: flex;
flex-direction: column;
position: relative;
input[type="range"] {
background-color: inherit;
}
& > span {
cursor: default;
position: absolute;
top: 0;
right: 0;
}
}
.range-group:first-of-type {
margin-left: 2em;
}
.range-group:last-of-type {
margin-right: 1em;
}
}
@ -70,13 +100,21 @@ body {
display: flex;
justify-content: space-between;
padding: 1em;
span.palette-color {
height: 4vw;
width: 4vw;
display: inline-block;
display: block;
margin: 5px;
border: 1px solid black;
vertical-align: top;
border-radius: 50%;
transition: transform 0.1s;
&:hover {
transform: scale(1.2);
}
}
}
@ -87,6 +125,7 @@ body {
// input[type=color] must exist in the dom to work correctly
// styled so that they don't break layouts
#pickers {
visibility: hidden;
position: absolute;
@ -95,3 +134,11 @@ body {
z-index: -5;
}
.btn.btn-default {
background-color: #BBB;
color: black;
&:hover {
background-color: #DDD;
}
}