[view] form dashboard behaves like a form section and is now collapsible (#3596)

* [view] form dashboard behaves like a form section and is now collapsible

* [fix] alert on newline

* [fix] clear headline in email_account.js

frappe/email/doctype/email_account/email_account.js

@@ -119,7 +119,8 @@ frappe.ui.form.on("Email Account", {
 	},
 
 	show_gmail_message_for_less_secure_apps: function(frm) {
-		if(frm.doc.service==="Gmail") {
+		frm.dashboard.clear_headline();
+		if(frm.doc.service==="GMail") {
 			frm.dashboard.set_headline_alert('Gmail will only work if you allow access for less secure \
 				apps in Gmail settings. <a target="_blank" \
 				href="https://support.google.com/accounts/answer/6010255?hl=en">Read this for details</a>');

frappe/public/css/form.css

@@ -28,7 +28,8 @@
   border-top: 1px solid #d1d8dd;
 }
 .form-message {
-  padding: 15px;
+  padding: 15px 30px;
+  border-bottom: 1px solid #d1d8dd;
 }
 .document-flow-wrapper {
   padding: 40px 15px 30px;
@@ -73,21 +74,24 @@
 }
 .form-dashboard {
   background-color: #fafbfc;
-  border-bottom: 1px solid #d1d8dd;
+}
+.form-dashboard-wrapper {
+  margin: -15px 0px;
 }
 .form-documents h6 {
   margin-top: 15px;
 }
 .form-dashboard-section {
+  margin: 0px -15px;
   padding: 15px 30px;
   border-bottom: 1px solid #EBEFF2;
 }
+.form-dashboard-section:first-child {
+  padding-top: 0px;
+}
 .form-dashboard-section:last-child {
   border-bottom: none;
 }
-.form-heatmap {
-  padding-top: 30px;
-}
 .form-heatmap .heatmap-message {
   margin-top: 10px;
 }
@@ -543,20 +547,6 @@ select.form-control {
 .password-strength-message {
   margin-top: -10px;
 }
-.form-headline {
-  padding: 0px 15px;
-  margin: 0px;
-}
-.form-headline .alert {
-  font-size: 12px;
-  background-color: #fffce7;
-  font-weight: normal !important;
-  border: 0px;
-  border-radius: 0px;
-  margin-bottom: 0px;
-  margin: 0px -15px;
-  padding: 10px 30px;
-}
 .delivery-status-indicator {
   display: inline-block;
   margin-top: -3px;

frappe/public/js/frappe/form/dashboard.js

@@ -4,10 +4,11 @@
 frappe.ui.form.Dashboard = Class.extend({
 	init: function(opts) {
 		$.extend(this, opts);
+		this.section = this.frm.fields_dict._form_dashboard.wrapper;
+		this.parent = this.section.find('.section-body');
 		this.wrapper = $(frappe.render_template('form_dashboard',
-			{frm: this.frm})).prependTo(this.frm.layout.wrapper);
+			{frm: this.frm})).appendTo(this.parent);
 
-		this.headline = this.wrapper.find('.form-headline');
 		this.progress_area = this.wrapper.find(".progress-area");
 		this.heatmap_area = this.wrapper.find('.form-heatmap');
 		this.chart_area = this.wrapper.find('.form-chart');
@@ -18,7 +19,7 @@ frappe.ui.form.Dashboard = Class.extend({
 
 	},
 	reset: function() {
-		this.wrapper.addClass('hidden');
+		this.section.addClass('hidden');
 		this.clear_headline();
 
 		// clear progress
@@ -36,13 +37,10 @@ frappe.ui.form.Dashboard = Class.extend({
 		this.wrapper.find('.custom').remove();
 	},
 	set_headline: function(html) {
-		this.headline.html(html).removeClass('hidden');
-		this.show();
+		this.frm.layout.show_message(html);
 	},
 	clear_headline: function() {
-		if(this.headline) {
-			this.headline.empty().addClass('hidden');
-		}
+		this.frm.layout.show_message();
 	},
 
 	add_comment: function(text, permanent) {
@@ -59,13 +57,12 @@ frappe.ui.form.Dashboard = Class.extend({
 		this.clear_headline();
 	},
 
-	set_headline_alert: function(text, alert_class) {
+	set_headline_alert: function(text, indicator_color) {
+		if (!indicator_color) {
+			indicator_color = 'orange';
+		}
 		if(text) {
-			if(!alert_class) alert_class = "alert-warning";
-			this.set_headline(repl('<div class="alert %(alert_class)s">%(text)s</div>', {
-				"alert_class": alert_class || "",
-				"text": text
-			}));
+			this.set_headline(`<div><span class="indicator ${indicator_color}">${text}</span></div>`);
 		} else {
 			this.clear_headline();
 		}
@@ -406,6 +403,6 @@ frappe.ui.form.Dashboard = Class.extend({
 		}
 	},
 	show: function() {
-		this.wrapper.removeClass('hidden');
+		this.section.removeClass('hidden');
 	}
 });

frappe/public/js/frappe/form/layout.js

@@ -19,12 +19,14 @@ frappe.ui.form.Layout = Class.extend({
 		$.extend(this, opts);
 	},
 	make: function() {
-		if(!this.parent && this.body)
+		if(!this.parent && this.body) {
 			this.parent = this.body;
+		}
 		this.wrapper = $('<div class="form-layout">').appendTo(this.parent);
 		this.message = $('<div class="form-message text-muted small hidden"></div>').appendTo(this.wrapper);
-		if(!this.fields)
+		if(!this.fields) {
 			this.fields = frappe.meta.sort_docfields(frappe.meta.docfield_map[this.doctype]);
+		}
 		this.setup_tabbing();
 		this.render();
 	},
@@ -46,11 +48,16 @@ frappe.ui.form.Layout = Class.extend({
 	},
 	render: function(new_fields) {
 		var me = this;
-
 		var fields = new_fields || this.fields;
+
 		this.section = null;
 		this.column = null;
-		if((fields[0] && fields[0].fieldtype!="Section Break") || !fields.length) {
+
+		if (this.with_dashboard) {
+			this.setup_dashboard_section();
+		}
+
+		if (this.no_opening_section()) {
 			this.make_section();
 		}
 		$.each(fields, function(i, df) {
@@ -70,6 +77,26 @@ frappe.ui.form.Layout = Class.extend({
 		});
 
 	},
+
+	no_opening_section: function() {
+		return (this.fields[0] && this.fields[0].fieldtype!="Section Break") || !this.fields.length;
+	},
+
+	setup_dashboard_section: function() {
+		if (this.no_opening_section()) {
+			this.fields.unshift({fieldtype: 'Section Break'});
+		}
+
+		this.fields.unshift({
+			fieldtype: 'Section Break',
+			fieldname: '_form_dashboard',
+			label: __('Dashboard'),
+			cssClass: 'form-dashboard',
+			collapsible: 1,
+			//hidden: 1
+		});
+	},
+
 	make_field: function(df, colspan, render = false) {
 		!this.section && this.make_section();
 		!this.column && this.make_column();
@@ -176,13 +203,14 @@ frappe.ui.form.Layout = Class.extend({
 			var $this = $(this).removeClass("empty-section")
 				.removeClass("visible-section")
 				.removeClass("shaded-section");
-			if(!$(this).find(".frappe-control:not(.hide-control)").length) {
+			if(!$this.find(".frappe-control:not(.hide-control)").length
+				&& !$this.hasClass('form-dashboard')) {
 				// nothing visible, hide the section
-				$(this).addClass("empty-section");
+				$this.addClass("empty-section");
 			} else {
-				$(this).addClass("visible-section");
+				$this.addClass("visible-section");
 				if(cnt % 2) {
-					$(this).addClass("shaded-section");
+					$this.addClass("shaded-section");
 				}
 				cnt ++;
 			}
@@ -206,6 +234,10 @@ frappe.ui.form.Layout = Class.extend({
 					collapse = false;
 				}
 
+				if(df.fieldname === '_form_dashboard') {
+					collapse = false;
+				}
+
 				section.collapse(collapse);
 			}
 		}
@@ -258,7 +290,7 @@ frappe.ui.form.Layout = Class.extend({
 				if(doctype)
 					return me.handle_tab(doctype, fieldname, ev.shiftKey);
 			}
-		})
+		});
 	},
 	handle_tab: function(doctype, fieldname, shift) {
 		var me = this,
@@ -281,7 +313,7 @@ frappe.ui.form.Layout = Class.extend({
 			if(fields[i].df.fieldname==fieldname) {
 				if(shift) {
 					if(prev) {
-						this.set_focus(prev)
+						this.set_focus(prev);
 					} else {
 						$(this.primary_button).focus();
 					}
@@ -307,7 +339,7 @@ frappe.ui.form.Layout = Class.extend({
 					// last row, close it and find next field
 					grid_row.toggle_view(false, function() {
 						grid_row.grid.frm.layout.handle_tab(grid_row.grid.df.parent, grid_row.grid.df.fieldname);
-					})
+					});
 				} else {
 					// next row
 					grid_row.grid.grid_rows[grid_row.doc.idx].toggle_view(true);
@@ -342,7 +374,7 @@ frappe.ui.form.Layout = Class.extend({
 		}
 	},
 	is_visible: function(field) {
-		return field.disp_status==="Write" && (field.$wrapper && field.$wrapper.is(":visible"))
+		return field.disp_status==="Write" && (field.$wrapper && field.$wrapper.is(":visible"));
 	},
 	set_focus: function(field) {
 		// next is table, show the table
@@ -467,17 +499,20 @@ frappe.ui.form.Section = Class.extend({
 			.appendTo(this.layout.page);
 		this.layout.sections.push(this);
 
-		var section = this.wrapper[0];
-
 		if(this.df) {
 			if(this.df.label) {
 				this.make_head();
 			}
 			if(this.df.description) {
 				$('<div class="col-sm-12 small text-muted form-section-description">' + __(this.df.description) + '</div>')
-				.appendTo(this.wrapper);
+					.appendTo(this.wrapper);
+			}
+			if(this.df.cssClass) {
+				this.wrapper.addClass(this.df.cssClass);
 			}
 		}
+
+
 		// for bc
 		this.body = $('<div class="section-body">').appendTo(this.wrapper);
 	},
@@ -486,7 +521,7 @@ frappe.ui.form.Section = Class.extend({
 		if(!this.df.collapsible) {
 			$('<div class="col-sm-12"><h6 class="form-section-heading uppercase">'
 				+ __(this.df.label) + '</h6></div>')
-			.appendTo(this.wrapper);
+				.appendTo(this.wrapper);
 		} else {
 			this.head = $('<div class="section-head"><a class="h6 uppercase">'
 				+__(this.df.label)+'</a><span class="octicon octicon-chevron-down collapse-indicator"></span></div>').appendTo(this.wrapper);
@@ -538,7 +573,7 @@ frappe.ui.form.Section = Class.extend({
 		}
 		return missing_mandatory;
 	}
-})
+});
 
 frappe.ui.form.Column = Class.extend({
 	init: function(section, df) {
@@ -555,7 +590,7 @@ frappe.ui.form.Column = Class.extend({
 			</form>\
 		</div>').appendTo(this.section.body)
 			.find("form")
-			.on("submit", function() { return false; })
+			.on("submit", function() { return false; });
 
 		if(this.df.label) {
 			$('<label class="control-label">'+ __(this.df.label)
@@ -574,4 +609,4 @@ frappe.ui.form.Column = Class.extend({
 	refresh: function() {
 		this.section.refresh();
 	}
-})
+});

frappe/public/js/frappe/form/templates/form_dashboard.html

@@ -1,6 +1,4 @@
-<div class="form-dashboard hidden">
-	<h4 class="form-headline hidden form-dashboard-section">
-	</h4>
+<div class="form-dashboard-wrapper">
 	<div class="progress-area hidden form-dashboard-section">
 	</div>
 	<div class="form-heatmap hidden form-dashboard-section">

frappe/public/js/frappe/form/templates/form_links.html

@@ -1,9 +1,8 @@
 <div class="form-documents">
-	<h5 style="margin: 5px 0px;">{{__("Related Documents")}}</h5>
 	{% for (var i=0; i < transactions.length; i++) { %}
 		{% if((i % 2)===0) { %}<div class="row">{% } %}
 		<div class="col-xs-6">
-			<h6 class="uppercase">{{ transactions[i].label }}</h5>
+			<h6>{{ transactions[i].label }}</h6>
 			{% for (var j=0; j < transactions[i].items.length; j++) {
 				var doctype = transactions[i].items[j]; %}
 			<div class="document-link"

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

@@ -282,7 +282,6 @@ frappe.ui.form.Toolbar = Class.extend({
 		if(status === "Edit") {
 			this.page.set_primary_action(__("Edit"), function() {
 				me.frm.page.set_view('main');
-				me.frm.set_hidden(false);
 			}, 'octicon octicon-pencil');
 		} else if(status === "Cancel") {
 			this.page.set_secondary_action(__(status), function() {

frappe/public/js/legacy/form.js

@@ -53,14 +53,14 @@ _f.Frm = function(doctype, parent, in_form) {
 	var me = this;
 	$(document).on('rename', function(event, dt, old_name, new_name) {
 		if(dt==me.doctype)
-			me.rename_notify(dt, old_name, new_name)
+			me.rename_notify(dt, old_name, new_name);
 	});
-}
+};
 
 _f.Frm.prototype.check_doctype_conflict = function(docname) {
 	var me = this;
 	if(this.doctype=='DocType' && docname=='DocType') {
-		frappe.msgprint(__('Allowing DocType, DocType. Be careful!'))
+		frappe.msgprint(__('Allowing DocType, DocType. Be careful!'));
 	} else if(this.doctype=='DocType') {
 		if (frappe.views.formview[docname] || frappe.pages['List/'+docname]) {
 			window.location.reload();
@@ -74,7 +74,7 @@ _f.Frm.prototype.check_doctype_conflict = function(docname) {
 			// throw 'doctype open conflict'
 		}
 	}
-}
+};
 
 _f.Frm.prototype.setup = function() {
 
@@ -115,13 +115,13 @@ _f.Frm.prototype.setup = function() {
 		this.footer = new frappe.ui.form.Footer({
 			frm: this,
 			parent: $('<div>').appendTo(this.page.main.parent())
-		})
+		});
 		$("body").attr("data-sidebar", 1);
 	}
 	this.setup_drag_drop();
 
 	this.setup_done = true;
-}
+};
 
 _f.Frm.prototype.setup_drag_drop = function() {
 	var me = this;
@@ -153,7 +153,7 @@ _f.Frm.prototype.setup_drag_drop = function() {
 				}
 			});
 		});
-}
+};
 
 _f.Frm.prototype.setup_print_layout = function() {
 	var me = this;
@@ -165,7 +165,7 @@ _f.Frm.prototype.setup_print_layout = function() {
 	this.page.wrapper.on('view-change', function() {
 		me.toolbar.set_primary_action();
 	});
-}
+};
 
 _f.Frm.prototype.print_doc = function() {
 	if(this.print_preview.wrapper.is(":visible")) {
@@ -180,32 +180,14 @@ _f.Frm.prototype.print_doc = function() {
 	this.print_preview.refresh_print_options().trigger("change");
 	this.page.set_view("print");
 	this.print_preview.set_user_lang();
-}
-
-_f.Frm.prototype.set_hidden = function(status) {
-	// set hidden if hide_first is set
-	this.hidden = status;
-	var form_page = this.page.wrapper.find('.form-page');
-	form_page.toggleClass('hidden', this.hidden);
-	this.toolbar.refresh();
-	if(status===true) {
-		var msg = __('Edit {0} properties', [__(this.doctype)]);
-		this.layout.show_message('<div style="padding-left: 15px; padding-right: 15px;">\
-			<a class="text-muted" onclick="cur_frm.set_hidden(false)">' + msg + '</a></div>');
-	} else {
-		// clear message
-		this.layout.show_message();
-		frappe.utils.scroll_to(form_page);
-	}
-}
-
+};
 
 _f.Frm.prototype.hide_print = function() {
 	if(this.setup_done && this.page.current_view_name==="print") {
 		this.page.set_view(this.page.previous_view_name==="print" ?
 			"main" : (this.page.previous_view_name || "main"));
 	}
-}
+};
 
 _f.Frm.prototype.watch_model_updates = function() {
 	// watch model updates
@@ -222,7 +204,7 @@ _f.Frm.prototype.watch_model_updates = function() {
 			me.layout.refresh_dependency();
 			me.script_manager.trigger(fieldname, doc.doctype, doc.name);
 		}
-	})
+	});
 
 	// on table fields
 	var table_fields = frappe.get_children("DocType", me.doctype, "fields", {fieldtype:"Table"});
@@ -237,7 +219,7 @@ _f.Frm.prototype.watch_model_updates = function() {
 			}
 		});
 	});
-}
+};
 
 _f.Frm.prototype.setup_std_layout = function() {
 	this.form_wrapper = $('<div></div>').appendTo(this.layout_main);
@@ -251,6 +233,7 @@ _f.Frm.prototype.setup_std_layout = function() {
 		parent: this.body,
 		doctype: this.doctype,
 		frm: this,
+		with_dashboard: true
 	});
 	this.layout.make();
 
@@ -269,7 +252,7 @@ _f.Frm.prototype.setup_std_layout = function() {
 	this.states = new frappe.ui.form.States({
 		frm: this
 	});
-}
+};
 
 // email the form
 _f.Frm.prototype.email_doc = function(message) {
@@ -282,16 +265,16 @@ _f.Frm.prototype.email_doc = function(message) {
 		message: message,
 		real_name: this.doc.real_name || this.doc.contact_display || this.doc.contact_name
 	});
-}
+};
 
 // rename the form
 _f.Frm.prototype.rename_doc = function() {
 	frappe.model.rename_doc(this.doctype, this.docname);
-}
+};
 
 _f.Frm.prototype.share_doc = function() {
 	this.shared.show();
-}
+};
 
 // notify this form of renamed records
 _f.Frm.prototype.rename_notify = function(dt, old, name) {
@@ -320,15 +303,15 @@ _f.Frm.prototype.rename_notify = function(dt, old, name) {
 
 	frappe.re_route[window.location.hash] = '#Form/' + encodeURIComponent(this.doctype) + '/' + encodeURIComponent(name);
 	frappe.set_route('Form', this.doctype, name);
-}
+};
 
 // SETUP
 
 _f.Frm.prototype.setup_meta = function(doctype) {
 	this.meta = frappe.get_doc('DocType',this.doctype);
 	this.perm = frappe.perm.get_perm(this.doctype); // for create
-	if(this.meta.istable) { this.meta.in_dialog = 1 }
-}
+	if(this.meta.istable) { this.meta.in_dialog = 1; }
+};
 
 _f.Frm.prototype.refresh_header = function(is_a_different_doc) {
 	// set title
@@ -360,22 +343,22 @@ _f.Frm.prototype.refresh_header = function(is_a_different_doc) {
 	this.clear_custom_buttons();
 
 	this.show_web_link();
-}
+};
 
 _f.Frm.prototype.show_web_link = function() {
 	var doc = this.doc, me = this;
 	if(!doc.__islocal && doc.__onload && doc.__onload.is_website_generator) {
 		me.web_link && me.web_link.remove();
 		if(doc.__onload.published) {
-			me.add_web_link("/" + doc.route)
+			me.add_web_link("/" + doc.route);
 		}
 	}
-}
+};
 
 _f.Frm.prototype.add_web_link = function(path) {
 	this.web_link = this.sidebar.add_user_action(__("See on Website"),
 		function() {}).attr("href", path || this.doc.route).attr("target", "_blank");
-}
+};
 
 _f.Frm.prototype.check_doc_perm = function() {
 	// get perm
@@ -385,8 +368,8 @@ _f.Frm.prototype.check_doc_perm = function() {
 	if(!this.perm[0].read) {
 		return 0;
 	}
-	return 1
-}
+	return 1;
+};
 
 _f.Frm.prototype.refresh = function(docname) {
 	var is_a_different_doc = docname ? true : false;
@@ -460,14 +443,6 @@ _f.Frm.prototype.refresh = function(docname) {
 			if(this.show_print_first && this.doc.docstatus===1) {
 				// show print view
 				this.print_doc();
-			} else {
-				if(this.hide_first && !this.doc.__unsaved && !this.doc.__islocal) {
-					this.set_hidden(true);
-				} else {
-					if(this.hidden) {
-						this.set_hidden(false);
-					}
-				}
 			}
 		}
 
@@ -479,7 +454,7 @@ _f.Frm.prototype.refresh = function(docname) {
 
 		this.show_if_needs_refresh();
 	}
-}
+};
 
 _f.Frm.prototype.show_if_needs_refresh = function() {
 	if(this.doc.__needs_refresh) {
@@ -491,12 +466,12 @@ _f.Frm.prototype.show_if_needs_refresh = function() {
 			this.reload_doc();
 		}
 	}
-}
+};
 
 _f.Frm.prototype.render_form = function(is_a_different_doc) {
 	if(!this.meta.istable) {
 		this.layout.doc = this.doc;
-		this.layout.attach_doc_and_docfields()
+		this.layout.attach_doc_and_docfields();
 
 		this.sidebar = new frappe.ui.form.Sidebar({
 			frm: this,
@@ -504,13 +479,13 @@ _f.Frm.prototype.render_form = function(is_a_different_doc) {
 		});
 		this.sidebar.make();
 
+		// clear layout message
+		this.layout.show_message();
+
 		// header must be refreshed before client methods
 		// because add_custom_button
 		this.refresh_header(is_a_different_doc);
 
-		// clear layout message
-		this.layout.show_message();
-
 		// call trigger
 		this.script_manager.trigger("refresh");
 
@@ -549,14 +524,14 @@ _f.Frm.prototype.render_form = function(is_a_different_doc) {
 	}
 
 	this.scroll_to_element();
-}
+};
 
 _f.Frm.prototype.refresh_field = function(fname) {
 	if(this.fields_dict[fname] && this.fields_dict[fname].refresh) {
 		this.fields_dict[fname].refresh();
 		this.layout.refresh_dependency();
 	}
-}
+};
 
 _f.Frm.prototype.refresh_fields = function() {
 	this.layout.refresh(this.doc);
@@ -564,7 +539,7 @@ _f.Frm.prototype.refresh_fields = function() {
 
 	// cleanup activities after refresh
 	this.cleanup_refresh(this);
-}
+};
 
 
 _f.Frm.prototype.cleanup_refresh = function() {
@@ -598,7 +573,7 @@ _f.Frm.prototype.cleanup_refresh = function() {
 	if(me.meta.autoname=="naming_series:" && !me.doc.__islocal) {
 		me.toggle_display("naming_series", false);
 	}
-}
+};
 
 _f.Frm.prototype.setnewdoc = function() {
 	// moved this call to refresh function
@@ -616,14 +591,14 @@ _f.Frm.prototype.setnewdoc = function() {
 				me.trigger_link_fields();
 			});
 
-			frappe.breadcrumbs.add(me.meta.module, me.doctype)
+			frappe.breadcrumbs.add(me.meta.module, me.doctype);
 		});
 
 	// update seen
 	if(this.meta.track_seen) {
 		$('.list-id[data-name="'+ me.docname +'"]').addClass('seen');
 	}
-}
+};
 
 _f.Frm.prototype.trigger_link_fields = function() {
 	// trigger link fields which have default values set
@@ -637,7 +612,7 @@ _f.Frm.prototype.trigger_link_fields = function() {
 
 		delete this.doc.__run_link_triggers;
 	}
-}
+};
 
 _f.Frm.prototype.runscript = function(scriptname, callingfield, onrefresh) {
 	var me = this;
@@ -661,7 +636,7 @@ _f.Frm.prototype.runscript = function(scriptname, callingfield, onrefresh) {
 			}
 		});
 	}
-}
+};
 
 _f.Frm.prototype.copy_doc = function(onload, from_amend) {
 	this.validate_form_action("Create");
@@ -673,7 +648,7 @@ _f.Frm.prototype.copy_doc = function(onload, from_amend) {
 		onload(newdoc);
 	}
 	frappe.set_route('Form', newdoc.doctype, newdoc.name);
-}
+};
 
 _f.Frm.prototype.reload_doc = function() {
 	this.check_doctype_conflict(this.docname);
@@ -681,15 +656,15 @@ _f.Frm.prototype.reload_doc = function() {
 	var me = this;
 	var onsave = function(r, rtxt) {
 		me.refresh();
-	}
+	};
 
 	if(!me.doc.__islocal) {
 		frappe.model.remove_from_locals(me.doctype, me.docname);
 		frappe.model.with_doc(me.doctype, me.docname, function() {
 			me.refresh();
-		})
+		});
 	}
-}
+};
 
 frappe.validated = 0;
 // Proxy for frappe.validated
@@ -718,7 +693,7 @@ _f.Frm.prototype.save = function(save_action, callback, btn, on_error) {
 			me._save(save_action, callback, btn, on_error, resolve);
 		}, 100);
 	});
-}
+};
 
 _f.Frm.prototype._save = function(save_action, callback, btn, on_error, resolve) {
 	var me = this;
@@ -742,7 +717,7 @@ _f.Frm.prototype._save = function(save_action, callback, btn, on_error, resolve)
 		}
 		callback && callback(r);
 		resolve();
-	}
+	};
 
 	if(save_action != "Update") {
 		// validate
@@ -767,7 +742,7 @@ _f.Frm.prototype._save = function(save_action, callback, btn, on_error, resolve)
 	} else {
 		frappe.ui.form.save(me, save_action, after_save, btn);
 	}
-}
+};
 
 
 _f.Frm.prototype.savesubmit = function(btn, callback, on_error) {
@@ -814,19 +789,19 @@ _f.Frm.prototype.savecancel = function(btn, callback, on_error) {
 				} else {
 					on_error();
 				}
-			}
+			};
 			frappe.ui.form.save(me, "cancel", after_cancel, btn);
 		});
 	}, on_error);
-}
+};
 
 // delete the record
 _f.Frm.prototype.savetrash = function() {
 	this.validate_form_action("Delete");
 	frappe.model.delete_doc(this.doctype, this.docname, function(r) {
 		window.history.back();
-	})
-}
+	});
+};
 
 _f.Frm.prototype.amend_doc = function() {
 	if(!this.fields_dict['amended_from']) {
@@ -839,22 +814,22 @@ _f.Frm.prototype.amend_doc = function() {
 		newdoc.amended_from = me.docname;
 		if(me.fields_dict && me.fields_dict['amendment_date'])
 			newdoc.amendment_date = frappe.datetime.obj_to_str(new Date());
-	}
+	};
 	this.copy_doc(fn, 1);
 	frappe.utils.play_sound("click");
-}
+};
 
 _f.Frm.prototype.disable_save = function() {
 	// IMPORTANT: this function should be called in refresh event
 	this.save_disabled = true;
 	this.toolbar.current_status = null;
 	this.page.clear_primary_action();
-}
+};
 
 _f.Frm.prototype.enable_save = function() {
 	this.save_disabled = false;
 	this.toolbar.set_primary_action();
-}
+};
 
 _f.Frm.prototype.save_or_update = function() {
 	if(this.save_disabled) return;
@@ -864,24 +839,24 @@ _f.Frm.prototype.save_or_update = function() {
 	} else if(this.doc.docstatus===1 && this.doc.__unsaved) {
 		this.save("Update");
 	}
-}
+};
 
 _f.Frm.prototype.dirty = function() {
 	this.doc.__unsaved = 1;
 	this.$wrapper.trigger('dirty');
-}
+};
 
 _f.Frm.prototype.get_docinfo = function() {
 	return frappe.model.docinfo[this.doctype][this.docname];
-}
+};
 
 _f.Frm.prototype.is_dirty = function() {
 	return this.doc.__unsaved;
-}
+};
 
 _f.Frm.prototype.is_new = function() {
 	return this.doc.__islocal;
-}
+};
 
 
 _f.Frm.prototype.reload_docinfo = function(callback) {
@@ -899,23 +874,23 @@ _f.Frm.prototype.reload_docinfo = function(callback) {
 			me.assign_to.refresh();
 			me.attachments.refresh();
 		}
-	})
-}
+	});
+};
 
 
 _f.Frm.prototype.get_perm = function(permlevel, access_type) {
 	return this.perm[permlevel] ? this.perm[permlevel][access_type] : null;
-}
+};
 
 
 _f.Frm.prototype.set_intro = function(txt, append) {
 	this.dashboard.set_headline_alert(txt);
 	//frappe.utils.set_intro(this, this.body, txt, append);
-}
+};
 
 _f.Frm.prototype.set_footnote = function(txt) {
 	this.footnote_area = frappe.utils.set_footnote(this.footnote_area, this.body, txt);
-}
+};
 
 
 _f.Frm.prototype.add_custom_button = function(label, fn, group) {
@@ -924,25 +899,25 @@ _f.Frm.prototype.add_custom_button = function(label, fn, group) {
 	var btn = this.page.add_inner_button(label, fn, group);
 	this.custom_buttons[label] = btn;
 	return btn;
-}
+};
 
 _f.Frm.prototype.clear_custom_buttons = function() {
 	this.page.clear_inner_toolbar();
 	this.page.clear_user_actions();
 	this.custom_buttons = {};
-}
+};
 
 _f.Frm.prototype.add_fetch = function(link_field, src_field, tar_field) {
 	if(!this.fetch_dict[link_field]) {
-		this.fetch_dict[link_field] = {'columns':[], 'fields':[]}
+		this.fetch_dict[link_field] = {'columns':[], 'fields':[]};
 	}
 	this.fetch_dict[link_field].columns.push(src_field);
 	this.fetch_dict[link_field].fields.push(tar_field);
-}
+};
 
 _f.Frm.prototype.set_print_heading = function(txt) {
 	this.pformat[this.docname] = txt;
-}
+};
 
 _f.Frm.prototype.action_perm_type_map = {
 	"Create": "create",
@@ -974,7 +949,7 @@ _f.Frm.prototype.validate_form_action = function(action) {
 
 _f.Frm.prototype.has_perm = function(ptype) {
 	return frappe.perm.has_perm(this.doctype, 0, ptype, this.doc);
-}
+};
 
 _f.Frm.prototype.scroll_to_element = function() {
 	if (frappe.route_options && frappe.route_options.scroll_to) {
@@ -992,4 +967,4 @@ _f.Frm.prototype.scroll_to_element = function() {
 			frappe.utils.scroll_to(selector);
 		}
 	}
-}
+};

frappe/public/less/form.less

@@ -37,7 +37,8 @@
 }
 
 .form-message {
-	padding: 15px;
+	padding: 15px 30px;
+	border-bottom: 1px solid @border-color;
 }
 
 .document-flow-wrapper {
@@ -102,7 +103,10 @@
 
 .form-dashboard {
 	background-color: @light-bg;
-	border-bottom: 1px solid @border-color;
+}
+
+.form-dashboard-wrapper {
+	margin: -15px 0px;
 }
 
 .form-documents h6 {
@@ -110,16 +114,20 @@
 }
 
 .form-dashboard-section {
+	margin: 0px -15px;
 	padding: 15px 30px;
 	border-bottom: 1px solid @light-border-color;
 }
 
+.form-dashboard-section:first-child {
+	padding-top: 0px;
+}
+
 .form-dashboard-section:last-child {
 	border-bottom: none;
 }
 
 .form-heatmap {
-	padding-top: 30px;
 
 	.heatmap-message {
 		margin-top: 10px;
@@ -682,22 +690,6 @@ select.form-control {
 	margin-top: -10px;
 }
 
-.form-headline {
-	padding: 0px 15px;
-	margin: 0px;
-}
-
-.form-headline .alert {
-	font-size: @text-medium;
-	background-color: @light-yellow;
-	font-weight: normal !important;
-	border: 0px;
-	border-radius: 0px;
-	margin-bottom: 0px;
-	margin: 0px -15px;
-	padding: 10px 30px;
-}
-
 .delivery-status-indicator {
 	display: inline-block;
 	margin-top: -3px;