diff --git a/frappe/public/build.json b/frappe/public/build.json index c8af6e220b..7647fcbe2e 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -41,6 +41,7 @@ "public/css/navbar.css", "public/css/slickgrid.css", "public/css/tree_grid.css", + "public/css/tree.css", "public/css/nprogress.css" ], "js/frappe.min.js": [ diff --git a/frappe/public/css/app.css b/frappe/public/css/app.css index 79eca6804a..ecb2cb179c 100644 --- a/frappe/public/css/app.css +++ b/frappe/public/css/app.css @@ -344,13 +344,6 @@ ul.linked-with-list li { font-weight: bold; } -.tree-node-toolbar { - padding: 2px 5px; - margin-left: 15px; - border-radius: 3px; - background-color: #ddd; -} - .print-preview { padding: 50px 20px; margin: 0px -15px; diff --git a/frappe/public/css/tree.css b/frappe/public/css/tree.css new file mode 100644 index 0000000000..3af785d671 --- /dev/null +++ b/frappe/public/css/tree.css @@ -0,0 +1,31 @@ +.tree li { + list-style: none; +} +.tree ul { + margin-top: 2px; +} +.tree-link { + cursor: pointer; +} +.tree-hover { + background-color: #eee; + min-height: 20px; + border: 1px solid #ddd; +} +.tree-node-toolbar { + display: inline-block; + padding: 0px 5px; + margin-left: 15px; + border-radius: 3px; + background-color: #ddd; +} +.tree-toolbar-item { + display: inline-block; + padding: 0px 5px; + padding-top: 1px; + border-right: 1px solid #aaa; + font-size: 90%; +} +.tree-toolbar-item:last-child { + border-right: 0px; +} \ No newline at end of file diff --git a/frappe/public/js/frappe/ui/tree.js b/frappe/public/js/frappe/ui/tree.js index 93874b9cb9..6d97e17c82 100644 --- a/frappe/public/js/frappe/ui/tree.js +++ b/frappe/public/js/frappe/ui/tree.js @@ -16,38 +16,45 @@ frappe.ui.Tree = Class.extend({ parent_label: null, expandable: true }); - this.set_style(); + this.rootnode.toggle(); }, get_selected_node: function() { - return this.$w.find('.tree-link.selected').data('node'); + return this.selected_node; }, - set_style: function() { - frappe.dom.set_style("\ - .tree li { list-style: none; }\ - .tree ul { margin-top: 2px; }\ - .tree-link { cursor: pointer; }\ - .tree-hover { background-color: #eee; min-height: 20px; border: 1px solid #ddd; }\ - ") + toggle: function() { + this.get_selected_node().toggle(); } }) frappe.ui.TreeNode = Class.extend({ init: function(args) { - var me = this; $.extend(this, args); this.loaded = false; this.expanded = false; this.tree.nodes[this.label] = this; if(this.parent_label) this.parent_node = this.tree.nodes[this.parent_label]; + + this.make(); + this.setup_drag_drop(); + + if(this.tree.onrender) { + this.tree.onrender(this); + } + }, + make: function() { + var me = this; this.$a = $('') .click(function() { - if(me.expandable && me.tree.method && !me.loaded) { - me.load() - } else { - me.selectnode(); + me.tree.selected_node = me; + if(me.tree.toolbar) { + me.show_toolbar(); + } + if(me.toggle_on_click) { + me.toggle(); } - if(me.tree.click) me.tree.click(this); + if(me.tree.click) + me.tree.click(this); }) .bind('reload', function() { me.reload(); }) .data('label', this.label) @@ -55,8 +62,53 @@ frappe.ui.TreeNode = Class.extend({ .appendTo(this.parent); this.$ul = $('