[tree] style

client/style/style.scss

@@ -269,6 +269,118 @@ mark {
 	margin: $spacer-3 0px;
 }
 
+.tree {
+	padding: 15px;
+}
+
+.tree li {
+	list-style: none;
+	margin: 2px 0px;
+}
+
+ul.tree-children {
+	padding-left: 20px;
+}
+
+.tree-link {
+	cursor: pointer;
+	display: inline-block;
+	padding: 1px;
+}
+
+.tree-link .node-parent {
+	color: $gray-600;
+	font-size: 14px;
+	width: 10px;
+	text-align: center;
+}
+
+.tree-link .node-leaf {
+	color: $gray-400;
+}
+
+.tree-link .node-parent, .tree-link .node-leaf {
+	margin-right: 5px;
+    margin-left: 2px;
+    margin-top: 3px;
+}
+
+.tree-link.active {
+	svg {
+		color: $blue;
+	}
+
+	a {
+		color: $gray-600;
+	}
+}
+
+.tree-hover {
+	background-color: $gray-200;
+	min-height: 20px;
+	border: 1px solid $gray-600;
+}
+
+.tree-node-toolbar {
+	display: inline-block;
+	padding: 0px 5px;
+	margin-left: 15px;
+	margin-bottom: -4px;
+	margin-top: -8px;
+}
+
+// @media (max-width: @screen-xs) {
+// 	ul.tree-children {
+// 		padding-left: 10px;
+// 	}
+// }
+
+// decoration
+// .tree, .tree-node {
+.tree.with-skeleton, .tree.with-skeleton .tree-node {
+	position: relative;
+
+	&.opened::before, &:last-child::after {
+		content: '';
+		position: absolute;
+		top: 12px;
+		left: 7px;
+		height: calc(100% - 23px);
+		width: 1px;
+		background: $gray-400;
+		z-index: -1;
+	}
+
+	&:last-child::after {
+		top: 11px;
+		left: -13px;
+		height: calc(100% - 15px);
+		width: 3px;
+		background: #fff;
+	}
+
+	&.opened > .tree-children > .tree-node > .tree-link::before {
+		content: '';
+		position: absolute;
+		width: 18px;
+		height: 1px;
+		top: 10px;
+		left: -12px;
+		z-index: -1;
+		background: $gray-400;
+	}
+}
+
+.tree.with-skeleton.opened::before {
+	left: 22px;
+	top: 33px;
+	height: calc(100% - 67px);
+}
+
+.tree-link.active ~ .balance-area {
+	color: $gray-600 !important;
+}
+
 // just for accounting
 
 .setup-container {

client/ui/index.js

@@ -3,6 +3,11 @@ const Dropdown = require('./dropdown');
 
 module.exports = {
     create(tag, o) {
+        if(!o) {
+            let div = document.createElement('div');
+            div.innerHTML = tag.trim();
+            return div.firstChild;
+        }
         let element = document.createElement(tag);
 
         let $ = (expr, con) => {

client/ui/tree.js

@@ -11,7 +11,7 @@ const triangleLeft = octicons["triangle-left"].toSVG({ "width": 5, "class": "nod
 // add node classes later
 
 class Tree {
-    constructor({parent, label, iconSet, withSkeleton=1, method}) {
+    constructor({parent, label, iconSet, withSkeleton, method}) {
 		Object.assign(this, arguments[0]);
 		this.nodes = {};
 		if(!iconSet) {
@@ -27,9 +27,8 @@ class Tree {
     make() {
 		this.tree = frappe.ui.create('div', {
 			inside: this.parent,
-			className: 'tree'
+			className: 'tree ' + (this.withSkeleton ? 'with-skeleton' : '')
 		});
-		if(this.withSkeleton) this.tree.classList.add('tree-with-skeleton');
 
 		this.rootNode = this.makeNode(this.label, this.label, true, null, this.tree);
 		this.expandNode(this.rootNode, false);
@@ -98,7 +97,7 @@ class Tree {
 	}
 
 	buildNodeElement(node) {
-		let parentLi = frappe.ui.create('li', {
+		node.parentLi = frappe.ui.create('li', {
 			inside: node.parent,
 			className: 'tree-node'
 		});
@@ -110,7 +109,7 @@ class Tree {
 		let $label = `<a class="tree-label"> ${node.label}</a>`;
 
 		node.$treeLink = frappe.ui.create('span', {
-			inside: parentLi,
+			inside: node.parentLi,
 			className: 'tree-link',
 			'data-label': node.label,
 			innerHTML: iconHtml + $label
@@ -122,7 +121,7 @@ class Tree {
 		});
 
 		node.$childrenList = frappe.ui.create('ul', {
-			inside: parentLi,
+			inside: node.parentLi,
 			className: 'tree-children hide'
 		});
 
@@ -148,7 +147,9 @@ class Tree {
 		}
 
 		node.expanded = !node.expanded;
-		node.parent.classList.toggle('opened', node.expanded);
+		// node.parent.classList.toggle('opened', node.expanded);
+		node.parent.classList.add('opened');
+		node.parentLi.classList.add('opened');
 	}
 
 	toggleNode(node) {
@@ -164,7 +165,8 @@ class Tree {
 			if(this.iconSet) {
 				const oldIcon = node.$treeLink.querySelector('svg');
 				const newIconKey = !node.expanded ? 'closed' : 'open';
-				// node.$treeLink.replaceChild(oldIcon, this.iconSet[newIconKey]);
+				const newIcon = frappe.ui.create(this.iconSet[newIconKey]);
+				node.$treeLink.replaceChild(newIcon, oldIcon);
 			}
 		}
 	}