2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 03:19:01 +00:00

[tree] style

This commit is contained in:
Prateeksha Singh 2018-03-29 13:19:08 +05:30
parent 1a246b76a3
commit c62f457ae6
3 changed files with 127 additions and 8 deletions

View File

@ -269,6 +269,118 @@ mark {
margin: $spacer-3 0px; 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 // just for accounting
.setup-container { .setup-container {

View File

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

View File

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