From dd55626317d191b6528fe1b8f1d8d267157df748 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Mon, 15 Jun 2020 20:49:22 +0200 Subject: Major overhaul of visuals. --- src/ws/munia.css | 110 ++++++++++++++++++++++++++++++++++--------------------- src/ws/node.js | 20 +++++----- src/ws/view.js | 13 ++++--- 3 files changed, 86 insertions(+), 57 deletions(-) diff --git a/src/ws/munia.css b/src/ws/munia.css index 8abfa08..6841731 100644 --- a/src/ws/munia.css +++ b/src/ws/munia.css @@ -1,38 +1,46 @@ -/* Prevent the text contents of draggable elements from being selectable. */ -[draggable] -{ - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; -} - body { cursor: default; font-family: helvetica, arial, sans-serif; font-size: 0.8em; + color: #4d596c; + background-color: #f4f5f7; } .node { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; user-select: none; cursor: move; - background-color: #aaa; + background-color: white; border-style: solid; border-width: 1px; - border-color: black; + border-color: #dadde2; border-radius: 3px; - padding: 0px; + padding: 1em; margin: 0px; margin-left: auto; margin-right: auto; + box-shadow: 1px 1px 1px #666; +} + +.board .node +{ + background-color: #edf5ff; +} + +.board .node .children +{ + background-color: #edf5ff; +} + +.children .node +{ + background-color: white; +} + +.children .node .children +{ + background-color: #f4f5f7; } .node + .node @@ -42,7 +50,6 @@ body .node .data { - background-color: grey; } .node .id @@ -54,39 +61,49 @@ body min-width: 2.8em; display: inline-block; pointer-events: none; - margin-left: 2px; + padding-right: 0.3px; } .node .title { + clear: both; float: left; font-weight: bold; font-size: 1.1em; background: transparent; pointer-events: auto; - width: 65%; + min-width: 20em; + width: 100%; min-height: 1.1em; + padding-top: 0.4em; +} + +.title:hover, +.description:hover +{ + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.07), rgba(0,0,0,0)); } .node .state { float: right; - padding-left: 5px; - padding-right: 5px; - background: transparent; + padding: 0.3em 1em 0.3em 1em; + margin-right: 0.3em; pointer-events: auto; cursor: pointer; - background-color: #aaa; - border: solid 1px #666; + border-radius: 3px; + text-transform: uppercase; + font-size: 0.8em; + font-weight: bold; + color: black; } .node .description { - border-top: solid black 1px; display: block; clear: both; - padding-left: 5px; - background: #999; + padding-top: 0.5em; + padding-bottom: 1em; pointer-events: auto; min-height: 0.5em; } @@ -107,14 +124,20 @@ body .node .button { float: right; - display: inline-box; - width: 1em; + width: 1.6em; + height: 1.5em; + padding-top: 0.1em; vertical-align: text-center; text-align: center; cursor: pointer; pointer-events: auto; - background-color: #aaa; - border: solid 1px #666; + background-color: #ebedf0; + border-radius: 3px; +} + +.button + .button +{ + margin-right: 0.3em; } .node .children @@ -122,30 +145,33 @@ body clear: both; padding: 6px; min-height: 5px; - border: dotted 1px black; overflow: hidden; + background-color: #f4f5f7; } .collapsed .children { - clear: both; - background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); - max-height: 0px; - padding-top: 0px; - opacity: 0.2; + display: none; } .collapsed .description { height: 0px; + padding: 0px; overflow: hidden; min-height: 0px; } +.collapsed .title +{ + clear: none; + padding: 0px; + width: unset; +} + .board { - min-height: 200px; - width: 500px; + width: 48%; padding: 8px; margin: 2px; display: inline-box; @@ -162,6 +188,6 @@ body color: #0f0; background-color: #111; border: 1px solid #030; - border-radius: 4px; + border-radius: 3px; overflow: auto; } diff --git a/src/ws/node.js b/src/ws/node.js index 76ad7e3..4c63496 100644 --- a/src/ws/node.js +++ b/src/ws/node.js @@ -173,11 +173,6 @@ Node.prototype.create = function() this.id_element.appendChild(id_txt); this.data_element.appendChild(this.id_element); - this.title_element = document.createElement("div"); - this.title_element.setAttribute("class", "title"); - this.title_element.setAttribute("ondblclick", "editTitle(event)"); - this.data_element.appendChild(this.title_element); - var add_child_button = document.createElement("div"); add_child_button.name = "add_button"; add_child_button.setAttribute("onclick", "addChild(event)"); @@ -199,9 +194,14 @@ Node.prototype.create = function() this.state_element.setAttribute("onclick", "changeState(event)"); this.state_element.setAttribute("nodeid", this.id); this.state_element.setAttribute("class", "state"); - this.state_element.innerHTML = "todo"; + this.setAttribute("state", "todo"); this.data_element.appendChild(this.state_element); + this.title_element = document.createElement("div"); + this.title_element.setAttribute("class", "title"); + this.title_element.setAttribute("ondblclick", "editTitle(event)"); + this.data_element.appendChild(this.title_element); + this.description_element = document.createElement("div"); this.description_element.setAttribute("class", "description"); this.description_element.setAttribute("ondblclick", "editDescription(event)"); @@ -332,19 +332,19 @@ Node.prototype.setAttribute = function(name, value) this.state_element.appendChild(txt); if(value == "done") { - this.state_element.style.color = "green"; + this.state_element.style.backgroundColor = "#36b37e"; } else if(value == "in-progress") { - this.state_element.style.color = "yellow"; + this.state_element.style.backgroundColor = "#ffd351"; } else if(value == "blocked") { - this.state_element.style.color = "red"; + this.state_element.style.backgroundColor = "#da4343"; } else { - this.state_element.style.color = "black"; + this.state_element.style.backgroundColor = "#ebedf0"; } } }; diff --git a/src/ws/view.js b/src/ws/view.js index 1586389..4be20aa 100644 --- a/src/ws/view.js +++ b/src/ws/view.js @@ -125,7 +125,8 @@ function dragenter(e) { return; } - e.target.style.backgroundColor = "#646588"; + + e.target.style.backgroundColor = "#c4ffd0"; last_over = e.target; } @@ -139,7 +140,7 @@ function dragover(e) // } e.preventDefault(); - +/* var after = getElementAfter(e); if(last_after != null) { @@ -150,6 +151,7 @@ function dragover(e) after.style.borderColor = "red black black black"; } last_after = after; +*/ } function dragleave(e) @@ -160,7 +162,7 @@ function dragleave(e) return; } - e.target.style.backgroundColor = "#aaa"; + e.target.style.backgroundColor = ""; } function dragEnd(e) @@ -177,7 +179,7 @@ function dragEnd(e) // return; // } - e.target.style.backgroundColor = "#aaa"; + //e.target.style.backgroundColor = ""; if(last_after != null) { @@ -187,7 +189,7 @@ function dragEnd(e) if(last_over != null) { - last_over.style.backgroundColor = "#aaa"; + last_over.style.backgroundColor = ""; last_over = null; } @@ -352,6 +354,7 @@ function onLostFocusHandler(e) function editTitle(e) { + console.log("!"); e.stopPropagation(); const idstr = e.target.parentElement.parentElement.id; var node = findNodeFromString(idstr); -- cgit v1.2.3