[toolbars] [design] commonified into common toolbar

core/page/update_manager/update_manager.js

@@ -13,7 +13,7 @@ wn.UpdateThisApp = Class.extend({
 		this.wrapper = wrapper;
 		this.body = $(this.wrapper).find(".layout-main");
 		this.wrapper.appframe.add_home_breadcrumb();
-		this.wrapper.appframe.add_module_breadcrumb("Setup");
+		this.wrapper.appframe.add_module_icon("Setup");
 		this.wrapper.appframe.add_breadcrumb("icon-magnet");
 		this.make();
 	},

public/js/legacy/widgets/form/form_header.js

@@ -34,7 +34,7 @@ _f.FrmHeader = Class.extend({
 		this.frm = frm;
 		
 		this.appframe.add_home_breadcrumb();
-		this.appframe.add_module_breadcrumb(frm.meta.module)
+		this.appframe.add_module_icon(frm.meta.module)
 		this.appframe.set_views_for(frm.meta.name, "form");
 		
 		if(!frm.meta.issingle) {

public/js/legacy/widgets/form/print_format.js

@@ -380,7 +380,6 @@ $.extend(_p, {
 			+ footer;
 			
 			
-		console.log(finished)
 		// replace relative links by absolute links
 		var prefix = window.location.href.split("app.html")[0]
 		// find unique matches

public/js/wn/form/layout.js

@@ -26,6 +26,7 @@ wn.ui.form.Layout = Class.extend({
 				case "Table":
 				case "Text Editor":
 				case "Code":
+				case "HTML":
 					var fieldwrapper = $('<div class="col-span-12">').appendTo(me.section);
 					me.make_field(df, fieldwrapper);
 					break;

public/js/wn/form/toolbar.js

@@ -27,7 +27,7 @@ wn.ui.form.Toolbar = Class.extend({
 
 		// New
 		if(p[CREATE]) {
-			this.appframe.add_dropdown_button("File", "New", function() { 
+			this.appframe.add_dropdown_button("File", "New " + me.frm.doctype, function() { 
 				new_doc(me.frm.doctype);}, 'icon-plus');
 		}
 

public/js/wn/ui/appframe.js

@@ -18,9 +18,10 @@ wn.ui.AppFrame = Class.extend({
 		</div>\
 		<div class="toolbar-area"></div -->\
 		<div class="title-button-area pull-right" style="margin-top: 10px;"></div>\
-		<div class="title-area"></div>\
-		<div class="sub-title-area muted small" \
-			style="margin-top: -15px; margin-bottom: 5px;"></div>\
+		<div class="title-area"><h3 style="display: inline-block">\
+			<span class="title-icon"></span><span class="title-text"></span></h3></div>\
+		<div class="sub-title-area text-muted small" \
+			style="margin-top: -10px;"></div>\
 		<hr>\
 		').appendTo(this.$w);
 		
@@ -38,8 +39,7 @@ wn.ui.AppFrame = Class.extend({
 	set_title: function(txt, full_text) {
 		this.title = txt;
 		this.$w.find(".breadcrumb .appframe-title").html(txt);
-		$("<h3 style='display: inline-block'>")
-			.html(txt).appendTo(this.get_title_area().empty());
+		this.$w.find(".title-text").html(txt);
 	},
 	set_sub_title: function(txt) {
 		this.$w.find(".sub-title-area").html(txt);
@@ -70,11 +70,16 @@ wn.ui.AppFrame = Class.extend({
 	add_list_breadcrumb: function(doctype) {
 		this.add_breadcrumb("icon-list", "List/" + encodeURIComponent(doctype), doctype + " List");
 	},
-	add_module_breadcrumb: function(module) {
+	add_module_icon: function(module) {
 		var module_info = wn.modules[module];
 		if(module_info) {
-			this.add_breadcrumb(module_info.icon, module_info.link,
-				module_info.label || module);
+			this.$w.find(".title-icon").html('<i class="'
+				+module_info.icon+' text-muted"></i> ')
+				.css({"cursor":"pointer"})
+				.attr("module-name", module)
+				.click(function() {
+					wn.set_route(wn.modules[$(this).attr("module-name")].link);
+				});
 		}
 	},
 	
@@ -153,6 +158,7 @@ wn.ui.AppFrame = Class.extend({
 
 	clear_buttons: function() {
 		this.toolbar && this.toolbar.empty();
+		$(".custom-menu").remove();
 	},
 
 	add_toolbar: function() {
@@ -201,8 +207,13 @@ wn.ui.AppFrame = Class.extend({
 		
 	},
 	add_dropdown_button: function(parent, label, click, icon) {
-		var menu = this.buttons[parent].find(".dropdown-menu");
-		return $('<li><a><i class="'+icon+'"></i> '+label+'</a></li>')
+		var menu = $("#navbar-" + parent.toLowerCase());
+		if(!menu.find(".divider").length) {
+			$('<li class="divider custom-menu"></li>').appendTo(menu);
+		}
+
+		return $('<li class="custom-menu"><a><i class="'
+			+icon+'"></i> '+label+'</a></li>')
 			.appendTo(menu)
 			.find("a")
 			.click(function() {

public/js/wn/ui/toolbar/bookmarks.js

@@ -4,7 +4,7 @@ wn.ui.toolbar.Bookmarks = Class.extend({
 		$('.navbar .nav:first').append('<li class="dropdown">\
 			<a class="dropdown-toggle" data-toggle="dropdown" href="#" \
 				title="'+wn._("Bookmarks")+'"\
-				onclick="return false;"><i class="icon-star"></i></a>\
+				onclick="return false;">Bookmarks</a>\
 			<ul class="dropdown-menu" id="toolbar-bookmarks">\
 				<li class="divider"></li>\
 				<li><a href="#" id="add-bookmark-link"><i class="icon-plus"></i> '

public/js/wn/ui/toolbar/recent.js

@@ -25,8 +25,8 @@ wn.ui.toolbar.RecentDocs = Class.extend({
 	init:function() {
 		$('.navbar .nav:first').append('<li class="dropdown">\
 			<a class="dropdown-toggle" data-toggle="dropdown" href="#" \
-				title="'+wn._("Recent")+'"\
-				onclick="return false;"><i class="icon-arrow-left"></i></a>\
+				title="'+wn._("History")+'"\
+				onclick="return false;">History</i></a>\
 			<ul class="dropdown-menu" id="toolbar-recent"></ul>\
 		</li>');
 		this.setup();

public/js/wn/ui/toolbar/toolbar.js

@@ -24,8 +24,10 @@
 wn.ui.toolbar.Toolbar = Class.extend({
 	init: function() {
 		this.make();
-		this.make_home();
-		this.make_document();
+		this.make_erpnext();
+		this.make_file();
+		//this.make_view();
+		//this.make_actions();
 		wn.ui.toolbar.recent = new wn.ui.toolbar.RecentDocs();
 		wn.ui.toolbar.bookmarks = new wn.ui.toolbar.Bookmarks();
 		this.make_tools();
@@ -34,6 +36,11 @@ wn.ui.toolbar.Toolbar = Class.extend({
 		$('.dropdown-toggle').dropdown();
 		
 		$(document).trigger('toolbar_setup');
+		
+		// clear all custom menus on page change
+		$(document).on("page-change", function() {
+			$("header .navbar .custom-menu").remove();
+		})
 	},
 	make: function() {
 		$('header').append('<div class="navbar navbar-fixed-top navbar-inverse">\
@@ -43,7 +50,6 @@ wn.ui.toolbar.Toolbar = Class.extend({
 					<span class="icon-bar"></span>\
 					<span class="icon-bar"></span>\
 				</button>\
-				<a class="navbar-brand"></a>\
 				<div class="nav-collapse collapse navbar-responsive-collapse">\
 					<ul class="nav">\
 					</ul>\
@@ -64,21 +70,58 @@ wn.ui.toolbar.Toolbar = Class.extend({
 		$('.navbar-brand').attr('href', "#");
 	},
 
-	make_document: function() {
+	make_erpnext: function() {
+		$('<li class="dropdown">\
+			<a class="dropdown-toggle" data-toggle="dropdown" href="#"\
+				title="'+wn._("ERPNext")+'"\
+				onclick="return false;"><b>ERPNext</b></a>\
+			<ul class="dropdown-menu modules">\
+			</ul>\
+			</li>').prependTo('.navbar .nav:first');
+
+		var modules_list = wn.user.get_desktop_items().sort();
+
+		var _get_list_item = function(m) {
+			args = {
+				module: m,
+				module_page: wn.modules[m].link,
+				module_label: wn._(wn.modules[m].label || m),
+				icon: wn.modules[m].icon
+			}
+
+			return repl('<li><a href="#!%(module_page)s" \
+				data-module="%(module)s"><i class="%(icon)s" style="display: inline-block; \
+					width: 21px; margin-top: -2px; margin-left: -7px;"></i>\
+				%(module_label)s</a></li>', args);
+		}
+
+		// add to dropdown
+		$.each(modules_list,function(i, m) {
+			if(m!='Setup') {
+				$('.navbar .modules').append(_get_list_item(m));			
+			}
+		})
+
+		// setup for system manager
+		if(user_roles.indexOf("System Manager")!=-1) {
+			$('.navbar .modules').append('<li class="divider">' + _get_list_item("Setup"));
+		}
+	},
+	make_file: function() {
 		wn.ui.toolbar.new_dialog = new wn.ui.toolbar.NewDialog();
 		wn.ui.toolbar.search = new wn.ui.toolbar.Search();
 		wn.ui.toolbar.report = new wn.ui.toolbar.Report();
 		$('.navbar .nav:first').append('<li class="dropdown">\
 			<a class="dropdown-toggle" href="#"  data-toggle="dropdown"\
-				title="'+wn._("Documents")+'"\
-				onclick="return false;"><i class="icon-copy"></i></a>\
-			<ul class="dropdown-menu" id="toolbar-document">\
+				title="'+wn._("File")+'"\
+				onclick="return false;">File</a>\
+			<ul class="dropdown-menu" id="navbar-file">\
 				<li><a href="#" onclick="return wn.ui.toolbar.new_dialog.show();">\
-					<i class="icon-plus"></i> '+wn._('New')+'</a></li>\
+					<i class="icon-plus"></i> '+wn._('New')+'...</a></li>\
 				<li><a href="#" onclick="return wn.ui.toolbar.search.show();">\
-					<i class="icon-search"></i> '+wn._('Search')+'</a></li>\
+					<i class="icon-search"></i> '+wn._('Search')+'...</a></li>\
 				<li><a href="#" onclick="return wn.ui.toolbar.report.show();">\
-					<i class="icon-list"></i> '+wn._('Report')+'</a></li>\
+					<i class="icon-list"></i> '+wn._('Report')+'...</a></li>\
 			</ul>\
 		</li>');
 	},
@@ -87,7 +130,7 @@ wn.ui.toolbar.Toolbar = Class.extend({
 		$('.navbar .nav:first').append('<li class="dropdown">\
 			<a class="dropdown-toggle" data-toggle="dropdown" href="#" \
 				title="'+wn._("Tools")+'"\
-				onclick="return false;"><i class="icon-wrench"></i></a>\
+				onclick="return false;">Tools</a>\
 			<ul class="dropdown-menu" id="toolbar-tools">\
 				<li><a href="#" onclick="return wn.ui.toolbar.clear_cache();">'
 					+wn._('Clear Cache & Refresh')+'</a></li>\

public/js/wn/views/calendar.js

@@ -48,7 +48,7 @@ wn.views.Calendar = Class.extend({
 		var module = locals.DocType[this.doctype].module;
 		this.page.appframe.set_title(wn._("Calendar") + " - " + wn._(this.doctype));
 		this.page.appframe.add_home_breadcrumb()
-		this.page.appframe.add_module_breadcrumb(module)
+		this.page.appframe.add_module_icon(module)
 		this.page.appframe.add_breadcrumb("icon-calendar");
 
 		this.page.appframe.set_views_for(this.doctype, "calendar");

public/js/wn/views/container.js

@@ -57,6 +57,9 @@ wn.views.Container = Class.extend({
 			//$(this.page).fadeIn();
 			$(this.page).toggle(true);
 		}
+		
+		$(document).trigger("page-change");
+		
 		this.page._route = window.location.hash;
 		$(this.page).trigger('show');
 		scroll(0,0);				

public/js/wn/views/doclistview.js

@@ -67,7 +67,7 @@ wn.views.DocListView = wn.ui.Listing.extend({
 		
 		this.appframe.set_title(wn._(this.doctype) + " " + wn._("List"));
 		this.appframe.add_home_breadcrumb();
-		this.appframe.add_module_breadcrumb(module);
+		this.appframe.add_module_icon(module);
 		this.appframe.add_breadcrumb("icon-list");
 		this.appframe.set_views_for(this.doctype, "list");
 	},

public/js/wn/views/moduleview.js

@@ -27,7 +27,7 @@ wn.views.moduleview.ModuleView = Class.extend({
 			title: wn._(wn.modules[module].label || module)
 		});
 		wrapper.appframe.add_home_breadcrumb();
-		wrapper.appframe.add_breadcrumb(wn.modules[module].icon);
+		wrapper.appframe.add_module_icon(module);
 		this.wrapper = wrapper;
 		this.module = module;
 		this.make_body();
@@ -44,7 +44,7 @@ wn.views.moduleview.ModuleView = Class.extend({
 		</div>")
 
 		$(wrapper).on("click", ".badge-important", function() {
-			var doctype = $(this).parent().attr("data-doctype");
+			var doctype = $(this).parent().find("[data-doctype]").attr("data-doctype");
 			var condition = wn.model.open_count_conditions[doctype];
 			if(condition) {
 				wn.set_route("List", doctype, wn.utils.get_url_from_dict(condition));
@@ -58,34 +58,34 @@ wn.views.moduleview.ModuleView = Class.extend({
 	},
 	add_section: function(section) {
 		section._title = wn._(section.title);
-		var table = $(repl("<table class='table table-bordered'>\
-		<thead><tr>\
-			<th style='font-size: 120%;'><i class='%(icon)s'></i> %(_title)s</th></tr></thead>\
-		<tbody></tbody>\
-		</table>", section)).appendTo(section.right 
+		var list_group = $('<ul class="list-group">\
+			<li class="list-group-item">\
+				<h4 class="list-group-item-heading"><i class="'
+					+ section.icon+'"></i> '
+					+ wn._(section.title) +'</h4>\
+			</li>\
+		</ul>"').appendTo(section.right 
 			? $(this.wrapper).find(".side-section")
 			: $(this.wrapper).find(".main-section"));
-		section.table = table;
+		section.list_group = list_group;
 	},
 	add_item: function(item, section) {
 		if(!item.description) item.description = "";
 		if(item.count==null) item.count = "";
-		
-		$(repl("<tr><td><div class='row'>\
-			<span"+
+				
+		$(repl('<li class="list-group-item">\
+			<span' +
 				((item.doctype && item.description) 
 					? " data-doctype='"+item.doctype+"'" 
-					: "")
-				+" class='span"+
-				+ (item.description ? "2" : "5") + "'>%(link)s</span>"
+					: "") + ">%(link)s</span>"
 				+ (item.description 
-					? "<span class='help col-span-3'>%(description)s</span>" 
+					? " <span class='text-muted small'>%(description)s</span>" 
 					: "")
 			+ ((section.right || !item.doctype) 
 				? ''
-				: '<span data-doctype-count="%(doctype)s"></span>')
-			+ "</div></td></tr>", item))
-		.appendTo(section.table.find("tbody"));
+				: '<span data-doctype-count="%(doctype)s" style="margin-left: 17px;"></span>')
+			+ "</li>", item))
+		.appendTo(section.list_group);
 	},
 	render_static: function() {
 		// render sections
@@ -121,8 +121,8 @@ wn.views.moduleview.ModuleView = Class.extend({
 					|| !item.country)
 					me.add_item(item, section)
 			});
-			if(section.table.find("tr").length==1) {
-				section.table.toggle(false);
+			if(section.list_group.find("li").length==1) {
+				section.list_group.toggle(false);
 			}
 		});
 	},
@@ -192,8 +192,9 @@ wn.views.moduleview.ModuleView = Class.extend({
 
 						$.each(r.message.open_count, function(doctype, count) {
 							$(me.wrapper).find("[data-doctype='"+doctype+"']")
-								.append(" <span class='badge badge-important pull-right'\
-									style='cursor:pointer'>" + count + "</span>");
+								.parent()
+								.append(" <span class='badge badge-important'\
+									style='cursor:pointer; background-color: #b94a48'>" + count + "</span>");
 						})
 					}
 				}

public/js/wn/views/reportview.js

@@ -39,7 +39,7 @@ wn.views.ReportViewPage = Class.extend({
 		var module = locals.DocType[this.doctype].module;
 		this.page.appframe.set_title(wn._(this.doctype));
 		this.page.appframe.add_home_breadcrumb()
-		this.page.appframe.add_module_breadcrumb(module)
+		this.page.appframe.add_module_icon(module)
 		this.page.appframe.add_breadcrumb("icon-table");
 		this.page.appframe.set_views_for(this.doctype, "report");