Skip to content

Commit

Permalink
Merge pull request #63 from bleech/continuousTesting
Browse files Browse the repository at this point in the history
Continuous testing
  • Loading branch information
harunbleech authored May 24, 2024
2 parents 7df30a2 + ffba047 commit a49e6ef
Show file tree
Hide file tree
Showing 32 changed files with 1,387 additions and 789 deletions.
64 changes: 63 additions & 1 deletion assets/admin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@

.vrts_list_table_page {

.testing-status {
.vrts-testing-status {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;

&--paused {
color: $alert-red;
Expand Down Expand Up @@ -76,3 +80,61 @@
margin-bottom: 0;
}
}

.vrts-tooltip {
position: relative;

&-icon {
color: $blue-50;
display: flex;
align-items: center;
justify-content: center;

&::before {
font-size: 1rem;
}

svg {
fill: currentcolor;
}
}

&-content {
display: block;
position: absolute;
visibility: hidden;
padding: 0.5rem;
width: 240px;
z-index: 1000002;
top: -10px;
right: 20px;
}

&-content-inner {
display: block;
background: #000;
border-radius: 2px;
color: #f0f0f0;
font-size: 12px;
line-height: 1.4;
padding: 0.725rem;

a {
color: #fff;
}
}

&:hover &-content {
visibility: visible;
}
}

.vrts-testing-toogle {
display: flex;
align-items: center;
gap: 0.25rem;

.vrts-tooltip {
margin-left: auto;
}
}
86 changes: 52 additions & 34 deletions assets/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,42 +13,8 @@
}
}

.testing-status {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0;

&--paused {
color: $alert-red;
}

&--running {
color: $alert-green;
}

&-wrapper {
margin: 1.5rem 0;

> :first-child {
margin-top: 0;
}

> :last-child {
margin-bottom: 0;
}

.howto {
margin-top: 0.25rem;
font-size: 0.75rem;
color: $gray-700;
}
}
}

.figure {
margin: 0;
aspect-ratio: 16/9;

&-link {
outline: none;
Expand All @@ -60,6 +26,7 @@
}

&-image {
aspect-ratio: 16/9;
border: solid 1px #bfbfbf;
width: 100%;
height: 100%;
Expand All @@ -77,6 +44,10 @@

&-title {
margin-bottom: 0.5rem;
display: flex;
gap: 0.5rem;
justify-content: space-between;
align-items: center;
}

label {
Expand All @@ -91,3 +62,50 @@
}
}
}

.vrts-testing-status {
position: relative;
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0;

&--paused {
color: $alert-red;
}

&--waiting {
color: $alert-yellow;
}

&--running {
color: $alert-green;
}

&-wrapper {
display: flex;
flex-direction: column;
gap: 5px;
margin: 1.5rem 0;

> :first-child {
margin-top: 0;
}

> :last-child {
margin-bottom: 0;
}

.dashicons {
display: none;
}
}

&-info {
display: flex;
justify-content: space-between;
gap: 5px;
font-size: 0.75rem;
color: $gray-700;
}
}
16 changes: 11 additions & 5 deletions assets/scripts/onboarding.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,29 @@ if ( window.vrts_admin_vars.onboarding ) {
const onboarding = driver( {
overlayColor: 'rgba(44, 51, 56, 0.35)',
stageRadius: 0,
animate: false,
stagePadding: 10,
stagePadding: 0,
popoverOffset: 20,
allowClose: false,
showProgress: ! isHighlight,
popoverClass: isHighlight
? 'vrts-onboarding-nonblocking'
: 'vrts-onboarding',
disableActiveInteraction: false,
progressText: __(
'{{current}} of {{total}}',
'visual-regression-tests'
),
nextBtnText: __( 'Next', 'visual-regression-tests' ),
prevBtnText: __( 'Previous', 'visual-regression-tests' ),
nextBtnText: __( 'Next', 'visual-regression-tests' ),
doneBtnText: __( 'Got it!', 'visual-regression-tests' ),
onPopoverRender: ( popover, { config, state } ) => {
const steps = config.steps;
const hasNextStep = steps[ state.activeIndex + 1 ];

config.stagePadding =
window.vrts_admin_vars.onboarding.steps[ state.activeIndex ]
.padding || 0;

popover.previousButton.classList.add(
'button',
'button-secondary',
Expand Down Expand Up @@ -53,14 +60,12 @@ if ( window.vrts_admin_vars.onboarding ) {
const hasNextStep = steps[ state.activeIndex + 1 ];

if ( ! hasNextStep ) {
saveOnboarding();
onboarding.destroy();
} else {
onboarding.moveNext();
}
},
onCloseClick: () => {
saveOnboarding();
onboarding.destroy();
},
steps: window.vrts_admin_vars.onboarding.steps.map( ( step ) => {
Expand All @@ -77,6 +82,7 @@ if ( window.vrts_admin_vars.onboarding ) {
} );

onboarding.drive();
saveOnboarding();
}

async function saveOnboarding() {
Expand Down
88 changes: 88 additions & 0 deletions assets/scripts/relative-time-element.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
class RelativeTimeElement extends window.HTMLElement {
// constructor (element) {
// this.element = element
// // get date from utc timestamp

// // this.time = new Date( element.getAttribute( 'time' ) );
// // this.update();
// }

// observe attribute time
static get observedAttributes() {
return [ 'time' ];
}

// update time when attribute time changes
attributeChangedCallback( name, oldValue, newValue ) {
if ( name === 'time' ) {
this.time = new Date( newValue );
this.update();
}
}

// connectedCallback() {
// this.time = new Date( this.getAttribute( 'time' ) );
// this.update();
// }

update() {
this.innerText = `${ extractDate( this.time ) } at ${ extractTime(
this.time
) }`;
}
}

window.customElements.define( 'vrts-relative-time', RelativeTimeElement );

function extractDate( inputDate ) {
const { __ } = wp.i18n;
const today = new Date();
// Set the time to midnight for an accurate date comparison
today.setHours( 0, 0, 0, 0 );

// Create a Date object for the input date
const comparisonDate = new Date( inputDate );
comparisonDate.setHours( 0, 0, 0, 0 );

// Calculate the difference in days
const difference = ( comparisonDate - today ) / ( 1000 * 3600 * 24 );

// Determine if the date is today, tomorrow, or yesterday
if ( difference === 0 ) {
return __( 'Today', 'visual-regression-testing' );
} else if ( difference === 1 ) {
return __( 'Tomorrow', 'visual-regression-testing' );
} else if ( difference === -1 ) {
return __( 'Yesterday', 'visual-regression-testing' );
}
return dateFormat( inputDate, 'Y/m/d' );
}

function extractTime( inputDate ) {
return dateFormat( inputDate, 'g:i a' );
}

// format date like in php date_format
function dateFormat( date, format ) {
const pad = ( number ) => ( number < 10 ? `0${ number }` : number );
const d = pad( date.getDate() );
const m = pad( date.getMonth() + 1 );
const y = date.getFullYear();
const Y = date.getFullYear();
const H = date.getHours();
const i = pad( date.getMinutes() );
const s = date.getSeconds();
const g = date.getHours() % 12 || 12;
const a = date.getHours() >= 12 ? 'pm' : 'am';

return format
.replace( 'd', d )
.replace( 'm', m )
.replace( 'y', y )
.replace( 'Y', Y )
.replace( 'H', H )
.replace( 'i', i )
.replace( 's', s )
.replace( 'g', g )
.replace( 'a', a );
}
Loading

0 comments on commit a49e6ef

Please sign in to comment.