diff --git a/assets/icons/compress.svg b/assets/icons/compress.svg new file mode 100644 index 0000000..ec3835d --- /dev/null +++ b/assets/icons/compress.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg index 8714568..bb93ea4 100644 --- a/assets/icons/expand.svg +++ b/assets/icons/expand.svg @@ -1,3 +1,3 @@ - + diff --git a/assets/icons/grip-dots.svg b/assets/icons/grip-dots.svg new file mode 100644 index 0000000..ed61387 --- /dev/null +++ b/assets/icons/grip-dots.svg @@ -0,0 +1,3 @@ + + + diff --git a/components/comparisons/_style.scss b/components/comparisons/_style.scss index 386cda8..8ecf00f 100644 --- a/components/comparisons/_style.scss +++ b/components/comparisons/_style.scss @@ -2,13 +2,7 @@ @import "@wordpress/base-styles/breakpoints"; .vrts-comparisons { - --vrts-comparisons-slider-control-position: 50%; - --vrts-divider-width: 1px; - --vrts-divider-color: var(--wp-admin-theme-color); - --vrts-divider-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - --vrts-default-handle-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - --vrts-default-handle-background-color: #{$white}; - --vrts-default-handle-color: var(--wp-admin-theme-color); + --vrts-comparisons-slider-position: 50%; display: block; box-sizing: border-box; @@ -49,7 +43,7 @@ position: sticky; top: calc(62px + var(--wp-admin--admin-bar--height)); - [data-vrts-fullscreen] & { + [data-vrts-fullscreen="true"] & { top: 62px; } } @@ -60,6 +54,7 @@ -webkit-line-clamp: 1; display: -webkit-box; font-size: 13px; + font-weight: 500; line-height: 1.4; max-block-size: calc(13px * 1.4); white-space: initial; @@ -108,11 +103,6 @@ align-items: center; justify-content: center; - svg { - height: 14px; - width: auto; - } - &::before { position: absolute; top: 5px; @@ -134,58 +124,35 @@ opacity: 1; } } - } - &__panel { - margin: 0 !important; - display: flex; - align-items: flex-start; - flex-wrap: wrap; - gap: 1rem; - padding: 1em; + svg { + height: 14px; + width: auto; - &[hidden] { - display: none; + &:last-child { + display: none; + } } - } - &__tabs { - margin: 0; - padding: 0; - display: inherit; - flex-direction: row; - - [role="tab"] { - --vrts-comparisons-tab-border-height: 3px; - all: unset; - margin-bottom: 0; - list-style: none; - border-bottom: transparent solid var(--vrts-comparisons-tab-border-height); - flex-wrap: wrap; - padding: 1rem calc(1.33rem - var(--vrts-comparisons-tab-border-height)); - color: $gray-text; - cursor: pointer; - text-decoration: none; - transition: border 0.2s, color 0.2s; - - &:hover { - color: var(--wp-admin-theme-color); + [data-vrts-fullscreen="true"] & { + svg:first-child { + display: none; } - &[aria-selected="true"] { - border-bottom-color: var(--wp-admin-theme-color); + svg:last-child { + display: block; } } } - &__images { + &__content { display: grid; - flex-direction: column; - gap: 1rem; + justify-content: center; + gap: 0.5rem; padding: 1em; @media (min-width: $break-medium) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(0, max-content)); } } @@ -203,6 +170,12 @@ } } + &__highligher { + background: #ddd; + height: 100%; + width: 4px; + } + &__slider { position: relative; display: grid; @@ -220,14 +193,14 @@ } [data-vrts-slot="second"] { - clip-path: inset(0 0 0 var(--vrts-comparisons-slider-control-position)); + clip-path: inset(0 0 0 var(--vrts-comparisons-slider-position)); } } &__slider-handle { position: absolute; top: 0; - left: calc(var(--vrts-comparisons-slider-control-position) - 1px); + left: calc(var(--vrts-comparisons-slider-position) - 1px); width: 2px; height: 100%; display: flex; @@ -239,28 +212,33 @@ display: block; height: 100%; width: 1px; - background: var(--vrts-divider-color); - box-shadow: var(--vrts-divider-shadow); + background: var(--wp-admin-theme-color); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } svg { position: absolute; top: 50%; left: 50%; - transform: translate(calc(-50% - 0.5px), -50%); + transform: translate(-50%, -50%); + width: 42px; + height: 42px; + border-radius: 50%; + background: #fff; + border: 1px solid var(--wp-admin-theme-color); + color: var(--wp-admin-theme-color); } } &__slider-handle-clone { position: absolute; top: 0; - left: calc(var(--vrts-comparisons-slider-control-position) - 1px); - width: 1px; + left: calc(var(--vrts-comparisons-slider-position) - 0.5px); + width: 0px; height: 100%; - background: var(--vrts-divider-color); - box-shadow: var(--vrts-divider-shadow); - opacity: .2; - z-index: 1; + border-left: 1px dashed #c3c4c7; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + opacity: .4; } &__slider-control { diff --git a/components/comparisons/index.php b/components/comparisons/index.php index 4b7e7c0..f999243 100644 --- a/components/comparisons/index.php +++ b/components/comparisons/index.php @@ -8,17 +8,18 @@ component( 'alert-actions', $data ); ?> -
+
<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>
- +
<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?> @@ -27,12 +28,9 @@ <?php esc_html_e( 'Screenshot', 'visual-regression-tests' ); ?>
- - - - + icon( 'grip-dots' ); ?>
- +
diff --git a/components/comparisons/script.js b/components/comparisons/script.js index 3c406a0..edc1e00 100644 --- a/components/comparisons/script.js +++ b/components/comparisons/script.js @@ -1,4 +1,3 @@ -// import 'img-comparison-slider'; import Tabs from '../../assets/scripts/tabs'; class VrtsComparisons extends window.HTMLElement { @@ -10,9 +9,7 @@ class VrtsComparisons extends window.HTMLElement { } resolveElements() { - this.$content = document.querySelector( - '.vrts-test-run-page__content' - ); + this.$content = document.querySelector( '[data-vrts-fullscreen]' ); this.$fullscreen = this.querySelector( '[data-vrts-fullscreen-open]' ); this.$control = this.querySelector( '[data-vrts-comparisons-slider-control]' @@ -20,30 +17,40 @@ class VrtsComparisons extends window.HTMLElement { } bindFunctions() { - this.handleFullscreenOpen = this.handleFullscreenOpen.bind( this ); - this.handleControlChange = this.handleControlChange.bind( this ); + this.onFullscreenToggle = this.onFullscreenToggle.bind( this ); + this.onControlChange = this.onControlChange.bind( this ); + this.onFullScreenChange = this.onFullScreenChange.bind( this ); } bindEvents() { - this.$fullscreen.addEventListener( 'click', this.handleFullscreenOpen ); - this.$control.addEventListener( 'input', this.handleControlChange ); - - document.addEventListener( 'fullscreenchange', () => { - this.$content.setAttribute( - 'data-vrts-fullscreen', - document.fullscreenElement === this.$content - ); - } ); + this.$fullscreen.addEventListener( 'click', this.onFullscreenToggle ); + this.$control.addEventListener( 'input', this.onControlChange ); + document.addEventListener( + 'fullscreenchange', + this.onFullScreenChange + ); } - handleFullscreenOpen( e ) { + onFullscreenToggle( e ) { e.preventDefault(); - this.$content.requestFullscreen(); + + if ( document.fullscreenElement === this.$content ) { + document.exitFullscreen(); + } else { + this.$content.requestFullscreen(); + } + } + + onFullScreenChange() { + this.$content.setAttribute( + 'data-vrts-fullscreen', + document.fullscreenElement === this.$content + ); } - handleControlChange( e ) { + onControlChange( e ) { this.style.setProperty( - '--vrts-comparisons-slider-control-position', + '--vrts-comparisons-slider-position', `${ e.target.value }%` ); } @@ -54,12 +61,12 @@ class VrtsComparisons extends window.HTMLElement { disconnectedCallback() { this.tabs?.(); - this.$fullscreen?.removeEventListener( - 'click', - this.handleFullscreenOpen + this.$fullscreen?.removeEventListener( 'click', this.onFullscreenOpen ); + this.$control?.removeEventListener( 'input', this.onControlChange ); + document.removeEventListener( + 'fullscreenchange', + this.onFullScreenChange ); - this.$control?.removeEventListener( 'input', this.handleControlChange ); - document.removeEventListener( 'fullscreenchange' ); } } diff --git a/components/test-run-page/index.php b/components/test-run-page/index.php index 4357ea7..82e1d2e 100644 --- a/components/test-run-page/index.php +++ b/components/test-run-page/index.php @@ -2,7 +2,7 @@
component( 'test-run-alerts', $data ); ?>
-
+
component( 'test-run-info', $data['run'] ); ?> component( 'test-run-pagination', $data['pagination'] ); ?>