improve whiteboard styles
Pierre Bondoerffer
parent
8b2cb37c2f
commit
b34e252eda
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue