From ce84b3115badba8ea937fa315c4e5abe3fec0219 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 12 Sep 2018 15:27:01 +1200 Subject: [PATCH] Improved UI/UX --- desktop/sources/index.html | 6 +-- desktop/sources/links/main.css | 32 +++++++++---- desktop/sources/links/theme.css | 3 +- desktop/sources/scripts/dotgrid.js | 34 ++++++++++---- desktop/sources/scripts/interface.js | 20 +++----- desktop/sources/scripts/lib/theme.js | 4 +- desktop/sources/scripts/picker.js | 69 +++++++++++----------------- index.html | 17 +++---- web/events.js | 4 +- 9 files changed, 98 insertions(+), 91 deletions(-) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index febb1e7..69b73f9 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -25,8 +25,7 @@ Dotgrid(Icon) -
- -
diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 5a37836..ce3fee0 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,8 +1,7 @@ -body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; transition: background 500ms} +body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; transition: background-color 500ms; -webkit-app-region: drag; padding: 35px;width:calc(100vw - 60px);height:calc(100vh - 60px)} /* Core */ -#app { -webkit-app-region: drag; padding: 35px;width:calc(100vw - 60px);height:calc(100vh - 60px)} #guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px} #render { display: none } #vector { z-index: 1000;position: relative;width:300px; height:300px; } @@ -13,20 +12,35 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non #interface.hidden { bottom:10px;opacity: 0 } #interface.visible { bottom:20px; opacity: 1 } #interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;} -#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6 } +#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6; transition: opacity 250ms; } #interface #menu svg.icon.inactive { opacity: 0.2 } #interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 } #interface #menu svg.icon:last-child { margin-right: 0; } #interface #menu svg.icon path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; } #interface #menu svg.icon.source { float:right; margin-left:-2px; margin-right:0px; } -#interface #menu svg.icon#option_color { opacity: 1.0 } +#interface #menu svg.icon#option_color { opacity: 1.0; z-index:1001; position: relative; } #interface #menu svg.icon#option_color:hover { opacity: 0.8 } -#interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms; padding-left:2.5px;} -#interface #color_path { transition: all 500ms; fill:red; } -#interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } -#interface.picker #picker { opacity: 1; top:0px; z-index: 900 } +#interface #picker { position: absolute; line-height: 20px; z-index: 0; width: 30px; opacity: 0; transition: all 250ms; font-size: 11px; border-radius: 3px; left: 200px; top: 0px; text-transform: uppercase; font-family: 'input_mono_medium';height:20px; padding:5px 0px;left:280px; overflow:hidden;} +#interface #picker:before { content:"#"; position: absolute; left:10px; opacity: 0; transition: opacity 500ms} +#interface #picker input { background:transparent; position: absolute; left: 20px; height: 20px; width: 60px; line-height: 20px; opacity: 0; transition: opacity 500ms; text-transform: uppercase;} +#interface #color_path { transition: all 500ms; } +#interface.picker #menu { z-index: 0 } + +#interface.picker #picker { width:30px; padding: 5px 15px; padding-right: 45px; opacity: 1; z-index: 900; width: 50px; left:200px; opacity: 1} +#interface.picker #picker:before { opacity: 1; } +#interface.picker #picker input { opacity: 1 } +#interface.picker #option_thickness { opacity: 0 !important } +#interface.picker #option_mirror { opacity: 0 !important } +#interface.picker #option_fill { opacity: 0 !important } /* Web Specific */ -#app.web #interface #menu #option_open { display: none; } \ No newline at end of file +body.web #interface #menu #option_open { display: none; } + +/* Ready */ + +body #guide { opacity: 0; transition: opacity 500ms; } +body.ready #guide { opacity: 1 } +body #interface { opacity: 0; transition: opacity 250ms, bottom 500ms; bottom:15px; } +body.ready #interface { opacity: 1; bottom:20px; } \ No newline at end of file diff --git a/desktop/sources/links/theme.css b/desktop/sources/links/theme.css index a4f8b88..f8c1fbe 100644 --- a/desktop/sources/links/theme.css +++ b/desktop/sources/links/theme.css @@ -1,5 +1,6 @@ body { background:var(--background) !important; } -#picker { background:var(--background) !important; color:var(--f_high) !important; } +#picker { background-color:var(--b_inv) !important; color:var(--f_inv) !important; } +#picker:before { color:var(--f_med) !important; } .fh { color:var(--f_high) !important; stroke:var(--f_high) !important; } .fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; } .fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index e2517d9..285e6bc 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -17,15 +17,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.block_x = block_x; this.block_y = block_y; - this.install = function() - { - document.getElementById("app").appendChild(this.guide.el); + // ISU + this.install = function(host) + { + host.appendChild(this.guide.el); + + this.interface.install(document.body); this.theme.install(document.body,this.update); } this.start = function() - { + { this.theme.start(); this.tool.start(); this.guide.start(); @@ -41,6 +44,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) window.addEventListener('drop', dotgrid.drag); this.new(); + + setTimeout(() => { document.body.className += ' ready'; }, 250) + } + + this.update = function() + { + dotgrid.resize(); + dotgrid.interface.update(); + dotgrid.guide.update(); } // File @@ -189,10 +201,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.interface.update(true); } - this.update = function() + this.resize = function() { let size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)} + if(size.width == dotgrid.tool.settings.size.width && size.height == dotgrid.tool.settings.size.height){ + return; + } + + console.log(`Resized: ${size.width}x${size.height}`) + dotgrid.tool.settings.size.width = size.width dotgrid.tool.settings.size.height = size.height @@ -204,8 +222,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.guide.resize(size); - dotgrid.interface.update(); - dotgrid.guide.update(); document.title = `Dotgrid — ${size.width}x${size.height}` } @@ -230,7 +246,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) { dotgrid.guide.update(); - if(e.target !== this.picker.el){ + if(e.target !== this.picker.input){ e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer())); e.clipboardData.setData('text/plain', dotgrid.tool.path()); e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()); @@ -245,7 +261,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) { dotgrid.guide.update(); - if(e.target !== this.picker.el){ + if(e.target !== this.picker.input){ e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer())); e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()); e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()); diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 701f5e5..348d421 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -11,11 +11,13 @@ function Interface() this.is_visible = true; this.zoom = false; - this.start = function() + this.install = function(host) { - document.getElementById("app").appendChild(this.el); - this.el.appendChild(dotgrid.picker.el); - + host.appendChild(this.el); + } + + this.start = function(host) + { let html = "" let options = { cast:{ @@ -55,7 +57,6 @@ function Interface() onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseup="dotgrid.interface.up('${type}','${name}')" onmousedown="dotgrid.interface.down('${type}','${name}')" - onclick="dotgrid.interface.click('${type}','${name}')" onmouseover="dotgrid.interface.over('${type}','${name}')" viewBox="0 0 300 300" class="icon ${type}"> @@ -68,6 +69,7 @@ function Interface() } this.menu_el.innerHTML = html + this.menu_el.appendChild(dotgrid.picker.el) } this.over = function(type,name) @@ -96,14 +98,6 @@ function Interface() this.update(true); } - this.click = function(type,name) - { - // if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } - - // dotgrid.tool[type](name) - // this.update(); - } - this.prev_operation = null; this.update = function(force = false,id) diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js index a37d3d4..25ed35c 100644 --- a/desktop/sources/scripts/lib/theme.js +++ b/desktop/sources/scripts/lib/theme.js @@ -9,8 +9,8 @@ function Theme() this.callback = null; this.collection = { - noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#aaa" }}, - pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#222", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }} + noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#fff", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#000" }}, + pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#000", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }} } this.active = this.collection.noir; diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index f102d1c..d115e08 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -3,21 +3,26 @@ function Picker() { this.memory = ""; - this.el = document.createElement("input"); + this.el = document.createElement("div"); this.el.id = "picker" + this.input = document.createElement("input"); + this.input.id = "picker_input" this.original = null; + this.el.appendChild(this.input) + this.start = function() { - this.el.setAttribute("placeholder",`${dotgrid.tool.style().color}`) + this.input.setAttribute("placeholder",`${dotgrid.tool.style().color.replace("#","").trim()}`) + this.input.setAttribute("maxlength",6) try{ dotgrid.controller.set("picker"); } catch(err){ } dotgrid.interface.el.className = "picker" - this.el.focus() + this.input.focus() this.original = dotgrid.tool.style().color - this.el.value = "" + this.input.value = "" } this.stop = function() @@ -28,27 +33,28 @@ function Picker() catch(err){ console.log("No controller"); } dotgrid.interface.el.className = "" - this.el.blur() - this.el.value = "" + this.input.blur() + this.input.value = "" } this.validate = function() { - let parts = this.parse(this.el.value) + if(!is_color(this.input.value)){ return; } - if(parts.color){ this.set_color(parts.color); } - if(parts.size){ this.set_size(parts.size); } + let hex = `#${this.input.value}`; + + this.set_color(hex); dotgrid.guide.update(); try{ dotgrid.controller.set(); } - catch(err){ } + catch(err){ console.log("No controller"); } dotgrid.interface.el.className = "" - this.el.blur() - this.el.value = "" + this.input.blur() + this.input.value = "" - setTimeout(() => { dotgrid.interface.update(true); }, 500) + setTimeout(() => { dotgrid.interface.update(true); }, 250) } this.set_color = function(color) @@ -72,12 +78,14 @@ function Picker() this.update = function() { - let parts = this.parse(this.el.value) - if(!parts.color){ return; } + if(!is_color(this.input.value)){ return; } - dotgrid.tool.style().color = parts.color; - dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none"; + let hex = `#${this.input.value}`; + + dotgrid.tool.style().color = hex; + dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? hex : "none"; dotgrid.guide.update(); + dotgrid.interface.update(true); } this.listen = function(e) @@ -97,36 +105,15 @@ function Picker() this.update(); } - this.parse = function(value) - { - let parts = value.split(" "); - let color = null; - let size = null; - - for(let id in parts){ - let part = parts[id]; - if(is_color(part) && !color){ color = part; } - if(is_size(part) && !size){ size = { width:parseInt(part.toLowerCase().split("x")[0]),height:parseInt(part.toLowerCase().split("x")[1]) }; } - } - return {color:color,size:size} - } - - function is_size(val) - { - if(val.toLowerCase().indexOf("x") < 1){ return false; } - - return true - } - function is_color(val) { - if(val.length != 4 && val.length != 7){ + if(val.length != 3 && val.length != 6){ return false } - let re = /\#[0-9A-Fa-f]/g; + let re = /[0-9A-Fa-f]/g; return re.test(val) } - this.el.onkeyup = function(event){ dotgrid.picker.listen(event); }; + this.input.onkeyup = function(event){ dotgrid.picker.listen(event); }; } \ No newline at end of file diff --git a/index.html b/index.html index 0b7375b..4ef59c0 100644 --- a/index.html +++ b/index.html @@ -26,15 +26,12 @@ Dotgrid(Icon) - -
- -
+ + diff --git a/web/events.js b/web/events.js index 8cbf899..8f5b090 100644 --- a/web/events.js +++ b/web/events.js @@ -4,10 +4,10 @@ document.onkeyup = (e) => { let ch = e.key.toLowerCase(); - if(e.target && e.target.id == "picker"){ return; } + if(e.target && e.target.id == "picker_input"){ return; } if(ch == "backspace"){ dotgrid.tool.remove_segment(); e.preventDefault(); } - if(ch == "escape"){ dotgrid.tool.clear(); e.preventDefault(); } + if(ch == "escape"){ dotgrid.tool.clear(); dotgrid.picker.stop(); e.preventDefault(); } if(ch == "1"){ dotgrid.tool.select_layer(0); e.preventDefault(); } if(ch == "2"){ dotgrid.tool.select_layer(1); e.preventDefault(); }