form header refactor

css/legacy/body.css

@@ -192,6 +192,11 @@ div.std-footer-item {
 	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
 	background-color: #fff;
 	padding: 15px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;	
+	margin-bottom: 30px;
+	overflow: hidden;
 }
 
 .layout-wrapper-background {
@@ -205,9 +210,9 @@ div.std-footer-item {
 	padding: 15px;
 	background-color: #FFF;
 	min-height: 600px;
-	-moz-box-shadow:    7px 0px 6px -2px #ddd;
-	-webkit-box-shadow: 7px 0px 6px -2px #ddd;
-	box-shadow:         7px 0px 6px -2px #ddd;
+	-moz-box-shadow:    4px 0px 3px #ddd;
+	-webkit-box-shadow: 4px 0px 3px #ddd;
+	box-shadow:         4px 0px 3px #ddd;
 }
 
 .layout-side-section {

css/legacy/forms.css

@@ -5,23 +5,42 @@
 }
 
 .breadcrumbs {
-	background-color: #e8e8e8;
-	padding: 3px;
-	border-radius: 3px;
+	color: #000000;
 }
 
 .breadcrumbs a {
 	color: #000000;
 }
 
+div.form-header-main {
+	padding: 6px;
+	background: #eeeeee; /* Old browsers */
+	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
+	background: linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
+	border-bottom: 1px solid #ccc;
+}
+div.form-header-toolbar {
+	padding: 4px;
+	background: #eeeeee;
+	border-top: 1px solid #f8f8f8;
+	border-bottom: 1px solid #ccc;
+}
+
 div.form-section-head {
-	margin: 11px 0px 3px 0px;
+	margin: 11px -15px 3px -15px;
 	border-top: 1px solid #ccc;
-	padding-top: 11px;
+	padding: 11px 15px 0px 15px;
 }
 
 div.form-layout-row:first-child .form-section-head {
-	border-top: 0px solid #ccc !important;	
+	border-top: 0px solid #ccc !important;
+	margin-top: 0px;
+	padding-top: 0px;
 }
 
 div.form-section-head h3 {

css/ui/fonts.css

@@ -39,3 +39,11 @@
   font-weight: 400;
   src: local('Cabin Regular'), local('Cabin-Regular'), url('../lib/css/fonts/cabin.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'Pacifico';
+  font-style: normal;
+  font-weight: normal;
+  src: local('Pacifico Regular'), local('Pacifico-Regular'), url('../lib/css/fonts/pacifico.woff') format('woff');
+}
+

js/legacy/widgets/form/form.js

@@ -167,10 +167,11 @@ _f.Frm.prototype.setup_std_layout = function() {
 	
 		
 	// header - no headers for tables and guests
-	if(!(this.meta.istable || user=='Guest')) this.frm_head = new _f.FrmHeader(this.page_layout.head, this);
+	if(!(this.meta.istable || user=='Guest')) 
+		this.frm_head = new _f.FrmHeader(this.page_layout.head, this);
 	
 	// hide close btn for dialog rendering
-	if(this.frm_head && this.meta.in_dialog) $dh(this.frm_head.page_head.close_btn);
+	if(this.frm_head && this.meta.in_dialog) this.frm_head.hide_close();
 	
 	// bg colour
 	if(this.meta.colour) 
@@ -260,14 +261,6 @@ _f.Frm.prototype.rename_notify = function(dt, old, name) {
 	this.opendocs[name] = true;
 }
 
-// refresh the heading labels
-// ======================================================================================
-
-_f.Frm.prototype.set_heading = function() {
-	if(!this.meta.istable && this.frm_head) this.frm_head.refresh_labels(this);
-}
-
-
 // SETUP
 // ======================================================================================
 
@@ -362,7 +355,7 @@ _f.Frm.prototype.setup_fields_std = function() {
 
 // --------------------------------------------------------------------------------------
 _f.Frm.prototype.add_custom_button = function(label, fn, icon) {
-	this.frm_head.page_head.add_button(label, fn, 1);
+	this.frm_head.add_button(label, fn, icon);
 }
 _f.Frm.prototype.clear_custom_buttons = function() {
 	//
@@ -472,13 +465,10 @@ _f.Frm.prototype.refresh_header = function() {
 	}	
 
 	// show / hide buttons
-	if(this.frm_head)this.frm_head.refresh_toolbar();
+	if(this.frm_head)this.frm_head.refresh();
 	
 	// add to recent
-	if(wn.ui.toolbar.recent) wn.ui.toolbar.recent.add(this.doctype, this.docname, 1);
-	
-	// refresh_heading - status etc.
-	this.set_heading();
+	if(wn.ui.toolbar.recent) wn.ui.toolbar.recent.add(this.doctype, this.docname, 1);	
 }
 
 // --------------------------------------------------------------------------------------
@@ -1111,18 +1101,19 @@ _f.set_value = function(dt, dn, fn, v) {
 	if(changed) {
 		d[fn] = v;
 		d.__unsaved = 1;
-		var frm = wn.views.formview[d.doctype];
+		var frm = wn.views.formview[d.doctype].frm;
 		try {
 			if(d.parent && d.parenttype) {
 				locals[d.parenttype][d.parent].__unsaved = 1;
-				frm = wn.views.formview[d.parenttype];
+				frm = wn.views.formview[d.parenttype].frm;
 			}
 		} catch(e) {
 			if(d.parent && d.parenttype)
 			errprint('Setting __unsaved error:'+d.name+','+d.parent+','+d.parenttype);
 		}
-		if(frm && frm==cur_frm) {
-			frm.set_heading();
+		
+		if(frm && frm==cur_frm && frm.frm_head) {
+			frm.frm_head.refresh_labels();
 		}
 	}
 }

js/legacy/widgets/form/form_fields.js

@@ -82,21 +82,11 @@ _f.SectionBreak.prototype.make_body = function() {
 	if(this.df.label) {
 		if(!this.df.description) 
 			this.df.description = '';
-		$(this.row.main_head).html(repl('<div class="form-section-head" style="cursor: pointer">\
-				<div class="head">%(label)s</h3>\
-				<div class="help small">%(description)s</div>\
+		$(this.row.main_head).html(repl('<div class="form-section-head">\
+				<h2 class="head">%(label)s</h2>\
+				<div class="help small" \
+					style="margin-top: 4px; margin-bottom: 8px;">%(description)s</div>\
 			</div>', this.df));
-			
-		this.$expand = $(this.row.main_head).find('.head').click(function() {
-			if($(me.row.main_head).find('h3').length) {
-				me.section_collapse();				
-			} else {
-				me.section_expand();
-			}
-			return false;
-		});
-		
-		this.collapsible = true;
 	} else {
 		// simple
 		$(this.wrapper).html('<div class="form-section-head"></div>');
@@ -163,11 +153,12 @@ _f.SectionBreak.prototype.refresh = function(from_form) {
 		if(this.row)this.row.hide();
 	} else {
 		if(this.collapsible) {
-			if(this.df.reqd || this.has_data()) {
-				this.section_expand(from_form);
-			} else {
-				this.section_collapse();
-			}	
+			//this.section_expand(from_form);
+			//if(this.df.reqd || this.has_data()) {
+			//	this.section_expand(from_form);
+			//} else {
+			//	this.section_collapse();
+			//}	
 		}
 	}
 }

js/legacy/widgets/form/form_header.js

@@ -20,6 +20,119 @@
 // OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 // 
 
+// features
+// --------
+// toolbar - standard and custom
+// label - saved, submitted etc
+// breadcrumbs
+// save / submit button toggle based on "saved" or not
+// highlight and fade name based on refresh
+
+_f.FrmHeader = Class.extend({
+	init: function(parent, frm) {
+		this.buttons = {};
+		this.$w = $('<div class="form-header">\
+			<div class="form-header-main">\
+				<span class="label-area"></span>\
+				<span class="breadcrumb-area"></span>\
+				<span class="close">&times;</span>\
+			</div>\
+			<div class="form-header-toolbar">\
+			</div>\
+		</div>').appendTo(parent);
+		this.$w.find('.close').click(function() {
+			window.history.back();
+		})
+	},
+	refresh: function() {
+		// refresh breadcrumbs
+		wn.views.breadcrumbs($(this.$w.find('.breadcrumb-area')), 
+			cur_frm.meta.module, cur_frm.meta.name, cur_frm.docname);
+			
+		this.refresh_labels();
+		this.refresh_toolbar();
+		
+	},
+	refresh_labels: function() {
+		var labinfo = {
+			0: ['Draft', ''],
+			1: ['Submitted', 'label-info'],
+			2: ['Cancelled', 'label-important']
+		}[cint(cur_frm.doc.docstatus)];
+		
+		if(cur_frm.doc.__unsaved) {
+			labinfo[1] = 'label-warning'
+		}
+		
+		this.$w.find('.label-area').html(repl('<span class="label %(lab_class)s">\
+			%(lab_status)s</span>', {
+				lab_status: labinfo[0],
+				lab_class: labinfo[1]
+			}));		
+	},
+	refresh_toolbar: function() {
+		// clear
+		this.$w.find('.form-header-toolbar').empty();
+		var p = cur_frm.get_doc_perms();
+
+		// Edit
+		if(cur_frm.meta.read_only_onload && !cur_frm.doc.__islocal) {
+			if(!cur_frm.editable)
+				this.add_button('Edit', function() { 
+					cur_frm.edit_doc();
+				},'icon-pencil');
+			else
+				this.add_button('Print View', function() { 
+					cur_frm.is_editable[cur_frm.docname] = 0;				
+					cur_frm.refresh(); }, 'icon-print' );	
+		}
+
+		var docstatus = cint(cur_frm.doc.docstatus);
+		// Save
+		if(docstatus==0 && p[WRITE]) {
+			this.add_button('Save', function() { cur_frm.save('Save');}, '');
+			this.buttons['Save'].addClass('btn-primary');			
+		}
+		// Submit
+		if(docstatus==0 && p[SUBMIT] && (!cur_frm.doc.__islocal))
+			this.add_button('Submit', function() { cur_frm.savesubmit();}, 'icon-lock');
+
+		// Update after sumit
+		if(docstatus==1 && p[SUBMIT]) {
+			this.add_button('Update', function() { cur_frm.savesubmit();}, '');
+			if(!cur_frm.doc.__unsaved) this.buttons['Update'].toggle(false);
+		}
+
+		// Cancel
+		if(docstatus==1  && p[CANCEL])
+			this.add_button('Cancel', function() { cur_frm.savecancel() }, 'icon-remove');
+
+		// Amend
+		if(docstatus==2  && p[AMEND])
+			this.add_button('Amend', function() { cur_frm.amend_doc() }, 'icon-pencil');
+
+	},
+	add_button: function(label, click, icon) {
+		args = { label: label, icon:'' };
+		if(icon) {
+			args.icon = '<i class="'+icon+'"></i>';
+		}
+		this.buttons[label] = $(repl('<button class="btn btn-small">\
+			%(icon)s %(label)s</button>', args))
+			.click(click)
+			.appendTo(this.$w.find('.form-header-toolbar'));
+	},
+	show: function() {
+	},
+	hide: function() {
+		
+	},
+	hide_close: function() {
+		this.$w.find('.close').toggle(false);
+	}
+})
+
+/*
 _f.FrmHeader = function(parent, frm) {
 	var me = this;
 	this.wrapper = $a(parent, 'div');
@@ -229,3 +342,5 @@ _f.FrmHeader.prototype.refresh_labels = function(f) {
 	setTimeout('$(cur_frm.frm_head.dn_area).addClass("background-fade-in")\
 	.css("background-color", "white")', 1500)
 }
+
+*/

js/legacy/wn/page_layout.js

@@ -35,10 +35,10 @@
 wn.PageLayout = function(args) {
 	$.extend(this, args)
 	this.wrapper 		= $a(this.parent, 'div', 'layout-wrapper layout-wrapper-background');
+	this.head 			= $a(this.wrapper, 'div');	
 	this.main 			= $a(this.wrapper, 'div', 'layout-main-section');
 	this.sidebar_area 	= $a(this.wrapper, 'div', 'layout-side-section');
 	$a(this.wrapper, 'div', '', {clear:'both'});
-	this.head 			= $a(this.main, 'div');	
 	this.toolbar_area 	= $a(this.main, 'div');
 	this.body 			= $a(this.main, 'div');
 	this.footer 		= $a(this.main, 'div');

js/wn/views/breadcrumbs.js

@@ -1,5 +1,6 @@
 wn.provide('wn.views');
 wn.views.breadcrumbs = function(parent, module, doctype, name) {
+	$(parent).empty();
 	var $bspan = $(repl('<span class="breadcrumbs">\
 		<a href="#%(home_page)s">Home</a></span>', {home_page: wn.boot.home_page}));
 	if(module) {
@@ -7,11 +8,11 @@ wn.views.breadcrumbs = function(parent, module, doctype, name) {
 			{module: module, module_small: module.toLowerCase() }))
 	}
 	if(doctype && (locals.DocType[doctype] && !locals.DocType[doctype].issingle)) {
-		$bspan.append(repl(' / <a href="#!List/%(doctype)s">%(doctype)s List</a>',
+		$bspan.append(repl(' / <a href="#!List/%(doctype)s">%(doctype)s</a>',
 			{doctype: doctype}))
 	}
 	if(name) {
-		$bspan.append(' / ' + name)
+		$bspan.append(' / ' + name.bold())
 	}
 	$bspan.appendTo(parent);
 }