From 4e4a42af9164ba9b7496bd6d7f11c04cb0c022b8 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Fri, 7 Jul 2017 09:13:55 +0530 Subject: [PATCH 1/6] [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 --- .../doctype/email_account/email_account.js | 3 +- frappe/public/css/form.css | 28 +-- frappe/public/js/frappe/form/dashboard.js | 27 ++- frappe/public/js/frappe/form/layout.js | 73 ++++++-- .../frappe/form/templates/form_dashboard.html | 4 +- .../js/frappe/form/templates/form_links.html | 3 +- frappe/public/js/frappe/form/toolbar.js | 1 - frappe/public/js/legacy/form.js | 169 ++++++++---------- frappe/public/less/form.less | 30 ++-- 9 files changed, 162 insertions(+), 176 deletions(-) diff --git a/frappe/email/doctype/email_account/email_account.js b/frappe/email/doctype/email_account/email_account.js index cb9efd707d..7a175e7192 100644 --- a/frappe/email/doctype/email_account/email_account.js +++ b/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. Read this for details'); diff --git a/frappe/public/css/form.css b/frappe/public/css/form.css index c8f2df1b61..d822b04975 100644 --- a/frappe/public/css/form.css +++ b/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; diff --git a/frappe/public/js/frappe/form/dashboard.js b/frappe/public/js/frappe/form/dashboard.js index 6b5f5b239e..fc3c31fce2 100644 --- a/frappe/public/js/frappe/form/dashboard.js +++ b/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('
%(text)s
', { - "alert_class": alert_class || "", - "text": text - })); + this.set_headline(`
${text}
`); } else { this.clear_headline(); } @@ -406,6 +403,6 @@ frappe.ui.form.Dashboard = Class.extend({ } }, show: function() { - this.wrapper.removeClass('hidden'); + this.section.removeClass('hidden'); } }); diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js index 475f1e94f3..c6458d8ee0 100644 --- a/frappe/public/js/frappe/form/layout.js +++ b/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 = $('
').appendTo(this.parent); this.message = $('').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) { $('
' + __(this.df.description) + '
') - .appendTo(this.wrapper); + .appendTo(this.wrapper); + } + if(this.df.cssClass) { + this.wrapper.addClass(this.df.cssClass); } } + + // for bc this.body = $('
').appendTo(this.wrapper); }, @@ -486,7 +521,7 @@ frappe.ui.form.Section = Class.extend({ if(!this.df.collapsible) { $('
' + __(this.df.label) + '
') - .appendTo(this.wrapper); + .appendTo(this.wrapper); } else { this.head = $('').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({ \
').appendTo(this.section.body) .find("form") - .on("submit", function() { return false; }) + .on("submit", function() { return false; }); if(this.df.label) { $('