feat(TestRun): adjust modal and actions success

bleech · Sep 26, 2024 · 2f9097a · 2f9097a
1 parent 9cd5bb2
commit 2f9097a
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/components/alert-actions/_style.scss b/components/alert-actions/_style.scss
@@ -83,14 +83,30 @@
 	&__modal {
 
 		&-action {
-			margin-top: 15px;
+			margin-top: 10px;
 			display: inline-flex;
 			align-items: center;
 			gap: 0.5rem;
 		}
 
+		&-action-success {
+			color: #00a32a;
+			font-size: 0.75rem;
+			margin-left: 0.5rem;
+			display: none;
+
+			&.is-active {
+				display: block;
+			}
+		}
+
 		.spinner {
 			margin: 0;
+			display: none;
+
+			&.is-active {
+				display: block;
+			}
 		}
 
 		textarea {

diff --git a/components/alert-actions/index.php b/components/alert-actions/index.php
@@ -43,6 +43,7 @@
 					<div class="vrts-alert-actions__modal-action">
 						<button type="submit" class="button button-primary"><?php esc_html_e( 'Save Changes', 'visual-regression-tests' ); ?></button>
 						<span class="spinner"></span>
+						<span class="vrts-alert-actions__modal-action-success"><?php esc_html_e( 'Saved successfully.', 'visual-regression-tests' ); ?></span>
 					</div>
 				</form>
 			</div>

diff --git a/components/alert-actions/script.js b/components/alert-actions/script.js
@@ -16,6 +16,10 @@ class VrtsAlertActions extends window.HTMLElement {
 		this.$hideElementsForm = this.querySelector(
 			'[data-vrts-hide-elements-form]'
 		);
+		this.$spinner = this.querySelector( '.spinner' );
+		this.$success = this.querySelector(
+			'.vrts-alert-actions__modal-action-success'
+		);
 	}
 
 	bindFunctions() {
@@ -41,11 +45,10 @@ class VrtsAlertActions extends window.HTMLElement {
 	onHideElementsFormSubmit( e ) {
 		e.preventDefault();
 		const $form = e.currentTarget;
-		const $spinner = $form.querySelector( '.spinner' );
 		const formData = new window.FormData( $form );
 		const postId = formData.get( 'post_id' );
 
-		$spinner.classList.add( 'is-active' );
+		this.$spinner.classList.add( 'is-active' );
 
 		fetch( `${ window.vrts_admin_vars.rest_url }/tests/post/${ postId }`, {
 			method: 'PUT',
@@ -58,7 +61,11 @@ class VrtsAlertActions extends window.HTMLElement {
 				return response.json();
 			} )
 			.then( () => {
-				$spinner.classList.remove( 'is-active' );
+				this.$spinner.classList.remove( 'is-active' );
+				this.$success.classList.add( 'is-active' );
+				setTimeout( () => {
+					this.$success.classList.remove( 'is-active' );
+				}, 2000 );
 			} );
 	}
 

diff --git a/components/modal/_style.scss b/components/modal/_style.scss
@@ -59,10 +59,10 @@
 		border-radius: 3px;
 		font-size: 0;
 		z-index: 1;
-		transition: opacity 0.2s;
+		transition: background-color 0.2s;
 
 		&:hover {
-			opacity: 0.8;
+			background-color: #f6f7f7;
 		}
 
 		&:focus-visible {

diff --git a/components/test-run-page/_style.scss b/components/test-run-page/_style.scss
@@ -58,7 +58,7 @@
 		flex: 1;
 		padding-bottom: 20px;
 
-		&[data-vrts-fullscreen] {
+		&[data-vrts-fullscreen="true"] {
 			overflow: auto;
 			padding: 0 20px 20px 20px;
 			background-color: #f0f0f1;
@@ -81,7 +81,7 @@
 				background: #f0f0f1;
 				z-index: 1;
 
-				[data-vrts-fullscreen] & {
+				[data-vrts-fullscreen="true"] & {
 					top: 0;
 				}
 			}