Skip to content

Commit

Permalink
Merge pull request #71 from bleech/changes
Browse files Browse the repository at this point in the history 
Changes
  • Loading branch information
@harunbleech
harunbleech authored Oct 29, 2024
2 parents b38a5d1 + 8188381 commit af08141
Show file tree
Hide file tree
Showing 14 changed files with 114 additions and 65 deletions.
1 change: 1 addition & 0 deletions assets/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@


&.column-title {
position: relative;
display: flex;
flex-direction: column;
}
Expand Down
2 changes: 1 addition & 1 deletion assets/animations/success-check.json
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion components/comparisons/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
.vrts-comparisons {
--vrts-comparisons-slider-position: 50%;

container-type: inline-size;
display: block;
box-sizing: border-box;
border-top: 0;
Expand Down Expand Up @@ -142,6 +141,10 @@
gap: 0;
grid-template-columns: repeat(2, minmax(0, max-content));
}

&-container {
container-type: inline-size;
}
}

&__figure {
Expand Down
34 changes: 18 additions & 16 deletions components/comparisons/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,26 @@
</div>
</div>

<div class="vrts-comparisons__content">
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="comparison">
<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'comparison' ) ); ?>" alt="<?php esc_attr_e( 'Difference', '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" 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" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'base' ) ); ?>" alt="<?php esc_attr_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
<div class="vrts-comparisons__content-container">
<div class="vrts-comparisons__content">
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="comparison">
<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'comparison' ) ); ?>" alt="<?php esc_attr_e( 'Difference', 'visual-regression-tests' ); ?>" />
<span class="vrts-comparisons__slider-divider-clone"></span>
</figure>
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="target">
<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'target' ) ); ?>" alt="<?php esc_attr_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
</figure>
<span class="vrts-comparisons__slider-divider"></span>
<div class="vrts-comparisons__slider-handle">
<?php vrts()->icon( 'grip-dots' ); ?>
<canvas class="vrts-comparisons__diff-inidicator" data-vrts-comparisons-diff-inidicator></canvas>
<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" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'base' ) ); ?>" alt="<?php esc_attr_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
</figure>
<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="target">
<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_screenshot_url( $data['alert'], 'target' ) ); ?>" alt="<?php esc_attr_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
</figure>
<span class="vrts-comparisons__slider-divider"></span>
<div class="vrts-comparisons__slider-handle">
<?php vrts()->icon( 'grip-dots' ); ?>
</div>
<input type="range" step="0.078125" class="vrts-comparisons__slider-control" data-vrts-comparisons-slider-control>
</div>
<input type="range" step="0.078125" class="vrts-comparisons__slider-control" data-vrts-comparisons-slider-control>
</div>
</div>
<span class="vrts-gradient-loader"></span>
Expand Down
73 changes: 39 additions & 34 deletions components/emails/test-run/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,44 +88,47 @@
<![endif]-->
</head>
<body style="width:100%;height:100%;padding:0;Margin:0">
<table border="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui; margin-top: 20px;">
<table border="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td style="padding: 0 20px;">
<td style="padding: 20px;">
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly"><?php esc_html_e( 'Howdy 👋', 'visual-regression-tests' ); ?></p>
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly"><?php esc_html_e( "We've detected visual changes on your website.", 'visual-regression-tests' ); ?></p>
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly; margin: 0"><?php esc_html_e( "We've detected visual changes on your website.", 'visual-regression-tests' ); ?></p>
</td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui; margin-top: 10px;">
<table border="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td width="1"></td>
<td width="280" style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; padding: 15px; border-spacing: 0; background-color: #F6F7FB;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-spacing: 0; background-color: #F6F7FB;">
<tr><td style="padding: 0 15px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; border-spacing: 0; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td style="border-bottom: 1px dashed #c3c4c7; padding-bottom: 12px">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0;">
<tr>
<td></td>
<td width="22" style="padding-right: 8px;">
<img width="22" height="22" src="<?php echo esc_url( vrts()->get_plugin_url( 'assets/images/vrts-logo.png' ) ); ?>" alt="Logo">
</td>
<td width="100">
<p style="font-size: 16px; line-height: 20px; color: #2C3338; display: block; margin: 0; mso-line-height-rule: exactly;"><strong><?php esc_html_e( 'VRTs Plugin', 'visual-regression-tests' ); ?></strong></p>
</td>
<td></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0; padding-top: 10px">
<td style="border-bottom: 1px dashed #c3c4c7; padding: 12px 0">
<center>
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td width="22" style="padding-right: 8px;">
<img width="22" height="22" src="<?php echo esc_url( vrts()->get_plugin_url( 'assets/images/vrts-logo.png' ) ); ?>" alt="Logo">
</td>
<td width="100">
<p style="font-size: 16px; line-height: 20px; color: #2C3338; display: block; margin: 0; mso-line-height-rule: exactly;"><strong><?php esc_html_e( 'VRTs Plugin', 'visual-regression-tests' ); ?></strong></p>
</td>
</tr>
</table>
</center>
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0; padding-top: 10px; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td style="text-align: center">
<p style="font-size: 14px; line-height: 20px; color: #2C3338; display: block; margin: 0; mso-line-height-rule: exactly"><?php esc_html_e( 'Test Receipt', 'visual-regression-tests' ); ?></p>
<a style="font-size: 11px; line-height: 16px; display: block; margin-top: 4px; mso-line-height-rule: exactly" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( home_url( '/' ) ); ?></a>
<a style="font-size: 11px; line-height: 16px; display: block; padding-top: 4px; mso-line-height-rule: exactly" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( home_url( '/' ) ); ?></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-bottom: 1px dashed #c3c4c7; padding-top: 12px; padding-bottom: 12px; text-align: center;">
<td style="border-bottom: 1px dashed #c3c4c7; padding: 12px 0; text-align: center;">
<p style="font-size: 11px; line-height: 16px; color: #2C3338; display: block; margin: 0; mso-line-height-rule: exactly">
<span style="padding-right: 10px">
<?php
Expand All @@ -138,8 +141,8 @@
</td>
</tr>
<tr>
<td style="border-bottom: 1px dashed #c3c4c7; padding-top: 12px; padding-bottom: 12px;">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0;">
<td style="border-bottom: 1px dashed #c3c4c7; padding: 12px 0;">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<th style="font-size: 12px; padding-bottom: 4px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly; text-align: left;">Pages</th>
<th style="font-size: 12px; padding-bottom: 4px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly; text-align: right;">Difference</th>
Expand Down Expand Up @@ -178,8 +181,8 @@
</td>
</tr>
<tr>
<td style="border-bottom: 1px dashed #c3c4c7; padding-top: 12px; padding-bottom: 12px;">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0;">
<td style="border-bottom: 1px dashed #c3c4c7; padding: 12px 0;">
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; border-spacing: 0; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<th style="font-size: 14px; padding-bottom: 4px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly; text-align: left;">Total</th>
<th style="font-size: 14px; padding-bottom: 4px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly; text-align: right;">
Expand All @@ -202,12 +205,12 @@
</td>
</tr>
<tr>
<td style="border-bottom: 1px dashed #c3c4c7; padding-top: 12px; padding-bottom: 12px; font-size: 11px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly;">
<td style="border-bottom: 1px dashed #c3c4c7; padding: 12px 0; font-size: 11px; line-height: 16px; color: #2C3338; mso-line-height-rule: exactly;">
<table>
<tr>
<td><?php esc_html_e( 'Trigger', 'visual-regression-tests' ); ?></td>
<td style="padding-left: 5px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#f0e8f8" width="100.00%" style="border-radius: 100px; background-color: <?php echo Test_Run::get_trigger_background_color( $data['run'] ); ?>; width: 100%; border-spacing: 0; border-collapse: separate">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#f0e8f8" width="100.00%" style="border-radius: 100px; background-color: <?php echo Test_Run::get_trigger_background_color( $data['run'] ); ?>; width: 100%; border-spacing: 0; border-collapse: separate; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td align="center" valign="middle">
<p style="font-size: 12px; font-weight: 400; line-height: 16px; color: <?php echo Test_Run::get_trigger_text_color( $data['run'] ); ?>; mso-line-height-alt: 16px; margin: 0; padding: 4px 10px"><?php echo esc_html( Test_Run::get_trigger_title( $data['run'] ) ); ?></p>
Expand All @@ -233,25 +236,27 @@
</td>
</tr>
<tr>
<td width="1">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#1954ed" width="100.00%" style="border-radius: 2px; background-color: #1954ed; width: 100%; border-spacing: 0; border-collapse: separate">
<td width="1" style="padding-bottom: 12px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#1954ed" width="100.00%" style="border-radius: 2px; background-color: #1954ed; width: 100%; border-spacing: 0; border-collapse: separate; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td align="center" valign="middle">
<a href="<?php echo Url_Helpers::get_test_run_page( $data['run'] ); ?>" style="font-size: 14px; font-weight: 600; color: white; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px; text-decoration: none; display: block; padding: 8px 12px;"><?php esc_html_e( 'View Details', 'visual-regression-tests' ); ?></a>
<td align="center" valign="middle" style="padding: 8px 24px;">
<a href="<?php echo Url_Helpers::get_test_run_page( $data['run'] ); ?>" style="font-size: 14px; font-weight: 600; color: white; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px; text-decoration: none; display: block;"><?php esc_html_e( 'View Details', 'visual-regression-tests' ); ?></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui; margin-top: 10px; margin-bottom: 20px;">
<table border="0" cellspacing="0" width="100%" bgcolor="#ffffff" style="background-color: #ffffff; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui;">
<tr>
<td style="padding: 0 20px;">
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly"><?php esc_html_e( 'Your VRTs squad! 🚀', 'visual-regression-tests' ); ?></p>
<td style="padding: 20px 20px;">
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly; margin: 0"><?php esc_html_e( 'Your VRTs squad! 🚀', 'visual-regression-tests' ); ?></p>
<p style="font-size: 14px; line-height: 16px; color: #2C3338; display: block; mso-line-height-rule: exactly">
<?php
printf(
Expand Down
20 changes: 15 additions & 5 deletions components/test-run-alerts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {

this.$runsMenuItems = [
document.querySelector(
'.vrts_navigation_link[href*="page=vrts-runs"]'
'.vrts-admin-header [href*="page=vrts-runs"]'
),
document.querySelector(
'#adminmenu .menu-top[href*="page=vrts"] .wp-menu-name'
Expand Down Expand Up @@ -188,10 +188,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {

window.history.replaceState( {}, '', href );

window.scrollTo( {
top: $content.offsetTop - 62,
behavior: 'smooth',
} );
this.scrollTo( $content.offsetTop - 62 );

if ( $newContent ) {
$content.replaceWith( $newContent );
Expand Down Expand Up @@ -274,6 +271,19 @@ class VrtsTestRunAlerts extends window.HTMLElement {
} );
}

scrollTo( offset ) {
const $el =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
window;

$el.scrollTo( {
top: offset,
behavior: 'smooth',
} );
}

disconnectedCallback() {
this.$alerts?.forEach( ( item ) => {
item.removeEventListener( 'click', this.handleAlertClick );
Expand Down
1 change: 1 addition & 0 deletions components/test-run-page/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
<?php else : ?>
<?php
vrts()->component( 'test-run-success', [
'run' => $data['run'],
'is_receipt' => $data['is_receipt'],
] );
?>
Expand Down
18 changes: 14 additions & 4 deletions components/test-run-pagination/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,7 @@ class VrtsTestRunPagination extends window.HTMLElement {

window.history.replaceState( {}, '', href );

window.scrollTo( {
top: $content.offsetTop - 62,
behavior: 'smooth',
} );
this.scrollTo( $content.offsetTop - 62 );

const loadingTimeoutTime =
loadingElapsedTime > 0
Expand Down Expand Up @@ -127,6 +124,19 @@ class VrtsTestRunPagination extends window.HTMLElement {
}
}

scrollTo( offset ) {
const $el =
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
window;

$el.scrollTo( {
top: offset,
behavior: 'smooth',
} );
}

disconnectedCallback() {
this.$buttons?.forEach( ( item ) => {
item.removeEventListener( 'click', this.handleClick );
Expand Down
2 changes: 1 addition & 1 deletion components/test-run-success/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@
blockquote {
margin: 2rem auto 0 auto;
max-width: 350px;
text-wrap: balance;

p,
cite {
color: $gray-50;
margin: 5px;
// font-style: italic;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.01em;
Expand Down
1 change: 1 addition & 0 deletions components/test-run-success/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
],
];

mt_srand( $data['run']->id ); // phpcs:ignore WordPress.WP.AlternativeFunctions.rand_seeding_mt_srand -- It's ok.
$random_quote = $quotes[ array_rand( $quotes ) ];

?>
Expand Down
7 changes: 5 additions & 2 deletions components/test-runs-page/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
}

.vrts-test-runs-list-table {
position: relative;
overflow: hidden;

.check-column {
text-align: center;
Expand Down Expand Up @@ -56,8 +58,8 @@
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
left: -38px;
width: 100vw;
height: 100%;
}
}
Expand Down Expand Up @@ -131,6 +133,7 @@

.subsubsub:has(+ &) {
float: none;
text-align: left;
}
}

Expand Down
2 changes: 1 addition & 1 deletion includes/features/class-onboarding.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ public function get_onboardings() {
],
[
'title' => wp_kses_post( __( '⏰ Daily Tests & Pro Automations', 'visual-regression-tests' ) ),
'description' => wp_kses_post( __( "The <strong>Daily Test Run</strong> captures screenshots of your <strong>test pages</strong> and performs <strong>side-by-side comparisons</strong> to instantly spot changes.<br><br><strong>Upgrade to Pro</strong> to automate Tests for WordPress and plugin updates, integrate deployment pipelines, and run <strong>Manual Tests</strong> on demand.", 'visual-regression-tests' ) ),
'description' => wp_kses_post( __( 'The <strong>Daily Test Run</strong> captures screenshots of your <strong>test pages</strong> and performs <strong>side-by-side comparisons</strong> to instantly spot changes.<br><br><strong>Upgrade to Pro</strong> to automate Tests for WordPress and plugin updates, integrate deployment pipelines, and run <strong>Manual Tests</strong> on demand.', 'visual-regression-tests' ) ),
],
[
'side' => 'right',
Expand Down
12 changes: 12 additions & 0 deletions includes/features/class-test-runs-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,20 @@ class Test_Runs_Page {
* Constructor.
*/
public function __construct() {
add_action( 'admin_init', [ $this, 'remove_admin_notices' ] );
add_action( 'admin_menu', [ $this, 'add_submenu_page' ] );
add_action( 'admin_body_class', [ $this, 'add_body_class' ] );

}

/**
* Remove admin notices.
*/
public function remove_admin_notices() {
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Nonce verification is not required here.
if ( isset( $_GET['page'] ) && 'vrts-runs' === $_GET['page'] && isset( $_GET['run_id'] ) ) {
remove_all_actions( 'admin_notices' );
}
}

/**
Expand Down
Loading

0 comments on commit af08141

Please sign in to comment.