[setup] new loading state, remove setup_wizard.css
This commit is contained in:
pratu16x7
parent
bf4eab3bc2
commit
0776e79cb2
4 changed files with 445 additions and 163 deletions
|
|
@ -1,150 +0,0 @@
|
|||
#page-setup-wizard {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.setup-wizard-slide {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.setup-wizard-slide .slides-progress {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .lead {
|
||||
margin: 30px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .col-sm-12 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .section-body .col-sm-6:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .section-body .col-sm-6:last-child {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .form-control {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .form-control.bold {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.setup-wizard-slide.with-form {
|
||||
margin: 40px auto;
|
||||
padding: 10px 50px;
|
||||
border: 1px solid #d1d8dd;
|
||||
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.setup-wizard-slide .add-more {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .footer {
|
||||
padding: 30px 7px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide a.next-btn.disabled,
|
||||
.setup-wizard-slide a.complete-btn.disabled {
|
||||
background-color: #b1bdca;
|
||||
color: #fff;
|
||||
border-color: #b1bdca;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .fa-fw {
|
||||
vertical-align: middle;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .fa-fw.active {
|
||||
color: #5e64ff;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .icon-circle-blank {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .icon-circle {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] {
|
||||
width: 140px;
|
||||
height: 180px; /*depends on presence of heading*/
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .form-group,
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .clearfix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .missing-image,
|
||||
.setup-wizard-slide .attach-image-display {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .missing-image {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
.setup-wizard-slide .missing-image .octicon {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
-webkit-transform: translate(0px, -50%);
|
||||
}
|
||||
|
||||
|
||||
.setup-wizard-slide .img-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
.setup-wizard-slide .img-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #777777;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.setup-wizard-slide .img-overlay:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.setup-wizard-message-image {
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
|
@ -159,12 +159,16 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
|
|||
setTimeout(function() {
|
||||
// frappe.ui.toolbar.clear_cache();
|
||||
window.location = "/desk";
|
||||
}, 4000);
|
||||
}, 2000);
|
||||
setTimeout(()=> {
|
||||
$('body').removeClass('setup-state');
|
||||
}, 20000);
|
||||
},
|
||||
error: function() {
|
||||
var d = frappe.msgprint(__("There were errors."));
|
||||
d.custom_onhide = function() {
|
||||
$(me.parent).find('.setup-state').remove();
|
||||
$('body').removeClass('setup-state');
|
||||
me.container.show();
|
||||
frappe.set_route(me.page_name, me.slides.length - 1);
|
||||
};
|
||||
|
|
@ -190,20 +194,20 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
|
|||
|
||||
show_working_state() {
|
||||
this.container.hide();
|
||||
$('body').addClass('setup-state');
|
||||
frappe.set_route(this.page_name);
|
||||
|
||||
this.working_state_message = this.get_message(
|
||||
"/assets/frappe/images/ui/bubble-tea-smile.svg",
|
||||
__("Setting Up"),
|
||||
__('Sit tight while your system is being setup. This may take a few moments.'),
|
||||
"animated infinite bounce"
|
||||
__("Sit tight while your system is being setup. This may take a few moments."),
|
||||
true
|
||||
).appendTo(this.parent);
|
||||
|
||||
this.current_id = this.slides.length;
|
||||
this.current_slide = null;
|
||||
this.completed_state_message = this.get_message(
|
||||
"/assets/frappe/images/ui/bubble-tea-happy.svg",
|
||||
__("Setup Complete")
|
||||
__("Setup Complete"),
|
||||
__("You're all set!")
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -212,13 +216,21 @@ frappe.setup.SetupWizard = class SetupWizard extends frappe.ui.Slides {
|
|||
this.completed_state_message.appendTo(this.parent);
|
||||
}
|
||||
|
||||
get_message(image, title, message="", image_class) {
|
||||
return $(`<div class="setup-state" data-state="setup">
|
||||
<div style="padding: 40px;" class="text-center">
|
||||
<div class="container setup-wizard-slide">
|
||||
<img class="img-responsive setup-wizard-message-image ${image_class}" src="${image}">
|
||||
<p class="text-center lead">${title}</p>
|
||||
<p class="text-center">${message}</p>
|
||||
get_message(title, message="", loading=false) {
|
||||
return $(`<div data-state="setup">
|
||||
<div class="page-card">
|
||||
<div class="page-card-head">
|
||||
<span class="indicator blue">
|
||||
${title}</span>
|
||||
</div>
|
||||
<p>${message}</p>
|
||||
<div class="state-icon-container">
|
||||
${loading
|
||||
? '<div style="width:100%;height:100%" class="lds-rolling state-icon"><div></div></div>'
|
||||
: `<div style="width:100%;height:100%" class="state-icon"><i class="fa fa-check-circle text-extra-muted"
|
||||
style="font-size: 64px; margin-top: -8px;">
|
||||
</i></div>`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>`);
|
||||
|
|
|
|||
|
|
@ -153,3 +153,200 @@ select.input-sm {
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
#page-setup-wizard {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.setup-wizard-slide {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.setup-wizard-slide {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
.setup-wizard-slide .slides-progress {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.setup-wizard-slide .lead {
|
||||
margin: 30px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
.setup-wizard-slide .col-sm-12 {
|
||||
padding: 0px;
|
||||
}
|
||||
.setup-wizard-slide .section-body .col-sm-6:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.setup-wizard-slide .section-body .col-sm-6:last-child {
|
||||
padding-right: 0px;
|
||||
}
|
||||
.setup-wizard-slide .form-control {
|
||||
font-weight: 500;
|
||||
}
|
||||
.setup-wizard-slide .form-control.bold {
|
||||
background-color: #fff;
|
||||
}
|
||||
.setup-wizard-slide.with-form {
|
||||
margin: 40px auto;
|
||||
padding: 10px 50px;
|
||||
border: 1px solid #d1d8dd;
|
||||
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.setup-wizard-slide .add-more {
|
||||
margin: 0px;
|
||||
}
|
||||
.setup-wizard-slide .footer {
|
||||
padding: 30px 7px;
|
||||
}
|
||||
.setup-wizard-slide a.next-btn.disabled,
|
||||
.setup-wizard-slide a.complete-btn.disabled {
|
||||
background-color: #b1bdca;
|
||||
color: #fff;
|
||||
border-color: #b1bdca;
|
||||
}
|
||||
.setup-wizard-slide .fa-fw {
|
||||
vertical-align: middle;
|
||||
font-size: 10px;
|
||||
}
|
||||
.setup-wizard-slide .fa-fw.active {
|
||||
color: #5e64ff;
|
||||
}
|
||||
.setup-wizard-slide .icon-circle-blank {
|
||||
font-size: 7px;
|
||||
}
|
||||
.setup-wizard-slide .icon-circle {
|
||||
font-size: 10px;
|
||||
}
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
/*depends on presence of heading*/
|
||||
margin-top: 20px;
|
||||
}
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .form-group,
|
||||
.setup-wizard-slide .frappe-control[data-fieldtype="Attach Image"] .clearfix {
|
||||
display: none;
|
||||
}
|
||||
.setup-wizard-slide .missing-image,
|
||||
.setup-wizard-slide .attach-image-display {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.setup-wizard-slide .missing-image {
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.setup-wizard-slide .missing-image .octicon {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
-webkit-transform: translate(0px, -50%);
|
||||
}
|
||||
.setup-wizard-slide .img-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
.setup-wizard-slide .img-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #777777;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
.setup-wizard-slide .img-overlay:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.setup-state {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.page-card {
|
||||
max-width: 360px;
|
||||
padding: 15px;
|
||||
margin: 70px auto;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.page-card .page-card-head {
|
||||
padding: 10px 15px;
|
||||
margin: -15px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
}
|
||||
.state-icon-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.state-icon {
|
||||
position: relative;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@keyframes lds-rolling {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lds-rolling {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
.lds-rolling {
|
||||
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
|
||||
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
|
||||
}
|
||||
.lds-rolling div {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #d1d8dd;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: lds-rolling 1s linear infinite;
|
||||
animation: lds-rolling 1s linear infinite;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.lds-rolling div:after {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #d1d8dd;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -187,3 +187,226 @@ select.input-sm {
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
#page-setup-wizard {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.setup-wizard-slide {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
|
||||
.slides-progress {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 30px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.col-sm-12 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.section-body .col-sm-6 {
|
||||
&:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-control.bold {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.add-more {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 30px 7px;
|
||||
}
|
||||
|
||||
a.next-btn.disabled {
|
||||
background-color: #b1bdca;
|
||||
color: #fff;
|
||||
border-color: #b1bdca;
|
||||
}
|
||||
|
||||
a.complete-btn.disabled {
|
||||
background-color: #b1bdca;
|
||||
color: #fff;
|
||||
border-color: #b1bdca;
|
||||
}
|
||||
|
||||
.fa-fw {
|
||||
vertical-align: middle;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.fa-fw.active {
|
||||
color: #5e64ff;
|
||||
}
|
||||
|
||||
.icon-circle-blank {
|
||||
font-size: 7px;
|
||||
}
|
||||
|
||||
.icon-circle {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.frappe-control[data-fieldtype="Attach Image"] {
|
||||
width: 140px;
|
||||
height: 180px;
|
||||
margin-top: 20px;
|
||||
.form-group {
|
||||
display: none;
|
||||
}
|
||||
.clearfix {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
.octicon {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translate(0px, -50%);
|
||||
-webkit-transform: translate(0px, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.attach-image-display {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #777777;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-state {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.page-card {
|
||||
max-width: 360px;
|
||||
padding: 15px;
|
||||
margin: 70px auto;
|
||||
border: 1px solid #d1d8dd;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.page-card-head {
|
||||
padding: 10px 15px;
|
||||
margin: -15px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #d1d8dd;
|
||||
}
|
||||
}
|
||||
|
||||
.state-icon-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.state-icon {
|
||||
position: relative;
|
||||
width: 100px !important;
|
||||
height: 100px !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes lds-rolling {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes lds-rolling {
|
||||
0% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(0deg);
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(360deg);
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.lds-rolling {
|
||||
-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
|
||||
transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
|
||||
div {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #d1d8dd;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: lds-rolling 1s linear infinite;
|
||||
animation: lds-rolling 1s linear infinite;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 3px solid #d1d8dd;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue