Skip to content

Commit

Permalink
feat(TestRun): improve layout, animations, actions and styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@harunbleech
harunbleech committed Oct 11, 2024
1 parent 04b4e9f commit 218a978
Show file tree
Hide file tree
Showing 16 changed files with 229 additions and 82 deletions.
4 changes: 4 additions & 0 deletions assets/icons/flag-outline.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.
6 changes: 3 additions & 3 deletions assets/icons/flag.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.
1 change: 1 addition & 0 deletions components/alert-actions/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
&__trigger {
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
line-height: 1;
padding: 0.5rem;
Expand Down
3 changes: 2 additions & 1 deletion components/alert-actions/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<div id="vrts-alert-actions-dropdown" class="vrts-alert-actions__dropdown" aria-hidden="true">
<button data-vrts-loading="false" data-vrts-action-state="<?php echo esc_attr( $data['alert']->is_false_positive ? 'secondary' : 'primary' ); ?>" data-vrts-alert-id="<?php echo esc_attr( $data['alert']->id ); ?>" data-vrts-alert-action="false-positive" class="vrts-alert-actions__dropdown-action vrts-action-button">
<span class="vrts-action-button__icons">
<span class="vrts-action-button__icon"><?php vrts()->icon( 'flag' ); ?></span>
<span class="vrts-action-button__icon" data-vrts-action-state-primary><?php vrts()->icon( 'flag-outline' ); ?></span>
<span class="vrts-action-button__icon" data-vrts-action-state-secondary><?php vrts()->icon( 'flag' ); ?></span>
<span class="vrts-action-button__spinner"><?php vrts()->icon( 'spinner' ); ?></span>
</span>
<span class="vrts-action-button__info" data-vrts-action-state-primary><?php esc_html_e( 'Flag as false positive', 'visual-regression-tests' ); ?></span>
Expand Down
66 changes: 41 additions & 25 deletions components/alert-actions/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class VrtsAlertActions extends window.HTMLElement {
const postId = formData.get( 'post_id' );

this.$spinner.classList.add( 'is-active' );
this.$success.classList.remove( 'is-active' );

fetch( `${ window.vrts_admin_vars.rest_url }/tests/post/${ postId }`, {
method: 'PUT',
Expand All @@ -63,9 +64,6 @@ class VrtsAlertActions extends window.HTMLElement {
.then( () => {
this.$spinner.classList.remove( 'is-active' );
this.$success.classList.add( 'is-active' );
setTimeout( () => {
this.$success.classList.remove( 'is-active' );
}, 2000 );
} );
}

Expand All @@ -89,9 +87,16 @@ class VrtsAlertActions extends window.HTMLElement {
const restEndpoint = `${ window.vrts_admin_vars.rest_url }/alerts/${ id }/${ action }`;
const method = shouldSetAction ? 'POST' : 'DELETE';

let loadingElapsedTime = 0;
let interval = null;

const timeout = setTimeout( () => {
$el.setAttribute( 'data-vrts-loading', 'true' );
}, 150 );
const loadingStartTime = window.Date.now();
interval = setInterval( () => {
loadingElapsedTime = window.Date.now() - loadingStartTime;
}, 50 );
}, 200 );

fetch( restEndpoint, {
method,
Expand All @@ -105,31 +110,42 @@ class VrtsAlertActions extends window.HTMLElement {
.then( ( data ) => {
// console.log( data );

$el.setAttribute( 'data-vrts-loading', 'false' );
$el.setAttribute(
'data-vrts-action-state',
shouldSetAction ? 'secondary' : 'primary'
);

const $alert = document.getElementById( `vrts-alert-${ id }` );
const loadingTimeoutTime =
loadingElapsedTime > 0
? Math.abs( loadingElapsedTime - 400 )
: 0;

if ( $alert ) {
if ( 'false-positive' === action ) {
$alert.setAttribute(
'data-vrts-false-positive',
shouldSetAction ? 'true' : 'false'
);
}

if ( 'read-status' === action ) {
$alert.setAttribute(
'data-vrts-state',
shouldSetAction ? 'read' : 'unread'
);
setTimeout( () => {
$el.setAttribute( 'data-vrts-loading', 'false' );

$el.setAttribute(
'data-vrts-action-state',
shouldSetAction ? 'secondary' : 'primary'
);

const $alert = document.getElementById(
`vrts-alert-${ id }`
);

if ( $alert ) {
if ( 'false-positive' === action ) {
$alert.setAttribute(
'data-vrts-false-positive',
shouldSetAction ? 'true' : 'false'
);
}

if ( 'read-status' === action ) {
$alert.setAttribute(
'data-vrts-state',
shouldSetAction ? 'read' : 'unread'
);
}
}
}
}, loadingTimeoutTime );

clearTimeout( timeout );
clearInterval( interval );
} );
}

Expand Down
64 changes: 50 additions & 14 deletions components/comparisons/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@
left: 0;
width: 100%;
height: calc(100% - 1px);
background: linear-gradient(90deg, #fff, #ddd, #fff);
background: linear-gradient(90deg, #ddd, #fff, #ddd);
background-size: 200% 100%;
animation: vrts-shimmer 1.5s linear paused infinite;
transition: opacity 0.2s, visibility 0.2s;
opacity: 0;
visibility: hidden;
z-index: 10;

Expand Down Expand Up @@ -66,13 +67,14 @@
display: flex;
align-items: center;
padding-right: 0.25rem;
z-index: 1;

> *:not(:last-child) {
position: relative;

&::after {
position: absolute;
right: 0;
right: -0.5px;
content: "";
display: block;
width: 1px;
Expand Down Expand Up @@ -102,6 +104,10 @@
align-items: center;
justify-content: center;

@media (max-width: 667px) {
display: none;
}

&::before {
position: absolute;
top: 5px;
Expand Down Expand Up @@ -145,11 +151,12 @@
}

&__content {
container-type: inline-size;
display: grid;
grid-template-columns: repeat(3, minmax(0, max-content));
justify-content: center;
gap: 0.25rem;
padding: 1em;
padding: 15px;
}

&__figure {
Expand All @@ -162,29 +169,38 @@
box-sizing: border-box;
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}

@container (max-width: 600px) {
&[data-vrts-comparisons-slot="comparison"] {
display: none;
}
}
}

&__diff-inidicator {
background-color: #f0f0f1;
box-sizing: border-box;
background: #f0f0f1;
border-block: 1px solid transparent;
height: 100%;
width: 4px;
}

&__slider {
--vrts-comparisons-slider-height: 100%;

position: relative;
display: grid;
align-items: start;
border: solid 1px #{$gray-lighten-20};
overflow: clip;

.vrts-comparisons__figure {
grid-column: 1 / 1;
grid-row: 1 / 1;
margin: 0;
background: #{$light-gray-500};
border: 0;
height: 100%;
width: 100%;
Expand All @@ -203,35 +219,45 @@
}

&__slider-handle {
--vrts-comparisons-offset: calc(62px + 42px);
--vrts-comparisons-handle-size: 32px;
--vrts-comparisons-handle-offest: 20px;
--vrts-comparisons-slider-centered: calc(100% / var(--vrts-comparisons-slider-aspect-ratio) / 2 - var(--vrts-comparisons-handle-size) / 2);
--vrts-comparisons-viewport-centered: calc(((100vh - var(--wp-admin--admin-bar--height) - 56px - 15px - var(--vrts-comparisons-offset)) / 2 - var(--vrts-comparisons-handle-size) / 2) + 15%);

box-sizing: border-box;
position: sticky;
top: 50%;
top: calc(var(--wp-admin--admin-bar--height) + (var(--vrts-comparisons-handle-size) / 2) + 10%);
width: 100%;
height: 44px;
height: calc(var(--vrts-comparisons-handle-size) + 10px);
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
grid-column: 1 / 1;
grid-row: 1 / 1;
margin-block: 20px;
margin-block: var(--vrts-comparisons-handle-offest);
margin-block-start: Max(var(--vrts-comparisons-handle-offest), Min(var(--vrts-comparisons-slider-centered), var(--vrts-comparisons-viewport-centered)));

@media (min-width: 851px) {
top: calc((100vh - var(--wp-admin--admin-bar--height) + var(--vrts-test-run-page-offset) + 54px + 62px + 44px - 22px) / 2);
top: calc(var(--wp-admin--admin-bar--height) + var(--vrts-comparisons-offset) + (var(--vrts-comparisons-handle-size) / 2) + 10%);
}

[data-vrts-fullscreen="true"] & {
top: calc((100vh + 62px + 44px - 22px) / 2);
top: calc(var(--vrts-comparisons-offset) + (var(--vrts-comparisons-handle-size) / 2) + 10%);
}

svg {
box-sizing: border-box;
position: absolute;
top: 0;
left: calc(var(--vrts-comparisons-slider-position) - 21px);
width: 42px;
height: 42px;
left: calc(var(--vrts-comparisons-slider-position) - (var(--vrts-comparisons-handle-size) / 2));
width: var(--vrts-comparisons-handle-size);
height: var(--vrts-comparisons-handle-size);
border-radius: 50%;
background: #fff;
border: 1px solid var(--wp-admin-theme-color);
color: var(--wp-admin-theme-color);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}

Expand Down Expand Up @@ -261,5 +287,15 @@
position: absolute;
inset: 0;
opacity: 0;

&::-webkit-slider-runnable-track {
height: 100%;
}

&::-webkit-slider-thumb {
appearance: none;
height: 100%;
width: 42px;
}
}
}
16 changes: 11 additions & 5 deletions components/comparisons/index.php
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<?php

use Vrts\Core\Utilities\Image_Helpers;

?>

<vrts-comparisons class="vrts-comparisons postbox">
<div class="vrts-comparisons__header postbox-header">
<div class="vrts-comparisons__title"><?php echo get_the_title( $data['alert']->post_id ); ?></div>
<div class="vrts-comparisons__info">
<div class="vrts-comparisons__difference">
<?php /* translators: %s: the count of pixels with a visual difference. */ ?>
<?php echo esc_html( sprintf( __( '%spx Difference', 'visual-regression-tests' ), esc_html( ceil( $data['alert']->differences / 4 ) ) ) ); ?>
<?php echo esc_html( sprintf( __( '%spx Difference', 'visual-regression-tests' ), esc_html( number_format_i18n( ceil( $data['alert']->differences / 4 ) ) ) ) ); ?>
</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' ); ?>
Expand All @@ -16,16 +22,16 @@

<div class="vrts-comparisons__content">
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="comparison">
<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' ); ?>" />
<img class="vrts-comparisons__figure-image" <?php echo Image_Helpers::alert_image_hwstring( $data['alert'] ); ?> 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-divider-clone"></span>
</figure>
<canvas class="vrts-comparisons__diff-inidicator" data-vrts-comparisons-diff-inidicator></canvas>
<div class="vrts-comparisons__slider">
<div class="vrts-comparisons__slider" style="--vrts-comparisons-slider-aspect-ratio: <?php echo esc_attr( Image_Helpers::alert_image_aspect_ratio( $data['alert'] ) ); ?>">
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="base">
<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' ); ?>" />
<img class="vrts-comparisons__figure-image" <?php echo Image_Helpers::alert_image_hwstring( $data['alert'] ); ?> crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->base_screenshot_url ); ?>" alt="<?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
</figure>
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="target">
<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' ); ?>" />
<img class="vrts-comparisons__figure-image" <?php echo Image_Helpers::alert_image_hwstring( $data['alert'] ); ?> crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->target_screenshot_url ); ?>" alt="<?php esc_html_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
</figure>
<span class="vrts-comparisons__slider-divider"></span>
<div class="vrts-comparisons__slider-handle">
Expand Down
Loading

0 comments on commit 218a978

Please sign in to comment.