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

feat: add onboarding widget to desk

Browse source
This commit is contained in:
Shivam Mishra 2020-04-16 13:22:33 +05:30
parent 5c363142a7
commit 3cd514c7d2
3 changed files with 35 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frappe/public/js/frappe/views/desktop/desktop.js
View file

@ -200,7 +200,7 @@ class DesktopPage {
}
this.allow_customization && this.make_customization_link();
this.make_onboarding();
this.data.onboarding.items.length && this.make_onboarding();
this.make_charts().then(() => {
this.make_shortcuts();
this.make_cards();
@ -230,6 +230,7 @@ class DesktopPage {
// It may be possible the chart area is hidden since it has no widgets
// So the margin-top: -25px would be applied to the shortcut group
// We need to remove this as the chart group will be visible during customization
$('.widget.onboarding-widget-box').hide();
$('.desk-page .widget-group:visible:first').css('margin-top', '0px');
this.customize_link.hide();
@ -266,53 +267,20 @@ class DesktopPage {
}
make_onboarding() {
this.sections["onboarding"] = new frappe.widget.WidgetGroup({
title: `Getting Started`,
this.onboarding_widget = frappe.widget.make_widget({
label: this.data.onboarding.label || __(`Let's Get Started`),
subtitle: this.data.onboarding.subtitle,
steps: this.data.onboarding.items,
widget_type: 'onboarding',
container: this.page,
type: "onboarding",
columns: 1,
options: {
allow_sorting: false,
allow_create: false,
allow_delete: false,
allow_hiding: false,
allow_edit: false,
max_widget_count: 2,
},
widgets: [
{
label: "Unlock Great Customer Experience",
subtitle: "Just a few steps, and you’re good to go.",
steps: [
{
label: "Configure Lead Sources",
type: "Create",
completed: true
},
{
label: "Add Your Leads",
type: "Visit Page",
completed: false
},
{
label: "Create Your First Opportunity",
type: "Create",
completed: false
},
{
label: "Onboard your Sales Team",
type: "Create",
completed: false
},
{
label: "Assign Territories",
type: "Create",
completed: false
}
]
}
]
allow_sorting: false,
allow_create: false,
allow_delete: false,
allow_hiding: false,
allow_edit: false,
max_widget_count: 2,
}
});
}

13
frappe/public/js/frappe/widgets/onboarding_widget.js
View file

@ -13,7 +13,7 @@ export default class OnboardingWidget extends Widget {
add_step(step) {
let $step = $(`<div class="onboarding-step">
<i class="fa fa-check-circle ${step.completed ? 'complete' : 'incomplete'}" aria-hidden="true"></i>${step.label}
<i class="fa fa-check-circle ${step.is_complete ? 'complete' : 'incomplete'}" aria-hidden="true"></i>${step.label}
</div>`)
$step.appendTo(this.body)
@ -28,6 +28,15 @@ export default class OnboardingWidget extends Widget {
set_title() {
super.set_title();
let subtitle = $(`<div class="widget-subtitle">${this.subtitle}</div>`)
subtitle.appendTo(this.head);
subtitle.appendTo(this.title_field);
}
set_actions() {
this.action_area.empty();
const dismiss = $(`<div class="small" style="cursor:pointer;">Dismiss</div>`);
dismiss.on('click', () => {
this.delete();
})
dismiss.appendTo(this.action_area);
}
}

11
frappe/public/less/desktop.less
View file

@ -294,8 +294,11 @@
}
&.onboarding-widget-box {
margin-bottom: 50px;
margin-top: 10px;
.widget-head {
display: block;
display: flex;
.widget-title {
font-size: 20px;
@ -306,6 +309,12 @@
margin-top: 5px;
color: @text-muted;
}
.widget-control {
align-self: flex-start;
margin-top: -5px;
color: @text-muted;
}
}
.widget-body {