From ad697fa3f7456060486f3f33cfb976bf8b952a62 Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 28 Apr 2020 21:09:32 +0530 Subject: [PATCH] feat: better indicators for skipped steps --- .../js/frappe/widgets/onboarding_widget.js | 164 ++++++++++-------- frappe/public/less/desktop.less | 12 +- 2 files changed, 102 insertions(+), 74 deletions(-) diff --git a/frappe/public/js/frappe/widgets/onboarding_widget.js b/frappe/public/js/frappe/widgets/onboarding_widget.js index 4dacec451a..e0a5705d87 100644 --- a/frappe/public/js/frappe/widgets/onboarding_widget.js +++ b/frappe/public/js/frappe/widgets/onboarding_widget.js @@ -8,11 +8,11 @@ export default class OnboardingWidget extends Widget { } make_body() { - this.body.addClass('grid') + this.body.addClass("grid"); if (this.steps.length < 5) { - this.body.addClass(`grid-rows-${this.steps.length}`) + this.body.addClass(`grid-rows-${this.steps.length}`); } else if (this.steps.length >= 5) { - this.body.addClass('grid-rows-5') + this.body.addClass("grid-rows-5"); } this.steps.forEach((step) => { this.add_step(step); @@ -20,24 +20,34 @@ export default class OnboardingWidget extends Widget { } add_step(step) { - let status = step.is_complete - ? "complete" - : step.is_skipped - ? "skipped" - : ""; - let $step = $(`
- + let status = ""; + let icon_class = "fa-circle-o"; + + if (step.is_skipped) { + status = "skipped" + icon_class = "fa-times-circle-o" + } + + if (step.is_complete) { + status = "complete"; + icon_class = "fa-check-circle-o"; + } + + let $step = $(`
+ ${step.title}
`); if (!step.is_mandatory && !step.is_complete) { // let skip_html = $(``); - let skip_html = $(`Skip`); + let skip_html = $( + `Skip` + ); skip_html.appendTo($step); - skip_html.on('click', () => { + skip_html.on("click", () => { this.skip_step(step, $step); event.stopPropagation(); - }) + }); } let action = () => {}; @@ -45,88 +55,105 @@ export default class OnboardingWidget extends Widget { action = () => { frappe.help.show_video(step.video_url, step.title); this.mark_complete(step, $step); - } - } - - else if (step.action == "Create Entry") { + }; + } else if (step.action == "Create Entry") { action = () => { - frappe.ui.form.make_quick_entry(step.reference_document, () => { - this.mark_complete(step, $step); - }, null, null, true) - } - } - - else if (step.action == "View Settings") { + frappe.ui.form.make_quick_entry( + step.reference_document, + () => { + this.mark_complete(step, $step); + }, + null, + null, + true + ); + }; + } else if (step.action == "View Settings") { action = () => { - frappe.set_route("Form", step.reference_document) - } - } - - else if (step.action == "View Report") { + frappe.set_route("Form", step.reference_document); + }; + } else if (step.action == "View Report") { action = () => { let route = generate_route({ name: step.reference_report, - type: 'report', - is_query_report: ["Query Report", "Script Report"].includes(step.report_type) + type: "report", + is_query_report: ["Query Report", "Script Report"].includes( + step.report_type + ), }); frappe.set_route(route); this.mark_complete(step, $step); - } + }; } - $step.on('click', action) - + $step.on("click", action); $step.appendTo(this.body); return $step; } mark_complete(step, $step) { - frappe.call("frappe.desk.desktop.update_onboarding_step", { - name: step.name, - field: 'is_complete', - value: 1 - }).then(() => { - step.is_complete = true; - $step.addClass('complete'); - }) + frappe + .call("frappe.desk.desktop.update_onboarding_step", { + name: step.name, + field: "is_complete", + value: 1, + }) + .then(() => { + step.is_complete = true; + $step.removeClass("skipped"); + $step.addClass("complete"); - let pending = onb.steps.filter(step => { - return !(step.is_complete || step.is_skipped) - }) + let icon = $step.find("i.fa"); + icon.removeClass(); + icon.addClass('fa'); + icon.addClass('fa-check-circle-o'); - if (pending.length) { - this.show_success() - } + let pending = this.steps.filter((step) => { + return !(step.is_complete || step.is_skipped); + }); + + if (pending.length == 0) { + this.show_success(); + } + }); } skip_step(step, $step) { - frappe.call("frappe.desk.desktop.update_onboarding_step", { - name: step.name, - field: 'is_skipped', - value: 1 - }).then(() => { - step.is_skipped = true; - $step.addClass('skipped'); - }) + frappe + .call("frappe.desk.desktop.update_onboarding_step", { + name: step.name, + field: "is_skipped", + value: 1, + }) + .then(() => { + step.is_skipped = true; + $step.removeClass("complete"); + $step.addClass("skipped"); - let pending = onb.steps.filter(step => { - return !(step.is_complete || step.is_skipped) - }) + let icon = $step.find("i.fa"); + icon.removeClass(); + icon.addClass('fa'); + icon.addClass('fa-times-circle-o'); - if (pending.length) { - this.show_success() - } + let pending = this.steps.filter((step) => { + return !(step.is_complete || step.is_skipped); + }); + + if (pending.length == 0) { + this.show_success(); + } + }); } show_success() { let height = this.widget.height(); this.widget.empty(); this.widget.height(height); - this.widget.addClass('flex'); - this.widget.addClass('align-center'); - this.widget.addClass('justify-center'); + this.widget.addClass("flex"); + this.widget.addClass("align-center"); + this.widget.addClass("justify-center"); let success = $(`

Hooray 🎉

@@ -134,8 +161,7 @@ export default class OnboardingWidget extends Widget {
`); success.appendTo(this.widget); - - }; + } set_body() { this.widget.addClass("onboarding-widget-box"); @@ -162,7 +188,9 @@ export default class OnboardingWidget extends Widget { set_title(title) { super.set_title(title); if (this.subtitle) { - let subtitle = $(`
${this.subtitle}
`); + let subtitle = $( + `
${this.subtitle}
` + ); subtitle.appendTo(this.title_field); } } diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less index 1ddee72022..ffd993b28a 100644 --- a/frappe/public/less/desktop.less +++ b/frappe/public/less/desktop.less @@ -358,7 +358,7 @@ i { color: @text-muted; padding-left: 5px; - padding-right: 12px; + padding-right: 2px; } .step-skip { @@ -386,7 +386,7 @@ &.skipped { i { - color: @blue-light; + color: @text-muted; } span { @@ -646,8 +646,8 @@ @-webkit-keyframes zoomIn { from { opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + -webkit-transform: scale3d(0.7, 0.7, 0.7); + transform: scale3d(0.7, 0.7, 0.7); } 50% { @@ -658,8 +658,8 @@ @keyframes zoomIn { from { opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + -webkit-transform: scale3d(0.7, 0.7, 0.7); + transform: scale3d(0.7, 0.7, 0.7); } 50% {