Major overhaul of visuals.

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);