@@ -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); | |||
} | |||
} | |||
} |