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

feat: added success state

Browse source
This commit is contained in:
Shivam Mishra 2020-04-26 20:46:07 +05:30
parent 885e391bd9
commit 190745fed8
2 changed files with 81 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,9 +4,11 @@ import { generate_route } from "./utils";
export default class OnboardingWidget extends Widget {
constructor(opts) {
super(opts);
window.onb = this;
}
make_body() {
this.body.addClass('grid')
if (this.steps.length < 5) {
this.body.addClass(`grid-rows-${this.steps.length}`)
} else if (this.steps.length >= 5) {
@ -89,6 +91,14 @@ export default class OnboardingWidget extends Widget {
step.is_complete = true;
$step.addClass('complete');
})
let pending = onb.steps.filter(step => {
return !(step.is_complete || step.is_skipped)
})
if (pending.length) {
this.show_success()
}
}
skip_step(step, $step) {
@ -100,10 +110,31 @@ export default class OnboardingWidget extends Widget {
step.is_skipped = true;
$step.addClass('skipped');
})
let pending = onb.steps.filter(step => {
return !(step.is_complete || step.is_skipped)
})
if (pending.length) {
this.show_success()
}
}
show_success() {
// this.body.empty();
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');
let success = $(`<div class="success">
<h1>Hooray 🎉</h1>
<div class="text-muted">Your website seems good to go!</div>
</div>
`);
success.appendTo(this.widget);
};
set_body() {

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

@ -297,6 +297,14 @@
margin-bottom: 50px;
margin-top: 10px;
.success {
font-size: 16px;
text-align: center;
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
animation-duration: 200ms;
}
.widget-head {
display: flex;
@ -319,24 +327,27 @@
.widget-body {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
&.grid-rows-2 {
grid-template-rows: repeat(3, 1fr);;
}
&.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: column;
&.grid-rows-3 {
grid-template-rows: repeat(3, 1fr);;
}
&.grid-rows-2 {
grid-template-rows: repeat(3, 1fr);;
}
&.grid-rows-4 {
grid-template-rows: repeat(4, 1fr);;
}
&.grid-rows-3 {
grid-template-rows: repeat(3, 1fr);;
}
&.grid-rows-5 {
grid-template-rows: repeat(5, 1fr);;
&.grid-rows-4 {
grid-template-rows: repeat(4, 1fr);;
}
&.grid-rows-5 {
grid-template-rows: repeat(5, 1fr);;
}
}
.onboarding-step {
@ -630,4 +641,28 @@
transform: scale3d(0.5, 0.5, 0.5);
opacity: 0;
visibility: hidden;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}