Skip to content

Commit

Permalink
feat(TestRun): improve comparisons
Browse files Browse the repository at this point in the history
  • Loading branch information
@harunbleech
harunbleech committed Sep 26, 2024
1 parent 244826c commit 6ffb538
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 95 deletions.
3 changes: 3 additions & 0 deletions assets/icons/compress.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/icons/expand.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/icons/grip-dots.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 40 additions & 62 deletions components/comparisons/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -49,7 +43,7 @@
position: sticky;
top: calc(62px + var(--wp-admin--admin-bar--height));

[data-vrts-fullscreen] & {
[data-vrts-fullscreen="true"] & {
top: 62px;
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -108,11 +103,6 @@
align-items: center;
justify-content: center;

svg {
height: 14px;
width: auto;
}

&::before {
position: absolute;
top: 5px;
Expand All @@ -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));
}
}

Expand All @@ -203,6 +170,12 @@
}
}

&__highligher {
background: #ddd;
height: 100%;
width: 4px;
}

&__slider {
position: relative;
display: grid;
Expand All @@ -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;
Expand All @@ -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 {
Expand Down
12 changes: 5 additions & 7 deletions components/comparisons/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,18 @@
</div>
<button type="button" title="<?php esc_html_e( 'Expand', 'visual-regression-tests' ); ?>" class="vrts-comparisons__expand-button" data-vrts-fullscreen-open>
<?php vrts()->icon( 'expand' ); ?>
<?php vrts()->icon( 'compress' ); ?>
</button>
<?php vrts()->component( 'alert-actions', $data ); ?>
</div>
</div>

<div id="vrts-comparisons-side-by-side" class="vrts-comparisons__images">
<div class="vrts-comparisons__content">
<figure class="vrts-comparisons__figure">
<img class="vrts-comparisons__figure-image" crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->comparison_screenshot_url ); ?>" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
<span class="vrts-comparisons__slider-handle-clone"></span>
</figure>

<canvas class="vrts-comparisons__highligher"></canvas>
<div class="vrts-comparisons__slider">
<figure class="vrts-comparisons__figure" data-vrts-slot="first">
<img class="vrts-comparisons__figure-image" crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->base_screenshot_url ); ?>" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
Expand All @@ -27,12 +28,9 @@
<img class="vrts-comparisons__figure-image" crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->target_screenshot_url ); ?>" alt="<?php esc_html_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
</figure>
<div class="vrts-comparisons__slider-handle">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="20" r="15.5" fill="var(--vrts-default-handle-background-color)" stroke="var(--vrts-default-handle-color)"/>
<path d="M20.6667 15.8332H22.3334V14.1665H20.6667V15.8332ZM20.6667 20.8332H22.3334V19.1665H20.6667V20.8332ZM20.6667 25.8332H22.3334V24.1665H20.6667V25.8332ZM25.6667 14.1665V15.8332H27.3334V14.1665H25.6667ZM25.6667 20.8332H27.3334V19.1665H25.6667V20.8332ZM25.6667 25.8332H27.3334V24.1665H25.6667V25.8332Z" fill="var(--vrts-default-handle-color)"/>
</svg>
<?php vrts()->icon( 'grip-dots' ); ?>
</div>
<input type="range" class="vrts-comparisons__slider-control" data-vrts-comparisons-slider-control>
<input type="range" step="0.078125" class="vrts-comparisons__slider-control" data-vrts-comparisons-slider-control>
</div>
</div>
<span class="vrts-comparisons__loader"></span>
Expand Down
55 changes: 31 additions & 24 deletions components/comparisons/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// import 'img-comparison-slider';
import Tabs from '../../assets/scripts/tabs';

class VrtsComparisons extends window.HTMLElement {
Expand All @@ -10,40 +9,48 @@ 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]'
);
}

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 }%`
);
}
Expand All @@ -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' );
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/test-run-page/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="vrts-test-run-page__sidebar">
<?php vrts()->component( 'test-run-alerts', $data ); ?>
</div>
<div class="vrts-test-run-page__content">
<div class="vrts-test-run-page__content" data-vrts-fullscreen="false">
<div class="vrts-test-run-page__content-heading">
<?php vrts()->component( 'test-run-info', $data['run'] ); ?>
<?php vrts()->component( 'test-run-pagination', $data['pagination'] ); ?>
Expand Down

0 comments on commit 6ffb538

Please sign in to comment.