[design] navbar, form grids

frappe/desk/page/activity/activity.js

@@ -7,7 +7,7 @@ frappe.pages['activity'].onload = function(wrapper) {
 		title: __("Activity"),
 		single_column: true
 	})
-	wrapper.appframe.add_module_icon("Activity");
+	frappe.add_breadcrumbs("Activity");
 
 	var list = new frappe.ui.Listing({
 		hide_refresh: true,

frappe/desk/page/messages/messages.js

@@ -24,7 +24,7 @@ frappe.pages.messages.onload = function(wrapper) {
 	</div>\
 	<div class="all-messages"></div><br>').appendTo($(wrapper).find('.layout-main-section'));
 
-	wrapper.appframe.add_module_icon("Messages");
+	frappe.add_breadcrumbs("Messages");
 
 	frappe.desk.pages.messages = new frappe.desk.pages.messages(wrapper);
 }

frappe/public/build.json

@@ -137,6 +137,7 @@
 		"public/js/frappe/ui/toolbar/recent.js",
 		"public/js/frappe/ui/toolbar/bookmarks.js",
 		"public/js/frappe/ui/toolbar/about.js",
+		"public/js/frappe/ui/toolbar/navbar.html",
 		"public/js/frappe/ui/toolbar/toolbar.js",
 		"public/js/frappe/ui/editor.js",
 
@@ -150,6 +151,7 @@
 		"public/js/frappe/form/script_manager.js",
 		"public/js/frappe/form/control.js",
 		"public/js/frappe/form/link_selector.js",
+		"public/js/frappe/form/grid_form.html",
 		"public/js/frappe/form/grid.js",
 		"public/js/frappe/form/linked_with.js",
 		"public/js/frappe/form/workflow.js",

frappe/public/css/appframe.css

@@ -12,6 +12,8 @@
 
 .appframe-titlebar {
 	border-bottom: 1px solid #d1d8dd;
+	padding-top: 10px;
+	padding-bottom: 10px;
 }
 
 /*.appframe-titlebar, .appframe-iconbar, .appframe-form, .appframe-primary-actions {
@@ -31,11 +33,6 @@
 	border-bottom: 1px solid #d1d8dd;
 }
 
-.titlebar-item {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
 .titlebar-item h3 {
 	display: inline-block;
 	white-space: nowrap;
@@ -66,7 +63,6 @@ h2.titlebar-left-item {
 .title-sub {
 	font-size: 50%;
 	color: #888;
-	margin-left: 34px;
 	margin-top: 4px;
 }
 

frappe/public/css/desk.css

@@ -18,6 +18,10 @@ a {
 	border-bottom: 1px solid #ebeff2;
 }
 
+.navbar-brand {
+	font-size: inherit;
+}
+
 a.disabled, a.disabled:hover {
 	color: #888;
 	cursor: default;
@@ -53,22 +57,6 @@ em.link-option {
 	}
 }
 
-/* freeze */
-
-div#freeze {
-	position: fixed;
-	display: none;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
-	background-color: #aaa;
-	opacity: 0.6;
-	z-index: 1;
-	text-align: center;
-}
-
-
 .app-page {
 	padding: 0px;
 	overflow: hidden;
@@ -104,7 +92,7 @@ div#freeze {
 }
 
 .list-row {
-	padding: 10px 15px 15px 15px;
+	padding: 7px 15px 10px 15px;
 	border-bottom: 1px solid #d1d8dd;
 }
 
@@ -115,6 +103,36 @@ div#freeze {
 	padding-top: 3px;
 }
 
+.list-filters {
+	background-color: #f7fafc;
+}
+
+.progress {
+	height: 10px;
+}
+
+.doclist-row .progress {
+	margin-top: 12px;
+}
+
+.filterable {
+	cursor: pointer;
+}
+
+.doclist-row .label {
+	margin-right: 8px;
+}
+
+.list-info-row {
+	float: left;
+	margin-top: -7px;
+}
+
+.list-row-right {
+	margin-top: 8px;
+	margin-bottom: -8px;
+}
+
 .side-panel {
 	border-bottom: 1px solid #d1d8dd;
 	margin: 0px -15px;
@@ -214,38 +232,6 @@ div#freeze {
 	font-weight: bold;
 }
 
-/* list */
-
-.list-filters {
-	background-color: #f7fafc;
-}
-
-.progress {
-	height: 10px;
-}
-
-.doclist-row .progress {
-	margin-top: 12px;
-}
-
-.filterable {
-	cursor: pointer;
-}
-
-.doclist-row .label {
-	margin-right: 8px;
-}
-
-.list-info-row {
-	float: left;
-	margin-top: -5px;
-}
-
-.list-row-right {
-	margin-top: 8px;
-	margin-bottom: -8px;
-}
-
 /* module */
 
 .module-item-progress {
@@ -397,27 +383,42 @@ ul.linked-with-list li {
 }
 
 .grid-heading-row {
-	padding: 8px 15px;
 	border-bottom: 1px solid #d1d8dd;
 	background-color: #f7fafc;
 	font-weight: bold;
 }
 
-.rows .grid-row .divider {
-	padding-bottom: 5px;
-	margin-bottom: 5px;
-	margin-top: 8px;
+.grid-row {
+	padding: 10px 15px;
 	border-bottom: 1px solid #d1d8dd;
 }
 
-.rows .grid-row .data-row, .rows .grid-row .panel-heading {
+.grid-row:last-child {
+	border: none;
+}
+
+.rows .grid-row .data-row, .rows .grid-row .grid-footer-toolbar, .grid-form-heading {
 	cursor: pointer;
 }
 
-.panel-body {
+.data-row.row {
+	margin: 0px;
+}
+
+.grid-body {
 	background-color: #fff;
 }
 
+.grid-footer {
+	padding: 10px 15px;
+	border-top: 1px solid #d1d8dd;
+}
+
+.grid-empty {
+	padding: 10px 15px;
+	color: #d1d8dd;
+}
+
 .grid-static-col {
 	max-height: 200px;
 	overflow: hidden;
@@ -434,10 +435,6 @@ ul.linked-with-list li {
 	margin-left: 15px;
 }
 
-.grid-row .panel {
-	background-color: #fffff8;
-}
-
 .grid-row td {
 	vertical-align: top;
 }
@@ -446,6 +443,24 @@ ul.linked-with-list li {
 	margin-bottom: 5px;
 }
 
+.form-in-grid {
+	margin: -10px -15px;
+	z-index: 1021;
+	position: relative;
+	background-color: white;
+}
+
+.grid-form-heading {
+	padding: 10px 15px;
+	font-size: 120%;
+	border-bottom: 1px solid #d1d8dd;
+}
+
+.grid-footer-toolbar {
+	padding: 10px 15px;
+	border-top: 1px solid #d1d8dd;
+}
+
 /* form footer */
 
 .form-footer {
@@ -567,3 +582,17 @@ ul.linked-with-list li {
 	  margin-left: 2px;
 	}
 }
+
+#freeze {
+	background-color: #557698;
+	opacity: 0.2;
+	z-index: 1020;
+}
+
+kbd {
+	color: inherit;
+	background-color: #F0F4F7;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+
+}

frappe/public/js/frappe/dom.js

@@ -62,7 +62,14 @@ frappe.dom = {
 	freeze: function() {
 		// blur
 		if(!$('#freeze').length) {
-			$("<div id='freeze'>").appendTo("#body_div").css('opacity', 0.6);
+			$("<div id='freeze' class='modal-backdrop'>")
+				.on("click", function() {
+					if (cur_frm && cur_frm.cur_grid) {
+						cur_frm.cur_grid.toggle_view();
+						return false;
+					}
+				})
+				.appendTo("#body_div");
 		}
 		$('#freeze').toggle(true);
 		frappe.dom.freeze_count++;

frappe/public/js/frappe/form/form_sidebar.html

@@ -7,7 +7,6 @@
     </div>
     <div class="sidebar-section">
         <ul class="standard-actions list-unstyled">
-            <li><a href="#List/{%= doctype %}">{%= __("View List") %}</a></li>
             <li data-perm="{%= doctype %}::allow_print">
                 <a onclick="cur_frm.print_doc()">{%= __("Print") %}</a></li>
             <li>

frappe/public/js/frappe/form/grid.js

@@ -19,8 +19,9 @@ frappe.ui.form.Grid = Class.extend({
 		this.wrapper = $('<div>\
 		<div class="form-grid">\
 			<div class="grid-heading-row"></div>\
-			<div class="panel-body" style="padding-top: 7px; padding-bottom: 7px">\
+			<div class="grid-body">\
 				<div class="rows"></div>\
+				<div class="grid-empty text-center hide">'+__("No Data")+'</div>\
 				<div class="small grid-footer text-center">\
 					<a href="#" class="grid-add-row" style="margin-left: 10px;">+ '
 						+__("Add new row")+'.</a>\
@@ -89,9 +90,14 @@ frappe.ui.form.Grid = Class.extend({
 				this.grid_rows_by_docname[d.name] = grid_row;
 			}
 
-			this.wrapper.find(".grid-add-row, .grid-add-multiple-rows").toggle(this.can_add_rows());
+			this.wrapper.find(".grid-empty").toggleClass("hide", !!data.length);
+
 			if(this.is_editable()) {
+				this.wrapper.find(".grid-footer").toggle(true);
+				this.wrapper.find(".grid-add-row, .grid-add-multiple-rows").toggle(!this.cannot_add_rows);
 				this.make_sortable($rows);
+			} else {
+				this.wrapper.find(".grid-footer").toggle(false);
 			}
 
 			this.last_display_status = this.display_status;
@@ -118,7 +124,7 @@ frappe.ui.form.Grid = Class.extend({
 	make_sortable: function($rows) {
 		var me =this;
 		$rows.sortable({
-			handle: ".data-row, .panel-heading",
+			handle: ".data-row, .grid-form-heading",
 			helper: 'clone',
 			update: function(event, ui) {
 				me.frm.doc[me.df.fieldname] = [];
@@ -185,9 +191,6 @@ frappe.ui.form.Grid = Class.extend({
 	is_editable: function() {
 		return this.display_status=="Write" && !this.static_rows
 	},
-	can_add_rows: function() {
-		return this.is_editable() && !this.cannot_add_rows
-	},
 	set_multiple_add: function(link, qty) {
 		if(this.multiple_set) return;
 		var me = this;
@@ -211,20 +214,17 @@ frappe.ui.form.Grid = Class.extend({
 frappe.ui.form.GridRow = Class.extend({
 	init: function(opts) {
 		$.extend(this, opts);
-		this.show = false;
 		this.make();
 	},
 	make: function() {
 		var me = this;
 		this.wrapper = $('<div class="grid-row"></div>').appendTo(this.parent).data("grid_row", this);
-		this.row = $('<div class="data-row"></div>').appendTo(this.wrapper)
+		this.row = $('<div class="data-row row"></div>').appendTo(this.wrapper)
 			.on("click", function() {
 				me.toggle_view();
 				return false;
 			});
 
-		this.divider = $('<div class="divider row"></div>').appendTo(this.wrapper);
-
 		this.set_row_index();
 		this.make_static_display();
 		if(this.doc) {
@@ -235,17 +235,19 @@ frappe.ui.form.GridRow = Class.extend({
 		if(this.doc) {
 			this.wrapper
 				.attr("data-idx", this.doc.idx)
-				.find(".row-index").html(this.doc.idx)
+				.find(".row-index, .grid-form-row-index").html(this.doc.idx)
 		}
 	},
 	remove: function() {
 		if(this.grid.is_editable()) {
-			var me = this;
-			me.wrapper.toggle(false);
-			frappe.model.clear_doc(me.doc.doctype, me.doc.name);
-			me.frm.script_manager.trigger(me.grid.df.fieldname + "_remove", me.doc.doctype, me.doc.name);
-			me.frm.dirty();
-			me.grid.refresh();
+			if(this.get_open_form()) {
+				this.hide_form();
+			}
+			this.wrapper.toggle(false);
+			frappe.model.clear_doc(this.doc.doctype, this.doc.name);
+			this.frm.script_manager.trigger(this.grid.df.fieldname + "_remove", this.doc.doctype, this.doc.name);
+			this.frm.dirty();
+			this.grid.refresh();
 		}
 	},
 	insert: function(show) {
@@ -262,7 +264,7 @@ frappe.ui.form.GridRow = Class.extend({
 		this.make_static_display();
 
 		// refersh form fields
-		if(this.show) {
+		if(this.get_open_form()) {
 			this.layout.refresh(this.doc);
 		}
 	},
@@ -357,18 +359,19 @@ frappe.ui.form.GridRow = Class.extend({
 			passes++;
 		}
 	},
+	get_open_form: function() {
+		return $(".grid-row-open").data("grid_row");
+	},
 	toggle_view: function(show, callback) {
 		if(!this.doc) return this;
 
 		this.doc = locals[this.doc.doctype][this.doc.name];
 		// hide other
-		var open_row = $(".grid-row-open").data("grid_row");
+		var open_row = this.get_open_form();
 		this.fields = [];
 		this.fields_dict = {};
 
-		this.show = show===undefined ?
-			show = !this.show :
-			show
+		if (show===undefined) show = !!!open_row;
 
 		// call blur
 		document.activeElement && document.activeElement.blur()
@@ -376,7 +379,7 @@ frappe.ui.form.GridRow = Class.extend({
 		if(show && open_row) {
 			if(open_row==this) {
 				// already open, do nothing
-				callback();
+				callback && callback();
 				return;
 			} else {
 				// close other views
@@ -384,36 +387,46 @@ frappe.ui.form.GridRow = Class.extend({
 			}
 		}
 
-		this.wrapper.toggleClass("grid-row-open", this.show);
+		this.wrapper.toggleClass("grid-row-open", show);
 
-		if(this.show) {
-			if(!this.form_panel) {
-				this.form_panel = $('<div class="panel panel-warning" style="display: none;"></div>')
-					.insertBefore(this.divider);
-			}
-			this.render_form();
-			this.row.toggle(false);
-			this.form_panel.toggle(true);
-			if(this.frm.doc.docstatus===0) {
-				var first = this.form_area.find(":input:first");
-				if(first.length && first.attr("data-fieldtype")!="Date") {
-					try {
-						first.get(0).focus();
-					} catch(e) {
-						console.log("Dialog: unable to focus on first input: " + e);
-					}
-				}
-			}
+		if(show) {
+			this.show_form();
 		} else {
-			if(this.form_panel)
-				this.form_panel.toggle(false);
-			this.row.toggle(true);
-			this.make_static_display();
+			this.hide_form();
 		}
 		callback && callback();
 
 		return this;
 	},
+	show_form: function() {
+		if(!this.form_panel) {
+			this.form_panel = $('<div class="form-in-grid" style="display: none;"></div>')
+				.appendTo(this.wrapper);
+		}
+		this.render_form();
+		this.row.toggle(false);
+		this.form_panel.toggle(true);
+		frappe.dom.freeze();
+		if(this.frm.doc.docstatus===0) {
+			var first = this.form_area.find(":input:first");
+			if(first.length && first.attr("data-fieldtype")!="Date") {
+				try {
+					first.get(0).focus();
+				} catch(e) {
+					console.log("Dialog: unable to focus on first input: " + e);
+				}
+			}
+		}
+		cur_frm.cur_grid = this;
+	},
+	hide_form: function() {
+		if(this.form_panel)
+			this.form_panel.toggle(false);
+		frappe.dom.unfreeze();
+		this.row.toggle(true);
+		this.make_static_display();
+		cur_frm.cur_grid = null;
+	},
 	open_prev: function() {
 		if(this.grid.grid_rows[this.doc.idx-2]) {
 			this.grid.grid_rows[this.doc.idx-2].toggle_view(true);
@@ -460,36 +473,7 @@ frappe.ui.form.GridRow = Class.extend({
 	},
 	make_form: function() {
 		if(!this.form_area) {
-			$('<div class="panel-heading">\
-				<div class="toolbar">\
-					<span class="panel-title">' + __("Editing Row") + ' #<span class="row-index"></span></span>\
-					<span class="text-success pull-right grid-toggle-row" \
-						title="'+__("Close")+'"\
-						style="margin-left: 7px;">\
-						<i class="icon-chevron-up"></i></span>\
-					<span class="pull-right grid-insert-row" \
-						title="'+__("Insert Row")+'"\
-						style="margin-left: 7px;">\
-						<i class="icon-plus grid-insert-row"></i></span>\
-					<span class="pull-right grid-delete-row"\
-						title="'+__("Delete Row")+'"\
-						><i class="icon-trash grid-delete-row"></i></span>\
-				</div>\
-			</div>\
-			<div class="panel-body">\
-				<div class="form-area"></div>\
-				<div class="toolbar footer-toolbar" style="margin-top: 15px">\
-					<span class="text-muted"><a href="#" class="shortcuts"> <i class="icon-keyboard"></i>' + __("Shortcuts") + '</a></span>\
-					<span class="text-success pull-right grid-toggle-row" \
-						title="'+__("Close")+'"\
-						style="margin-left: 7px; cursor: pointer;">\
-						<i class="icon-chevron-up"></i></span>\
-					<span class="pull-right grid-append-row" \
-						title="'+__("Insert Below")+'"\
-						style="margin-left: 7px; cursor: pointer;">\
-						<i class="icon-plus"></i></span>\
-				</div>\
-			</div>').appendTo(this.form_panel);
+			$(frappe.render(frappe.templates.grid_form, {grid:this})).appendTo(this.form_panel);
 			this.form_area = this.wrapper.find(".form-area");
 			this.set_row_index();
 			this.set_form_events();
@@ -507,16 +491,10 @@ frappe.ui.form.GridRow = Class.extend({
 				me.grid.add_new_row(me.doc.idx+1, null, true);
 				return false;
 		})
-		this.form_panel.find(".panel-heading, .grid-toggle-row").on("click", function() {
+		this.form_panel.find(".grid-form-heading, .grid-footer-toolbar").on("click", function() {
 				me.toggle_view();
 				return false;
 			});
-		this.form_panel.find(".shortcuts").on("click", function() {
-			msgprint(__('Move Up: {0}', ['Ctrl+<i class="icon-arrow-up"></i>']));
-			msgprint(__('Move Down: {0}', ['Ctrl+<i class="icon-arrow-down"></i>']));
-			msgprint(__('Close: {0}', ['Esc']));
-			return false;
-		})
 	},
 	set_data: function() {
 		this.wrapper.data({

frappe/public/js/frappe/form/grid_form.html

@@ -0,0 +1,22 @@
+<div class="grid-form-heading">
+	<div class="toolbar">
+		<span class="panel-title">
+            {%= __("Editing Row") %} #<span class="grid-form-row-index"></span></span>
+		<button class="btn btn-default btn-xs pull-right grid-insert-row"
+			style="margin-left: 7px;">
+			{%= __("Insert Above") %}</button>
+		<button class="btn btn-danger btn-xs pull-right grid-delete-row">
+			{%= __("Remove") %}</button>
+	</div>
+</div>
+<div class="grid-form-body">
+	<div class="form-area"></div>
+	<div class="grid-footer-toolbar">
+		<span class="text-muted">
+            <kbd>{%= __("Ctrl + Up") %}</kbd>, <kbd>{%= __("Ctrl + Down") %}</kbd>, <kbd>{%= __("ESC") %}</kbd>
+        </span>
+		<button class="btn btn-default btn-xs pull-right grid-append-row"
+			style="margin-left: 7px;">
+			{%= __("Insert Below") %}</button>
+	</div>
+</div>

frappe/public/js/frappe/form/toolbar.js

@@ -7,7 +7,7 @@ frappe.ui.form.Toolbar = Class.extend({
 		$.extend(this, opts);
 		this.make();
 		this.add_update_button_on_dirty();
-		this.appframe.add_module_icon(this.frm.meta.module, this.frm.doctype);
+		frappe.add_breadcrumbs(this.frm.meta.module, this.frm.doctype)
 	},
 	make: function() {
 		this.set_title();

frappe/public/js/frappe/list/doclistview.js

@@ -73,7 +73,7 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 		var module = locals.DocType[this.doctype].module;
 
 		this.appframe.set_title(__("{0} List", [__(this.doctype)]));
-		this.appframe.add_module_icon(module, this.doctype, null, true);
+		frappe.add_breadcrumbs(module);
 		this.appframe.set_title_left(function() {
 			frappe.set_route(frappe.listview_parent_route[me.doctype]
 				|| frappe.get_module(module).link);

frappe/public/js/frappe/list/list_item_row.html

@@ -17,7 +17,7 @@
     </div>
 </div>
 <div class="text-muted list-info-row small"
-    style="padding-left: {% if(data._checkbox) { %}54{% } else { %}31{% } %}px;">
+    style="padding-left: {% if(data._checkbox) { %}55{% } else { %}31{% } %}px;">
     {% if (data._full_title !== data.name) { %}
     <a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">#{%= data.name %}</a>
     {% } %}

frappe/public/js/frappe/model/model.js

@@ -157,6 +157,16 @@ $.extend(frappe.model, {
 		return locals.DocType[doctype] && locals.DocType[doctype].is_submittable;
 	},
 
+	is_table: function(doctype) {
+		if(!doctype) return false;
+		return locals.DocType[doctype] && locals.DocType[doctype].istable;
+	},
+
+	is_single: function(doctype) {
+		if(!doctype) return false;
+		return locals.DocType[doctype] && locals.DocType[doctype].issingle;
+	},
+
 	can_import: function(doctype, frm) {
 		// system manager can always import
 		if(user_roles.indexOf("System Manager")!==-1) return true;

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -0,0 +1,62 @@
+<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="padding: 3px 0px">
+	<div class="container">
+		<div class="navbar-header">
+			<button type="button" class="navbar-toggle" data-toggle="collapse"
+				data-target=".navbar-responsive-collapse">
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand" href="#">Home</a>
+		</div>
+		<div class="collapse navbar-collapse navbar-responsive-collapse">
+			<ul class="nav navbar-nav navbar-left" id="navbar-breadcrumbs">
+			</ul>
+			<ul class="nav navbar-nav navbar-right">
+				<li class="dropdown">
+					<a class="dropdown-toggle" data-toggle="dropdown" href="#"
+						onclick="return false;">
+                    <img src="{%= frappe.user_info().image %}"
+                        style="max-width: 24px; max-height: 24px; margin-top: -4px;
+                            margin-right: 5px; border-radius: 2px;">
+                    <span>{%= frappe.user.full_name() %}</span>
+                    <b class="caret"></b></a>
+					<ul class="dropdown-menu" id="toolbar-user">
+                        <li><a href="#Form/User/{%= encodeURIComponent(user) %}">
+                            {%= __("My Settings") %}</a></li>
+        				<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
+                            {%= __("Reload") %}</a></li>
+            			<li><a href="/index" target="_blank">
+                            {%= __("View Website") %}</a></li>
+                        <li class="divider"></li>
+        				<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
+        					{%= __("About") %}</a></li>
+        				<li><a href="https://frappe.io" target="_blank" data-link="docs">
+        					{%= __("Documentation") %}</a></li>
+        				<li><a href="https://discuss.frappe.io" target="_blank">
+        					{%= __("Forums") %}</a></li>
+        				<li><a href="https://github.com/frappe/erpnext/issues" target="_blank">
+        					{%= __("Report an Issue") %}</a></li>
+                        <li class="divider"></li>
+            			<li><a href="#" onclick="return frappe.app.logout();">
+                            {%= __("Logout") %}</a></li>
+                    </ul>
+				</li>
+                <li class="dropdown">
+        			<a class="dropdown-toggle" href="#" data-toggle="dropdown"
+        				title="{%= __("Unread Messages") %}"
+        				onclick="return false;"><span class="navbar-new-comments">0</span></a>
+        			<ul class="dropdown-menu" id="navbar-notification">
+        			</ul>
+	            </li>
+            </ul>
+	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
+	          <div class="form-group form-group-sm">
+	            <input id="navbar-search" type="text" class="form-control"
+					placeholder="{%= __("Search or type a command") %}"
+                    style="margin-top: 3px; width: 200px;">
+	          </div>
+	        </form>
+		</div>
+	</div>
+</div>

frappe/public/js/frappe/ui/toolbar/search.js

@@ -94,7 +94,6 @@ frappe.search = {
 		});
 	},
 	find: function(list, txt, process) {
-		var ret = null;
 		$.each(list, function(i, item) {
 			_item = __(item).toLowerCase().replace(/-/g, " ");
 			if(txt===_item || _item.indexOf(txt) !== -1) {
@@ -103,7 +102,6 @@ frappe.search = {
 				frappe.search.options.push(option);
 			}
 		});
-		return ret;
 	}
 }
 
@@ -123,6 +121,20 @@ frappe.search.verbs = [
 		}
 	},
 
+	// recent
+	function(txt) {
+		for(var doctype in locals) {
+			if(doctype[0]!==":" && !frappe.model.is_table(doctype)) {
+				var ret = frappe.search.find(keys(locals[doctype]), txt, function(match) {
+					return {
+						value: __(doctype) + " <b>" + match + "</b>",
+						route: ["Form", doctype, match]
+					}
+				});
+			}
+		}
+	},
+
 	// new doc
 	function(txt) {
 		var ret = false;

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -4,14 +4,11 @@
 
 frappe.ui.toolbar.Toolbar = Class.extend({
 	init: function() {
-		this.make();
-		//this.make_modules();
-		this.make_file();
-		this.make_history();
-		this.make_bookmarks();
-		this.make_help();
-		this.make_user_menu();
-		this.make_notification();
+		$('header').append(frappe.render(frappe.templates.navbar, {}));
+
+		$(document).on("notification-update", function() {
+			frappe.ui.toolbar.update_notifications();
+		});
 
 		$('.dropdown-toggle').dropdown();
 
@@ -24,134 +21,7 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 
 		frappe.search.setup();
 	},
-	make: function() {
-		$('header').append('<div class="navbar navbar-default navbar-fixed-top" role="navigation" style="padding: 3px 0px">\
-			<div class="container">\
-				<div class="navbar-header">\
-					<button type="button" class="navbar-toggle" data-toggle="collapse" \
-						data-target=".navbar-responsive-collapse">\
-						<span class="icon-bar"></span>\
-						<span class="icon-bar"></span>\
-						<span class="icon-bar"></span>\
-					</button>\
-					<a class="navbar-brand" href="#"><i class="icon-home"></i></a>\
-				</div>\
-				<div class="collapse navbar-collapse navbar-responsive-collapse">\
-					<ul class="nav navbar-nav navbar-left">\
-					</ul>\
-			        <form class="navbar-form navbar-left" role="search" onsubmit="return false;">\
-			          <div class="form-group">\
-			            <input id="navbar-search" type="text" class="form-control small"\
-							placeholder="' + __("Search or type a command") + '" \
-							style="padding: 2px 6px; height: 24px; margin-top: 5px; \
-								margin-left: 10px; background-color: #ddd; \
-								min-width: 220px; font-size: 85%;\
-								border-radius: 10px;">\
-			          </div>\
-			        </form>\
-					<img src="assets/frappe/images/ui/spinner.gif" id="spinner"/>\
-					<ul class="nav navbar-nav navbar-right">\
-						<li class="dropdown">\
-							<a class="dropdown-toggle" data-toggle="dropdown" href="#" \
-								onclick="return false;">\
-								<span id="toolbar-user-name"></span><b class="caret"></b></a>\
-							<ul class="dropdown-menu" id="toolbar-user">\
-							</ul>\
-						</li>\
-					</ul>\
-				</div>\
-			</div>\
-			</div>');
-	},
-	make_home: function() {
-		$('.navbar-brand').attr('href', "#");
-	},
-
-	make_notification: function() {
-		$('.navbar .navbar-right').append('<li class="dropdown">\
-			<a class="dropdown-toggl" href="#"  data-toggle="dropdown"\
-				title="'+__("Unread Messages")+'"\
-				onclick="return false;"><span class="navbar-new-comments">0</span></a>\
-			<ul class="dropdown-menu" id="navbar-notification">\
-			</ul>\
-		</li>');
-
-		$(document).on("notification-update", function() {
-			frappe.ui.toolbar.update_notifications();
-		})
-	},
-
-	make_file: function() {
-		frappe.ui.toolbar.new_dialog = new frappe.ui.toolbar.NewDialog();
-		frappe.ui.toolbar.search = new frappe.ui.toolbar.Search();
-		frappe.ui.toolbar.report = new frappe.ui.toolbar.Report();
-		// $('.navbar .nav:first').append('<li class="dropdown">\
-		// 	<a onclick="return frappe.ui.toolbar.search.show();"><i class="icon-search"></i><li>');
-		$('.navbar .nav:first').append('<li class="dropdown">\
-			<a class="dropdown-toggle" href="#"  data-toggle="dropdown"\
-				title="'+__("File")+'"\
-				onclick="return false;">'+__("File")+'</a>\
-			<ul class="dropdown-menu" id="navbar-file">\
-				<li><a href="#" onclick="return frappe.ui.toolbar.new_dialog.show();">\
-					<i class="icon-fixed-width icon-plus"></i> '+__('New')+'...</a></li>\
-				<li><a href="#" onclick="return frappe.ui.toolbar.report.show();">\
-					<i class="icon-fixed-width icon-list"></i> '+__('Report')+'...</a></li>\
-			</ul>\
-		</li>');
-	},
 
-	make_history: function() {
-		frappe.ui.toolbar.recent = new frappe.ui.toolbar.RecentDocs();
-	},
-
-	make_bookmarks: function() {
-		frappe.ui.toolbar.bookmarks = new frappe.ui.toolbar.Bookmarks();
-	},
-
-	make_help: function() {
-		$('.navbar .nav:first').append('<li class="dropdown">\
-			<a class="dropdown-toggle" data-toggle="dropdown" href="#" \
-				title="'+__("Help")+'"\
-				onclick="return false;">'+__("Help")+'</a>\
-			<ul class="dropdown-menu" id="toolbar-help"> \
-				<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">\
-					<i class="icon-fixed-width icon-info-sign"></i> '
-					+__('About')+'</a></li>\
-				<li><a href="https://frappe.io" target="_blank" data-link="docs">\
-					<i class="icon-fixed-width icon-file"></i> '+__('Documentation')+'</a></li> \
-				<li><a href="http://frappe.io/getting-help" target="_blank">\
-					<i class="icon-fixed-width icon-question-sign"></i> '+__('Forums')+'</a></li> \
-					<li><a href="http://github.com/frappe/erpnext/issues" target="_blank">\
-						<i class="icon-fixed-width icon-warning-sign"></i> '+__('Report an Issue')+'</a></li> \
-				<li class="divider"></li> \
-				<li><a href="#" onclick="return frappe.ui.toolbar.clear_cache();">\
-					<i class="icon-fixed-width icon-refresh"></i> '
-					+__('Clear Cache')+'</a></li>\
-			</ul>\
-		</li>');
-	},
-	set_user_name: function() {
-		$('#toolbar-user-name').html('<img src="'
-			+frappe.user_info().image+'" style="max-width: 24px; max-height: 24px; margin: -2px 0px;">');
-	},
-
-	make_user_menu: function() {
-		this.set_user_name();
-
-		$(repl('<li><a href="#%(user_form)s">\
-				<i class="icon-fixed-width icon-user"></i>%(my_settings)s</a></li>\
-			<li><a href="/index"> \
-				<i class="icon-fixed-width icon-globe"></i>%(website)s</a></li>\
-			<li class="divider"></li>\
-			<li><a href="#" onclick="return frappe.app.logout();"> \
-				<i class="icon-fixed-width icon-signout"></i>%(logout)s</a></li>', {
-				"logout": __('Logout'),
-				"website": __('Switch to Website'),
-				"user_form": encodeURIComponent("Form/User/"+user),
-				"my_settings": __("My Settings")
-			})
-		).appendTo("#toolbar-user");
-	}
 });
 
 $.extend(frappe.ui.toolbar, {
@@ -266,15 +136,3 @@ frappe.ui.toolbar.show_about = function() {
 	}
 	return false;
 }
-
-
-frappe.ui.toolbar.show_banner = function(msg) {
-	$banner = $('<div class="toolbar-banner">'+msg+'<a class="close">&times;</a></div>')
-		.prependTo($('header .navbar'));
-		$("body").css({"padding-top": "70px"});
-	$banner.find(".close").click(function() {
-		$(".toolbar-banner").toggle(false);
-		$("body").css({"padding-top": "36px"});
-	});
-	return $banner;
-}

frappe/public/js/frappe/views/calendar.js

@@ -34,7 +34,7 @@ frappe.views.Calendar = Class.extend({
 	make_page: function() {
 		var module = locals.DocType[this.doctype].module;
 		this.page.appframe.set_title(__("Calendar") + " - " + __(this.doctype));
-		this.page.appframe.add_module_icon(module==="Core" ? "Calendar" : module)
+		frappe.add_breadcrumbs(module==="Core" ? "Calendar" : module, this.doctype)
 		this.page.appframe.add_button("New", function() {
 			var doc = frappe.model.get_new_doc(me.doctype);
 			frappe.set_route("Form", me.doctype, doc.name);

frappe/public/js/frappe/views/container.js

@@ -4,6 +4,7 @@
 // page container
 frappe.provide('frappe.pages');
 frappe.provide('frappe.views');
+frappe.provide('frappe.breadcrumbs');
 
 frappe.views.Container = Class.extend({
 	_intro: "Container contains pages inside `#container` and manages \
@@ -72,12 +73,36 @@ frappe.views.Container = Class.extend({
 		this.page._route = window.location.hash;
 		$(this.page).trigger('show');
 		scroll(0,0);
+		this.update_breadcrumbs();
+
 		return this.page;
 	},
+	update_breadcrumbs: function() {
+		var breadcrumbs = frappe.breadcrumbs[frappe.get_route_str()];
+		var $breadcrumbs = $("#navbar-breadcrumbs").empty();
+		if(!breadcrumbs) return;
+
+		var divider = function() {
+			$('<li style="padding: 8px 0px"><i class="icon-chevron-right text-muted"></i></li>').appendTo($breadcrumbs);
+		}
+
+		if(breadcrumbs.module) {
+			divider();
+			$('<li><a href="#Module/'+ breadcrumbs.module +'">'+ __(breadcrumbs.module) +'</a></li>').appendTo($breadcrumbs);
+		}
+		if(breadcrumbs.doctype) {
+			divider();
+			$('<li><a href="#List/'+ breadcrumbs.doctype +'">'+ __(breadcrumbs.doctype) +'</a></li>').appendTo($breadcrumbs);
+		}
+	},
 	set_full_width: function() {
 		// limit max-width to 970px for most pages
 		$("body").toggleClass("limit-container-width", !$(frappe.container.page).find(".app-page.full-width").length);
 	}
 });
 
+frappe.add_breadcrumbs = function(module, doctype) {
+	frappe.breadcrumbs[frappe.get_route_str()] = {module:module, doctype:doctype};
+	frappe.container.update_breadcrumbs();
+}
 

frappe/public/js/frappe/views/ganttview.js

@@ -41,7 +41,7 @@ frappe.views.Gantt = Class.extend({
 
 		this.appframe = this.page.appframe;
 		this.appframe.set_title(__("Gantt Chart") + " - " + __(this.doctype));
-		this.appframe.add_module_icon(module)
+		frappe.add_breadcrumbs(module)
 
 		this.appframe.set_title_right(__("Refresh"),
 			function() { me.refresh(); }, "icon-refresh")

frappe/public/js/frappe/views/moduleview.js

@@ -76,7 +76,6 @@ frappe.views.moduleview.ModuleView = Class.extend({
 			single_column: true,
 			title: __(frappe.modules[module] && frappe.modules[module].label || module)
 		});
-		wrapper.appframe.add_module_icon(module);
 		wrapper.appframe.set_title_left(function() { frappe.set_route(""); });
 		wrapper.appframe.set_title_right(__("Refresh"), function() {
 			me.make(wrapper, module);

frappe/public/js/frappe/views/reportview.js

@@ -52,7 +52,7 @@ frappe.views.ReportViewPage = Class.extend({
 	make_report_view: function() {
 		var module = locals.DocType[this.doctype].module;
 		this.page.appframe.set_title(__(this.doctype));
-		this.page.appframe.add_module_icon(module, this.doctype)
+		frappe.add_breadcrumbs(module, this.doctype)
 		this.page.appframe.set_title_left(function() { frappe.set_route((frappe.get_module(module) || {}).link); });
 
 		this.page.reportview = new frappe.views.ReportView({