From b34e252edac20a6d403c5554cbf8b9b08ad240ea Mon Sep 17 00:00:00 2001 From: Pierre Bondoerffer Date: Wed, 9 Aug 2017 14:43:32 +0200 Subject: [PATCH] improve whiteboard styles --- customize.dist/pages.js | 58 ++++++++++++++++----------- www/whiteboard/main.js | 14 +++---- www/whiteboard/whiteboard.less | 73 ++++++++++++++++++++++++++++------ 3 files changed, 100 insertions(+), 45 deletions(-) diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 90fe12537..f233e8247 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -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(), diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index 8a0fcf415..337cd8794 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -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 = $('', { - 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 () { diff --git a/www/whiteboard/whiteboard.less b/www/whiteboard/whiteboard.less index 81c7e0bfe..72ae28e51 100644 --- a/www/whiteboard/whiteboard.less +++ b/www/whiteboard/whiteboard.less @@ -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; + } +}