From 3589a0b8b11ef64b4fb84f7d2e0cf25d38b41abd Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Wed, 6 Sep 2017 08:05:23 +0530 Subject: [PATCH 1/3] [page] add empty state, required libs, callback --- frappe/desk/page/setup_wizard/setup_wizard.js | 4 +- frappe/public/css/page.css | 9 +- frappe/public/js/frappe/ui/page.js | 106 +++++++++++++++--- frappe/public/less/page.less | 12 +- 4 files changed, 109 insertions(+), 22 deletions(-) diff --git a/frappe/desk/page/setup_wizard/setup_wizard.js b/frappe/desk/page/setup_wizard/setup_wizard.js index a4bad556a3..9fce0c776e 100644 --- a/frappe/desk/page/setup_wizard/setup_wizard.js +++ b/frappe/desk/page/setup_wizard/setup_wizard.js @@ -183,7 +183,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides { error: function() { var d = frappe.msgprint(__("There were errors.")); d.custom_onhide = function() { - $(me.parent).find('.setup-loading').remove(); + $(me.parent).find('.page-card-container').remove(); $('body').removeClass('setup-state'); me.container.show(); frappe.set_route(me.page_name, me.slides.length - 1); @@ -233,7 +233,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides { } get_message(title, message="", loading=false) { - return $(`
+ return $(`
diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css index 5c106c7339..5dae59687c 100644 --- a/frappe/public/css/page.css +++ b/frappe/public/css/page.css @@ -277,13 +277,17 @@ select.input-sm { opacity: 1; cursor: pointer; } +.page-card-container, .setup-state { background-color: #f5f7fa; } +.page-card-container { + padding: 70px; +} .page-card { max-width: 360px; - padding: 15px; margin: 70px auto; + padding: 15px; border: 1px solid #d1d8dd; border-radius: 4px; background-color: #fff; @@ -295,6 +299,9 @@ select.input-sm { margin-bottom: 15px; border-bottom: 1px solid #d1d8dd; } +.page-card .btn { + margin-top: 30px; +} .state-icon-container { display: flex; justify-content: center; diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index c244ceaa30..7209c52cf5 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -1,20 +1,36 @@ // Copyright (c) 2015, Frappe Technologies Pvt. Ltd. and Contributors // MIT License. See license.txt -// __("Form") +/** + * Make a standard page layout with a toolbar and title + * + * @param {Object} opts + * + * @param {string} opts.parent [HTMLElement] Parent element + * @param {boolean} opts.single_column Whether to include sidebar + * @param {string} [opts.title] Page title + * @param {Object} [opts.required_libs] resources to load + * @param {Object} [opts.empty_state] by default active + * @param {Object} [opts.make_page] + * + * @param {Object} opts.empty_state.get_whether_active [function] mostly async, + * to return the page state from backend, with on_empty and on_active callback params + * @param {string} opts.empty_state.title + * @param {string} opts.empty_state.message + * @param {Object} opts.empty_state.primary_action + * + * @param {Object} opts.empty_state.primary_action.label + * @param {Object} opts.empty_state.primary_action.on_click + * + * @returns {frappe.ui.Page} + */ + +/** + * @typedef {Object} frappe.ui.Page + */ -// parent, title, single_column -// standard page with page frappe.ui.make_app_page = function(opts) { - /* help: make a standard page layout with a toolbar and title */ - /* options: [ - "parent: [HTMLElement] parent element", - "single_column: [Boolean] false/true", - "title: [optional] set this title" - ] - */ - opts.parent.page = new frappe.ui.Page(opts); return opts.parent.page; } @@ -37,8 +53,55 @@ frappe.ui.Page = Class.extend({ make: function() { this.wrapper = $(this.parent); - $(frappe.render_template("page", {})).appendTo(this.wrapper); + if(this.empty_state) { + this.empty_state.get_whether_active(() => { + this.get_empty_state( this.empty_state ).appendTo(this.wrapper); + }, + () => this.setup_render() + ); + } else { + this.setup_render(); + } + }, + + get_empty_state: function({title, message, primary_action}) { + let $empty_state = $(`
+
+
+ + ${title} +
+

${message}

+ +
+
`); + + $empty_state.find('.btn-primary').on('click', () => { + primary_action.on_click(); + }); + + return $empty_state; + }, + + setup_render: function() { + var lib_exists = (typeof this.required_libs === 'string' && this.required_libs) + || ($.isArray(this.required_libs) && this.required_libs.length); + + if (lib_exists) { + this.load_lib(() => { + this.add_main_section(); + }); + } else { + this.add_main_section(); + } + }, + load_lib: function (callback) { + frappe.require(this.required_libs, callback); + }, + + add_main_section: function() { + $(frappe.render_template("page", {})).appendTo(this.wrapper); if(this.single_column) { // nesting under col-sm-12 for consistency this.add_view("main", '
\ @@ -48,18 +111,19 @@ frappe.ui.Page = Class.extend({
\
'); } else { - var main = this.add_view("main", '
\ + this.add_view("main", '
\
\
\
\
\
\
'); - // this.wrapper.find('.page-title') - // .removeClass('col-md-7').addClass('col-md-offset-2 col-md-5') - // .css({'padding-left': '45px'}); } + this.setup_page(); + }, + + setup_page: function() { this.$title_area = this.wrapper.find("h1"); this.$sub_title_area = this.wrapper.find("h6"); @@ -92,6 +156,10 @@ frappe.ui.Page = Class.extend({ this.page_form = $('
').prependTo(this.main); this.inner_toolbar = $('
').prependTo(this.main); this.icon_group = this.page_actions.find(".page-icon-group"); + + if(this.make_page) { + this.make_page(); + } }, set_indicator: function(label, color) { @@ -437,7 +505,11 @@ frappe.ui.Page = Class.extend({ return values; }, add_view: function(name, html) { - this.views[name] = $(html).appendTo($(this.wrapper).find(".page-content")); + let element = html; + if(typeof(html) === "string") { + element = $(html); + } + this.views[name] = element.appendTo($(this.wrapper).find(".page-content")); if(!this.current_view) { this.current_view = this.views[name]; } else { diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less index 8aecdce737..763a9e6d19 100644 --- a/frappe/public/less/page.less +++ b/frappe/public/less/page.less @@ -334,14 +334,18 @@ select.input-sm { } } -.setup-state { +.page-card-container, .setup-state { background-color: #f5f7fa; } +.page-card-container { + padding: 70px; +} + .page-card { max-width: 360px; + margin: 70px auto; padding: 15px; - margin: 70px auto; border: 1px solid #d1d8dd; border-radius: 4px; background-color: #fff; @@ -353,6 +357,10 @@ select.input-sm { margin-bottom: 15px; border-bottom: 1px solid #d1d8dd; } + + .btn { + margin-top: 30px; + } } .state-icon-container { From 330f629ed271ca0aa8bcff57006191ee9c3acf47 Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Wed, 6 Sep 2017 10:55:41 +0530 Subject: [PATCH 2/3] [fix] page.less --- frappe/public/less/page.less | 1 + 1 file changed, 1 insertion(+) diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less index 763a9e6d19..52294214d8 100644 --- a/frappe/public/less/page.less +++ b/frappe/public/less/page.less @@ -283,6 +283,7 @@ select.input-sm { } } + .missing-image { display: block; position: relative; From 6dd8c60c240ee2a098d82844632a428a5df3ed7e Mon Sep 17 00:00:00 2001 From: pratu16x7 Date: Wed, 13 Sep 2017 09:17:03 +0530 Subject: [PATCH 3/3] remove hardcoded empty state params --- frappe/public/js/frappe/ui/page.js | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 7209c52cf5..659d007e6a 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -10,18 +10,8 @@ * @param {boolean} opts.single_column Whether to include sidebar * @param {string} [opts.title] Page title * @param {Object} [opts.required_libs] resources to load - * @param {Object} [opts.empty_state] by default active * @param {Object} [opts.make_page] * - * @param {Object} opts.empty_state.get_whether_active [function] mostly async, - * to return the page state from backend, with on_empty and on_active callback params - * @param {string} opts.empty_state.title - * @param {string} opts.empty_state.message - * @param {Object} opts.empty_state.primary_action - * - * @param {Object} opts.empty_state.primary_action.label - * @param {Object} opts.empty_state.primary_action.on_click - * * @returns {frappe.ui.Page} */ @@ -52,16 +42,7 @@ frappe.ui.Page = Class.extend({ make: function() { this.wrapper = $(this.parent); - - if(this.empty_state) { - this.empty_state.get_whether_active(() => { - this.get_empty_state( this.empty_state ).appendTo(this.wrapper); - }, - () => this.setup_render() - ); - } else { - this.setup_render(); - } + this.setup_render(); }, get_empty_state: function({title, message, primary_action}) {