From 2f9097a94a400090f291da2fa70a664a6dbf0fae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Harun=20Ba=C5=A1i=C4=87?= <harun@bleech.de> Date: Thu, 26 Sep 2024 17:52:14 +0200 Subject: [PATCH] feat(TestRun): adjust modal and actions success --- components/alert-actions/_style.scss | 18 +++++++++++++++++- components/alert-actions/index.php | 1 + components/alert-actions/script.js | 13 ++++++++++--- components/modal/_style.scss | 4 ++-- components/test-run-page/_style.scss | 4 ++-- 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/components/alert-actions/_style.scss b/components/alert-actions/_style.scss index 3624be6..6e425eb 100644 --- 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 index fd9af62..e632ef8 100644 --- 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 index fa4aad3..7c8e732 100644 --- 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 index 9f1869d..378a125 100644 --- 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 index 4e86856..0f7defa 100644 --- 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; } }