vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #4065 from pratu16x7/page-fixes

Browse source 
[page] add empty state, required libs, callback
This commit is contained in:
Rushabh Mehta 2017-09-14 11:24:47 +05:30 • committed by GitHub
commit da0a4ea7fd
4 changed files with 91 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frappe/desk/page/setup_wizard/setup_wizard.js
View file

@ -191,7 +191,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);
@ -241,7 +241,7 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
}
get_message(title, message="", loading=false) {
return $(`<div class="setup-loading" data-state="setup">
return $(`<div class="page-card-container" data-state="setup">
<div class="page-card">
<div class="page-card-head">
<span class="indicator blue">

9
frappe/public/css/page.css
View file

@ -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;

87
frappe/public/js/frappe/ui/page.js
View file

@ -1,20 +1,26 @@
// 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.make_page]
*
* @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;
}
@ -36,9 +42,47 @@ frappe.ui.Page = Class.extend({
make: function() {
this.wrapper = $(this.parent);
this.setup_render();
},
get_empty_state: function({title, message, primary_action}) {
let $empty_state = $(`<div class="page-card-container">
<div class="page-card">
<div class="page-card-head">
<span class="indicator blue">
${title}</span>
</div>
<p>${message}</p>
<div><a href="/login" class="btn btn-primary btn-sm">${primary_action.label}</a></div>
</div>
</div>`);
$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", '<div class="row layout-main">\
@ -48,18 +92,19 @@ frappe.ui.Page = Class.extend({
</div>\
</div>');
} else {
var main = this.add_view("main", '<div class="row layout-main">\
this.add_view("main", '<div class="row layout-main">\
<div class="col-md-2 layout-side-section"></div>\
<div class="col-md-10 layout-main-section-wrapper">\
<div class="layout-main-section"></div>\
<div class="layout-footer hide"></div>\
</div>\
</div>');
// 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 +137,10 @@ frappe.ui.Page = Class.extend({
this.page_form = $('<div class="page-form row hide"></div>').prependTo(this.main);
this.inner_toolbar = $('<div class="form-inner-toolbar hide"></div>').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 +486,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 {

13
frappe/public/less/page.less
View file

@ -283,6 +283,7 @@ select.input-sm {
}
}
.missing-image {
display: block;
position: relative;
@ -334,14 +335,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 +358,10 @@ select.input-sm {
margin-bottom: 15px;
border-bottom: 1px solid #d1d8dd;
}
.btn {
margin-top: 30px;
}
}
.state-icon-container {