diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 8e4a245..c7544dd 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -22,10 +22,9 @@ diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 1a9ed76..4114121 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,31 +1,29 @@ body { padding: 5px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; padding-left:5px; transition: background 500ms} -#app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag;} -#wrapper { padding: 25px; padding-bottom: 15px; -webkit-app-region: drag; padding-left:15px;} -#dotgrid { margin:0px auto; position:relative; padding:10px;-webkit-app-region: no-drag; width:310px; height:310px; } - -#guide { position: absolute;width: 300px;height: 300px; margin-left: -5px; margin-top: -5px; transition: opacity 250ms} +#app { display: flex; flex-direction: column; align-items: center; -webkit-app-region: drag; padding-top:30px;} +#dotgrid { margin:0px auto; position:relative; padding:15px;-webkit-app-region: no-drag; width:310px; height:310px; } +#guide { position: absolute;width: 300px;height: 300px; transition: opacity 250ms;} #render { display: none } -.icon { width:30px; height:30px; margin-right:-2px; opacity: 1} -.icon:hover { cursor: pointer; opacity: 1 } - svg.vector { z-index: 1000;position: relative; left:10px; top:10px; width:300px; height:300px; } +/* Interface */ + #interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 315px; position:fixed; bottom:20px; left:calc(50vw - 155px); height:30px;} #interface svg.inactive { opacity: 0.2 } #interface svg path.inactive { opacity: 0.2 } #interface svg:hover { opacity: 0.5 } #interface svg.icon:last-child { margin-right: 0; } #interface svg path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; } - #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} #interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms;} #interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } #interface.picker #picker { opacity: 1; top:0px; z-index: 900 } +#interface .icon { width:30px; height:30px; margin-right:-2px; opacity: 1} +#interface .icon:hover { cursor: pointer; opacity: 1 } + #preview { position: absolute; top:20px; left:20px; stroke-dasharray: 4,4; } /* Theme Defaults */ diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 6be48fc..eca4341 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -16,8 +16,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.element = document.createElement("div"); this.element.id = "dotgrid"; - this.wrapper = document.createElement("div"); - this.wrapper.id = "wrapper"; this.svg_el = null; this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path"); this.layer_1.id = "layer_1"; this.layer_1.style.stroke = "black"; @@ -28,10 +26,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.install = function() { - document.getElementById("app").appendChild(this.wrapper); - this.wrapper.appendChild(this.element); - this.element.appendChild(this.guide.el); - this.wrapper.appendChild(this.render.el); + document.getElementById("app").appendChild(this.element); + document.getElementById("app").appendChild(this.guide.el); // Vector this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 6e5e4d0..2fb840c 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -20,10 +20,11 @@ function Guide() this.resize = function(size) { - this.el.width = (size.width+40)*2; - this.el.height = (size.height+40)*2; - this.el.style.width = (size.width+40)+"px"; - this.el.style.height = (size.height+40)+"px"; + var offset = 30 + this.el.width = (size.width+offset)*2; + this.el.height = (size.height+offset)*2; + this.el.style.width = (size.width+offset)+"px"; + this.el.style.height = (size.height+offset)+"px"; this.refresh(); } @@ -35,7 +36,6 @@ function Guide() this.refresh = function() { - console.log("refresh") this.clear(); // Markers