From f1f84c1c3873a89ad39cd6602023c2706d549ccf Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Sun, 12 Jul 2020 18:24:43 +0200 Subject: Add child indicator. --- src/ws/munia.css | 24 ++++++++++++++++++------ src/ws/node.js | 44 +++++++++++++++++++++++++++----------------- 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"; -- cgit v1.2.3