[setup] new loading state, remove setup_wizard.css

frappe/desk/page/setup_wizard/setup_wizard.css

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

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 $(`<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>`);

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

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