Add child indicator.

2 files changed, 45 insertions, 23 deletions

diff --git a/src/ws/munia.css b/src/ws/munia.css
index 2cd6c55..75321ec 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -52,16 +52,28 @@ body
 {
 }
 
-.node .id
+.node .annotation
 {
-	float: left;
-	font-size: 0.8em;
 	vertical-align: text-top;
-	opacity: 0.6;
-	min-width: 2.8em;
-	display: inline-block;
+	display: inline-box;
+	float: left;
 	pointer-events: none;
 	padding-right: 0.3px;
+	min-width: 2.8em;
+	margin-top: -0.5em;
+}
+
+.node .id
+{
+	font-size: 0.8em;
+	opacity: 0.6;
+}
+
+.node .children_indicator
+{
+	clear: both;
+	font-size: 0.8em;
+	opacity: 0.6;
 }
 
 .node .title
diff --git a/src/ws/node.js b/src/ws/node.js
index 16eb9cc..67d9372 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -121,14 +121,14 @@ Node.prototype.addChild = function(node, insertBeforeId)
 		this.children_element.appendChild(node.element);
 	}
 
-//	if(this.childNodes.length == 0)
-//	{
-//		this.element.style.backgroundColor = "#aaa";
-//	}
-//	else
-//	{
-//		this.element.style.backgroundColor = "#aaaa81";
-//	}
+	if(this.childNodes.length > 0)
+	{
+		this.children_indicator_element.style.display = "inherit";
+	}
+	else
+	{
+		this.children_indicator_element.style.display = "none";
+	}
 };
 
 Node.prototype.removeChild = function(node)
@@ -140,14 +140,14 @@ Node.prototype.removeChild = function(node)
 	node.parent = null;
 	this.children_element.removeChild(node.element);
 
-//	if(this.childNodes.length == 0)
-//	{
-//		this.element.style.backgroundColor = "#aaa";
-//	}
-//	else
-//	{
-//		this.element.style.backgroundColor = "#aaaa81";
-//	}
+	if(this.childNodes.length > 0)
+	{
+		this.children_indicator_element.style.display = "inherit";
+	}
+	else
+	{
+		this.children_indicator_element.style.display = "none";
+	}
 };
 
 Node.prototype.create = function()
@@ -166,12 +166,22 @@ Node.prototype.create = function()
 	this.children_element.className = "children";
 	this.element.appendChild(this.children_element);
 
+	var annotation = document.createElement("div");
+	annotation.className = "annotation";
 
 	this.id_element = document.createElement("div");
 	this.id_element.className = "id";
 	var id_txt = document.createTextNode(this.id);
 	this.id_element.appendChild(id_txt);
-	this.data_element.appendChild(this.id_element);
+	annotation.appendChild(this.id_element);
+
+	this.children_indicator_element = document.createElement("div");
+	this.children_indicator_element.className = "children_indicator";
+	this.children_indicator_element.innerHTML = "⤷";
+	this.children_indicator_element.style.display = "none";
+	annotation.appendChild(this.children_indicator_element);
+
+	this.data_element.appendChild(annotation);
 
 	this.collapse_button = document.createElement("div");
 	this.collapse_button.name = "add_button";