initial
This commit is contained in:
+98
@@ -0,0 +1,98 @@
|
||||
@import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
|
||||
|
||||
#vrts_post_options_metabox { // stylelint-disable-line selector-id-pattern
|
||||
|
||||
figcaption {
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.figure {
|
||||
margin: 0;
|
||||
|
||||
&-link {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&-image {
|
||||
aspect-ratio: 16/9;
|
||||
border: solid 1px #bfbfbf;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
.howto {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-testing-status {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0;
|
||||
|
||||
&--paused {
|
||||
color: $alert-red;
|
||||
}
|
||||
|
||||
&--waiting {
|
||||
color: #f97b06;
|
||||
}
|
||||
|
||||
&--running {
|
||||
color: $alert-green;
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin: 1.5rem 0;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashicons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 5px;
|
||||
font-size: 0.75rem;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
<?php
|
||||
if ( ! $data['is_connected'] ) {
|
||||
include_once __DIR__ . '/metabox-notifications/metabox-notification-connection-failed.php';
|
||||
return;
|
||||
}
|
||||
?>
|
||||
|
||||
<?php wp_nonce_field( $data['nonce'], $data['nonce'] ); ?>
|
||||
<p class="vrts-testing-toogle">
|
||||
<?php if ( 0 === intval( $data['remaining_tests'] ) && ! $data['run_tests_checked'] ) { ?>
|
||||
<input class="widefat" type="checkbox" id="<?php echo esc_attr( $data['field_test_status_key'] ); ?>" value="0" disabled />
|
||||
<?php } else { ?>
|
||||
<input class="widefat" type="checkbox" name="<?php echo esc_attr( $data['field_test_status_key'] ); ?>" id="<?php echo esc_attr( $data['field_test_status_key'] ); ?>" <?php checked( $data['run_tests_checked'] ); ?> value="1" />
|
||||
<?php } ?>
|
||||
<label for="<?php echo esc_attr( $data['field_test_status_key'] ); ?>"><strong><?php esc_html_e( 'Add to VRTs', 'visual-regression-tests' ); ?></strong></label>
|
||||
<span class="vrts-tooltip">
|
||||
<span class="vrts-tooltip-icon dashicons dashicons-info-outline"></span>
|
||||
<span class="vrts-tooltip-content">
|
||||
<span class="vrts-tooltip-content-inner">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %1$s, %2$s: link wrapper. */
|
||||
wp_kses_post( __( 'Add this page to your Visual Regression Tests for consistent checks to ensure no visual changes go unnoticed. Explore the %1$sTests page%2$s in the VRTs plugin for an overview of all tests and their status.', 'visual-regression-tests' ) ),
|
||||
'<a href="' . esc_url( $data['plugin_url'] ) . '">',
|
||||
'</a>'
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<?php
|
||||
|
||||
// Notification: New Test added.
|
||||
if ( true === $data['is_new_test'] ) {
|
||||
include_once __DIR__ . '/metabox-notifications/metabox-notification-new-test-added.php';
|
||||
} elseif ( 1 === intval( $data['remaining_tests'] ) ) {
|
||||
// Notification: Unlock more tests.
|
||||
include_once __DIR__ . '/metabox-notifications/metabox-notification-unlock-more-tests.php';
|
||||
} elseif ( 0 === intval( $data['remaining_tests'] ) ) {
|
||||
// Notification: Unlock more tests.
|
||||
include_once __DIR__ . '/metabox-notifications/metabox-notification-upgrade-required.php';
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
// Display details only when "Run Tests" checkbox is active.
|
||||
if ( $data['run_tests_checked'] ) {
|
||||
$test_status = $data['test_status'];
|
||||
$screenshot = $data['screenshot'];
|
||||
?>
|
||||
<div class="vrts-testing-status-wrapper">
|
||||
<p class="vrts-testing-status">
|
||||
<span><?php esc_html_e( 'Test Status', 'visual-regression-tests' ); ?></span>
|
||||
<strong class="vrts-testing-status--<?php echo esc_attr( $test_status['class'] ); ?>"><?php echo wp_kses_post( $test_status['text'] ); ?></strong>
|
||||
</p>
|
||||
<p class="vrts-testing-status-info">
|
||||
<?php echo wp_kses_post( $test_status['instructions'] ); ?>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="vrts-testing-status-wrapper">
|
||||
<p class="vrts-testing-status">
|
||||
<span><?php esc_html_e( 'Snapshot', 'visual-regression-tests' ); ?></span>
|
||||
<span class="vrts-testing-status-info">
|
||||
<?php
|
||||
$text = in_array( $screenshot['status'], [ 'paused', 'waiting' ], true ) ? $screenshot['text'] : $screenshot['instructions'];
|
||||
echo wp_kses_post( $text );
|
||||
?>
|
||||
</span>
|
||||
</p>
|
||||
<figure class="figure">
|
||||
<?php echo wp_kses_post( $screenshot['screenshot'] ); ?>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="settings">
|
||||
<input name="test_id" type="hidden" value="<?php echo esc_html( $data['test_settings']['test_id'] ); ?>"/>
|
||||
<label for="vrts-hide-css-selectors" class="settings-title">
|
||||
<span><?php esc_html_e( 'Hide elements from VRTs', 'visual-regression-tests' ); ?></span>
|
||||
<span class="vrts-tooltip">
|
||||
<span class="vrts-tooltip-icon dashicons dashicons-info-outline"></span>
|
||||
<span class="vrts-tooltip-content">
|
||||
<span class="vrts-tooltip-content-inner">
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %1$s, %2$s: link wrapper. */
|
||||
esc_html__( 'Exclude elements on this page: Add %1$sCSS selectors%2$s (as comma separated list) to exclude elements from VRTs when a new snapshot gets created.', 'visual-regression-tests' ),
|
||||
'<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank">',
|
||||
'</a>'
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
<textarea id="vrts-hide-css-selectors" name="hide_css_selectors" placeholder="<?php esc_html_e( 'e.g.: .lottie, #ads', 'visual-regression-tests' ); ?>" rows="4"><?php echo esc_html( $data['test_settings']['hide_css_selectors'] ); ?></textarea>
|
||||
</div>
|
||||
<?php }//end if
|
||||
?>
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
|
||||
use Vrts\Core\Utilities\Url_Helpers;
|
||||
|
||||
?>
|
||||
<div class="vrts-metabox-notice vrts-metabox-notice-is-error">
|
||||
<p><strong><?php esc_html_e( 'Connection failed', 'visual-regression-tests' ); ?></strong></p>
|
||||
<p><?php esc_html_e( 'Something went wrong while trying to connect to the external service.', 'visual-regression-tests' ); ?></p>
|
||||
<p><a href="<?php echo esc_attr( Url_Helpers::get_page_url( 'tests' ) ); ?>"><?php esc_html_e( 'Go to plugin page', 'visual-regression-tests' ); ?></a></p>
|
||||
</div>
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<div class="vrts-metabox-notice vrts-metabox-notice-is-success">
|
||||
<p><strong><?php esc_html_e( 'You have added a new test', 'visual-regression-tests' ); ?></strong></p>
|
||||
<p>
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %s: page title. */
|
||||
esc_html__( 'The Visual Regression Test for the page %s has been added!', 'visual-regression-tests' ),
|
||||
'<strong>' . esc_html( get_the_title( $data['post_id'] ) ) . '</strong>'
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
<?php
|
||||
|
||||
use Vrts\Core\Utilities\Url_Helpers;
|
||||
|
||||
?>
|
||||
<div class="vrts-metabox-notice vrts-metabox-notice-is-info">
|
||||
<p><strong><?php esc_html_e( 'Unlock more tests', 'visual-regression-tests' ); ?></strong></p>
|
||||
<p>
|
||||
<?php
|
||||
printf(
|
||||
'%s %s',
|
||||
sprintf(
|
||||
/* translators: %1$s, %2$s: number of tests. */
|
||||
esc_html__( 'Good work! You have added %1$s of %2$s available tests.', 'visual-regression-tests' ),
|
||||
intval( $data['total_tests'] ) - intval( $data['remaining_tests'] ),
|
||||
intval( $data['total_tests'] )
|
||||
),
|
||||
sprintf(
|
||||
/* translators: %1$s, %2$s: link wrapper. */
|
||||
esc_html__( 'Upgrade %1$shere%2$s to add more tests to your website!', 'visual-regression-tests' ),
|
||||
'<a href="' . esc_url( Url_Helpers::get_page_url( 'upgrade' ) ) . '" target="_blank">',
|
||||
'</a>'
|
||||
)
|
||||
)
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
use Vrts\Core\Utilities\Url_Helpers;
|
||||
|
||||
?>
|
||||
<div class="vrts-metabox-notice vrts-metabox-notice-is-error">
|
||||
<p><strong><?php esc_html_e( 'Ready for an Upgrade?', 'visual-regression-tests' ); ?></strong></p>
|
||||
<p>
|
||||
<?php
|
||||
printf(
|
||||
'%1$s <a href="%2$s" target="_blank" title="%3$s">%3$s</a>',
|
||||
esc_html__( 'Looks like you need a bigger plan to add more tests.', 'visual-regression-tests' ),
|
||||
esc_url( Url_Helpers::get_page_url( 'upgrade' ) ),
|
||||
esc_html__( 'Upgrade here!', 'visual-regression-tests' )
|
||||
);
|
||||
?>
|
||||
</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user