diff --git a/frappe/desk/page/setup_wizard/setup_wizard.css b/frappe/desk/page/setup_wizard/setup_wizard.css deleted file mode 100644 index 2463c0f1e4..0000000000 --- a/frappe/desk/page/setup_wizard/setup_wizard.css +++ /dev/null @@ -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; -} diff --git a/frappe/desk/page/setup_wizard/setup_wizard.js b/frappe/desk/page/setup_wizard/setup_wizard.js index 9b469d8eb2..ba481f9f18 100644 --- a/frappe/desk/page/setup_wizard/setup_wizard.js +++ b/frappe/desk/page/setup_wizard/setup_wizard.js @@ -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 $(`
-
-
- -

${title}

-

${message}

+ get_message(title, message="", loading=false) { + return $(`
+
+
+ + ${title} +
+

${message}

+
+ ${loading + ? '
' + : `
+
` + }
`); diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css index 66a7bbd836..1f54563454 100644 --- a/frappe/public/css/page.css +++ b/frappe/public/css/page.css @@ -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); +} diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less index 5dc338d3ec..d768926525 100644 --- a/frappe/public/less/page.less +++ b/frappe/public/less/page.less @@ -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); + } + } +}