Atlas48
/
pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved UI/UX

This commit is contained in:
Devine Lu Linvega 2018-09-12 15:27:01 +12:00
parent a0ede91554
commit ce84b3115b
9 changed files with 98 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
desktop/sources/index.html
View File

@ -25,8 +25,7 @@
<title>Dotgrid(Icon)</title> <title>Dotgrid(Icon)</title>
</head> </head>
<body> <body>
<div id="app"> <script>
<script>
const webFrame = require('electron').webFrame const webFrame = require('electron').webFrame
const {dialog,app} = require('electron').remote; const {dialog,app} = require('electron').remote;
const fs = require('fs'); const fs = require('fs');
@ -104,9 +103,8 @@
dotgrid.controller.commit(); dotgrid.controller.commit();
dotgrid.install(); dotgrid.install(document.body);
dotgrid.start(); dotgrid.start();
</script> </script>
</div>
</body> </body>
</html> </html>

32
desktop/sources/links/main.css
View File

@ -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 */ /* 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} #guide { position: absolute;width: 300px;height: 300px; transition: opacity 150ms; -webkit-app-region: no-drag; border-radius: 3px}
#render { display: none } #render { display: none }
#vector { z-index: 1000;position: relative;width:300px; height:300px; } #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.hidden { bottom:10px;opacity: 0 }
#interface.visible { bottom:20px; opacity: 1 } #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 { 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.inactive { opacity: 0.2 }
#interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 } #interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 }
#interface #menu svg.icon:last-child { margin-right: 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 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.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 #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 #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 #color_path { transition: all 500ms; fill:red; } #interface #picker:before { content:"#"; position: absolute; left:10px; opacity: 0; transition: opacity 500ms}
#interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } #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.picker #picker { opacity: 1; top:0px; z-index: 900 } #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 */ /* Web Specific */
#app.web #interface #menu #option_open { display: none; } 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; }

3
desktop/sources/links/theme.css
View File

@ -1,5 +1,6 @@
body { background:var(--background) !important; } 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; } .fh { color:var(--f_high) !important; stroke:var(--f_high) !important; }
.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; } .fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; }
.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; } .fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; }

34
desktop/sources/scripts/dotgrid.js
View File

@ -17,15 +17,18 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
this.block_x = block_x; this.block_x = block_x;
this.block_y = block_y; this.block_y = block_y;
this.install = function() // ISU
{
document.getElementById("app").appendChild(this.guide.el);
this.install = function(host)
{
host.appendChild(this.guide.el);
this.interface.install(document.body);
this.theme.install(document.body,this.update); this.theme.install(document.body,this.update);
} }
this.start = function() this.start = function()
{ {
this.theme.start(); this.theme.start();
this.tool.start(); this.tool.start();
this.guide.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); window.addEventListener('drop', dotgrid.drag);
this.new(); this.new();
setTimeout(() => { document.body.className += ' ready'; }, 250)
}
this.update = function()
{
dotgrid.resize();
dotgrid.interface.update();
dotgrid.guide.update();
} }
// File // File
@ -189,10 +201,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
dotgrid.interface.update(true); dotgrid.interface.update(true);
} }
this.update = function() this.resize = function()
{ {
let size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)} 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.width = size.width
dotgrid.tool.settings.size.height = size.height 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.guide.resize(size);
dotgrid.interface.update();
dotgrid.guide.update();
document.title = `Dotgrid — ${size.width}x${size.height}` 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(); 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/source', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/plain', dotgrid.tool.path()); e.clipboardData.setData('text/plain', dotgrid.tool.path());
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()); 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(); 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/plain', dotgrid.tool.export(dotgrid.tool.layer()));
e.clipboardData.setData('text/html', dotgrid.renderer.to_svg()); e.clipboardData.setData('text/html', dotgrid.renderer.to_svg());
e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg()); e.clipboardData.setData('text/svg+xml', dotgrid.renderer.to_svg());

20
desktop/sources/scripts/interface.js
View File

@ -11,11 +11,13 @@ function Interface()
this.is_visible = true; this.is_visible = true;
this.zoom = false; this.zoom = false;
this.start = function() this.install = function(host)
{ {
document.getElementById("app").appendChild(this.el); host.appendChild(this.el);
this.el.appendChild(dotgrid.picker.el); }
this.start = function(host)
{
let html = "" let html = ""
let options = { let options = {
cast:{ cast:{
@ -55,7 +57,6 @@ function Interface()
onmouseout="dotgrid.interface.out('${type}','${name}')" onmouseout="dotgrid.interface.out('${type}','${name}')"
onmouseup="dotgrid.interface.up('${type}','${name}')" onmouseup="dotgrid.interface.up('${type}','${name}')"
onmousedown="dotgrid.interface.down('${type}','${name}')" onmousedown="dotgrid.interface.down('${type}','${name}')"
onclick="dotgrid.interface.click('${type}','${name}')"
onmouseover="dotgrid.interface.over('${type}','${name}')" onmouseover="dotgrid.interface.over('${type}','${name}')"
viewBox="0 0 300 300" viewBox="0 0 300 300"
class="icon ${type}"> class="icon ${type}">
@ -68,6 +69,7 @@ function Interface()
} }
this.menu_el.innerHTML = html this.menu_el.innerHTML = html
this.menu_el.appendChild(dotgrid.picker.el)
} }
this.over = function(type,name) this.over = function(type,name)
@ -96,14 +98,6 @@ function Interface()
this.update(true); 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.prev_operation = null;
this.update = function(force = false,id) this.update = function(force = false,id)

4
desktop/sources/scripts/lib/theme.js
View File

@ -9,8 +9,8 @@ function Theme()
this.callback = null; this.callback = null;
this.collection = { 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" }}, 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: "#222", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }} 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; this.active = this.collection.noir;

69
desktop/sources/scripts/picker.js
View File

@ -3,21 +3,26 @@
function Picker() function Picker()
{ {
this.memory = ""; this.memory = "";
this.el = document.createElement("input"); this.el = document.createElement("div");
this.el.id = "picker" this.el.id = "picker"
this.input = document.createElement("input");
this.input.id = "picker_input"
this.original = null; this.original = null;
this.el.appendChild(this.input)
this.start = function() 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"); } try{ dotgrid.controller.set("picker"); }
catch(err){ } catch(err){ }
dotgrid.interface.el.className = "picker" dotgrid.interface.el.className = "picker"
this.el.focus() this.input.focus()
this.original = dotgrid.tool.style().color this.original = dotgrid.tool.style().color
this.el.value = "" this.input.value = ""
} }
this.stop = function() this.stop = function()
@ -28,27 +33,28 @@ function Picker()
catch(err){ console.log("No controller"); } catch(err){ console.log("No controller"); }
dotgrid.interface.el.className = "" dotgrid.interface.el.className = ""
this.el.blur() this.input.blur()
this.el.value = "" this.input.value = ""
} }
this.validate = function() 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); } let hex = `#${this.input.value}`;
if(parts.size){ this.set_size(parts.size); }
this.set_color(hex);
dotgrid.guide.update(); dotgrid.guide.update();
try{ dotgrid.controller.set(); } try{ dotgrid.controller.set(); }
catch(err){ } catch(err){ console.log("No controller"); }
dotgrid.interface.el.className = "" dotgrid.interface.el.className = ""
this.el.blur() this.input.blur()
this.el.value = "" this.input.value = ""
setTimeout(() => { dotgrid.interface.update(true); }, 500) setTimeout(() => { dotgrid.interface.update(true); }, 250)
} }
this.set_color = function(color) this.set_color = function(color)
@ -72,12 +78,14 @@ function Picker()
this.update = function() this.update = function()
{ {
let parts = this.parse(this.el.value) if(!is_color(this.input.value)){ return; }
if(!parts.color){ return; }
dotgrid.tool.style().color = parts.color; let hex = `#${this.input.value}`;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none";
dotgrid.tool.style().color = hex;
dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? hex : "none";
dotgrid.guide.update(); dotgrid.guide.update();
dotgrid.interface.update(true);
} }
this.listen = function(e) this.listen = function(e)
@ -97,36 +105,15 @@ function Picker()
this.update(); 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) function is_color(val)
{ {
if(val.length != 4 && val.length != 7){ if(val.length != 3 && val.length != 6){
return false return false
} }
let re = /\#[0-9A-Fa-f]/g; let re = /[0-9A-Fa-f]/g;
return re.test(val) return re.test(val)
} }
this.el.onkeyup = function(event){ dotgrid.picker.listen(event); }; this.input.onkeyup = function(event){ dotgrid.picker.listen(event); };
} }

17
index.html
View File

@ -26,15 +26,12 @@
<link rel="stylesheet" type="text/css" href="desktop/sources/links/theme.css"/> <link rel="stylesheet" type="text/css" href="desktop/sources/links/theme.css"/>
<title>Dotgrid(Icon)</title> <title>Dotgrid(Icon)</title>
</head> </head>
<body> <body class='web'>
<div id="app"> <script>
<script> let dialog = null;
let dialog = null; dotgrid = new Dotgrid(300,300,20,20,4,4);
dotgrid = new Dotgrid(300,300,20,20,4,4); dotgrid.install(document.body);
dotgrid.install(); dotgrid.start();
dotgrid.start(); </script>
document.getElementById("app").className = "web";
</script>
</div>
</body> </body>
</html> </html>

4
web/events.js
View File

@ -4,10 +4,10 @@ document.onkeyup = (e) =>
{ {
let ch = e.key.toLowerCase(); 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 == "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 == "1"){ dotgrid.tool.select_layer(0); e.preventDefault(); }
if(ch == "2"){ dotgrid.tool.select_layer(1); e.preventDefault(); } if(ch == "2"){ dotgrid.tool.select_layer(1); e.preventDefault(); }