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

feat: setup onboarding widgets

Browse source
This commit is contained in:
Shivam Mishra 2020-04-22 15:23:59 +05:30
parent 98f1866cef
commit d0bca65448
2 changed files with 64 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,16 +12,38 @@ export default class OnboardingWidget extends Widget {
}
add_step(step) {
let $step = $(`<div class="onboarding-step">
<i class="fa fa-check-circle ${
step.is_complete ? "complete" : "incomplete"
}" aria-hidden="true"></i>${step.label}
let $step = $(`<div class="onboarding-step ${
step.is_complete ? 'complete' : 'incomplete'
}" data-step-name=${step.name}>
<i class="fa fa-check-circle" aria-hidden="true"></i>
<span>${step.title}</span>
</div>`);
if (!step.is_complete) {
if (step.action == "Watch Video") {
$step.on('click', () => {
frappe.help.show_video(step.video_url, step.title);
this.mark_complete(step.name, $step);
});
} else {
$step.on('click', () => {
frappe.ui.form.make_quick_entry(step.reference_document)
});
}
}
$step.appendTo(this.body);
return $step;
}
mark_complete(name, $step) {
frappe.call("frappe.desk.desktop.complete_onboarding_step", {
name: name
}).then(() => {
$step.removeClass('incomplete')
$step.addClass('complete')
})
}
set_body() {
this.widget.addClass("onboarding-widget-box");
if (this.is_dismissed()) {
@ -32,14 +54,16 @@ export default class OnboardingWidget extends Widget {
}
is_dismissed() {
let dismissed = JSON.parse(localStorage.getItem("dismissed-onboarding") || '{}');
let dismissed = JSON.parse(
localStorage.getItem("dismissed-onboarding") || "{}"
);
if (Object.keys(dismissed).includes(this.label)) {
let last_hidden = new Date(dismissed[this.label]);
let today = new Date();
let diff = frappe.datetime.get_hour_diff(today, last_hidden)
let diff = frappe.datetime.get_hour_diff(today, last_hidden);
return diff < 24;
}
return false
return false;
}
set_title(title) {
@ -54,7 +78,9 @@ export default class OnboardingWidget extends Widget {
`<div class="small" style="cursor:pointer;">Dismiss</div>`
);
dismiss.on("click", () => {
let dismissed = JSON.parse(localStorage.getItem("dismissed-onboarding") || '{}');
let dismissed = JSON.parse(
localStorage.getItem("dismissed-onboarding") || "{}"
);
dismissed[this.label] = frappe.datetime.now_datetime();
localStorage.setItem(
@ -65,4 +91,4 @@ export default class OnboardingWidget extends Widget {
});
dismiss.appendTo(this.action_area);
}
}
}

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

@ -319,23 +319,46 @@
.widget-body {
margin-top: 20px;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
.onboarding-step {
margin-bottom: 8px;
font-size: 16px;
letter-spacing: 0.015em;
}
i {
padding-left: 5px;
padding-right: 12px;
i {
padding-left: 5px;
padding-right: 12px;
}
&.complete {
color: @brand-primary;
i {
color: @brand-primary;
}
span {
color: @text-color;
}
}
&.incomplete {
color: @text-muted;
i {
color: @text-muted;
}
span {
color: @text-muted;
cursor: pointer;
}
&:hover {
span {
color: @text-color;
}
}
}
}
}