Merge pull request #72 from bleech/TestRuns

Test runs

.github/workflows/main.yml

@@ -7,10 +7,10 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
     - uses: actions/checkout@v3
-    - name: Use Node.js v16
+    - name: Use Node.js v20
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
     - uses: actions/cache@v3
       with:
         path: node_modules

README.md

@@ -1,6 +1,6 @@
 # VRTs - Visual Regression Tests
 
-VRTs - Visual Regression Tests is a plugin to test your website for unwanted visual changes. The plugin runs automatic daily tests for chosen pages and posts. The tool creates daily comparison screenshots and compares them with a reference snapshot. If there is a difference between the screenshots, you'll be automatically notified via email. Use three comparison mode to spot the differences easily.
+Find issues before others do – every time. With automatic screenshots, daily comparisons, and instant tests after WordPress and plugin updates. Select the pages of your choice for continuous monitoring. The plugin immediately notifies you of any visual changes it detects.
 
 > [!IMPORTANT]
 > This repository is for **development purposes**. You need to run the build process for it to work. See the section [Development](#development) for further instructions. To use the plugin on your website, see the section [Installation](#installation).

assets/admin.scss

@@ -1,6 +1,37 @@
 @import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+@import "./styles/admin-color-scheme";
+@import "./styles/animations";
 
-.vrts_list_table_page {
+.vrts-list-table-page {
+
+	.vrts-page-title-action {
+		color: #fff;
+		border-color: var(--vrts-admin-theme-color);
+
+		&:hover {
+			color: #fff;
+			border-color: var(--vrts-admin-theme-color);
+		}
+	}
+
+	tbody {
+		background-color: #f6f7f9;
+	}
+
+	tr {
+		position: relative;
+	}
+
+	th,
+	td {
+		padding: 10px;
+		border-bottom: 1px solid $gray-10;
+
+		&:where(:not(.column-title)) > * {
+			position: relative;
+			z-index: 2;
+		}
+	}
 
 	.vrts-testing-status {
 		display: flex;
@@ -17,7 +48,50 @@
 		}
 
 		&--waiting {
-			color: $alert-yellow;
+			color: #f97b06;
+		}
+	}
+
+	// .test-run-row {
+	// 	background-color: #fff;
+	// 	border: 1px solid $gray-10;
+
+	// 	&[data-unread] {
+	// 		background-color: #FCFCFC;
+	// 	}
+	// }
+}
+
+.vrts-test-runs-list-table:not(.vrts-test-runs-list-queue-table) {
+
+	.test-run-row[data-has-alerts] {
+		background-color: #fff;
+	}
+
+	td {
+
+		> div,
+		strong {
+			align-self: flex-start;
+
+			@media (min-width: 783px) {
+				display: inline-block;
+			}
+		}
+
+
+		&.column-title {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+		}
+
+		&.column-trigger,
+		&.column-status {
+
+			@media (max-width: 782px) {
+				padding-block: 10px !important;
+			}
 		}
 	}
 }
@@ -81,6 +155,42 @@
 	}
 }
 
+.vrts-test-run-trigger {
+	display: inline-block;
+	border-radius: 32px;
+	padding: 4px 10px;
+	font-size: 13px;
+	background: rgba(192, 192, 192, 0.15);
+	color: $gray-80;
+
+	&--api {
+		background: rgba(224, 84, 6, 0.15);
+		color: #ae4204;
+	}
+
+	&--scheduled {
+		background: rgba(106, 26, 185, 0.1);
+		color: #591b98;
+	}
+
+	&--manual {
+		background: rgba(5, 116, 206, 0.1);
+		color: #045495;
+
+	}
+
+	&--update {
+		background: rgba(200, 11, 147, 0.1);
+		color: #a51d7f;
+	}
+
+	&-notes {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
 .vrts-tooltip {
 	position: relative;
 
@@ -138,3 +248,105 @@
 		margin-left: auto;
 	}
 }
+
+.vrts-action-button {
+	display: grid !important;
+	grid-template-columns: max-content max-content;
+
+	&__icons {
+		position: relative;
+		display: grid;
+	}
+
+	&__icon {
+		display: flex;
+		transition: opacity 0.3s;
+		grid-row: 1 / 1;
+		grid-column: 1 / 1;
+	}
+
+	&__info {
+		grid-row: 1 / 1;
+		grid-column: 2 / 3;
+		text-align: left;
+	}
+
+	&__spinner {
+		display: flex;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 1;
+		visibility: hidden;
+		opacity: 0;
+		transition: all 0.3s;
+
+		svg {
+			overflow: visible;
+			width: 14px;
+			height: 14px;
+		}
+
+		circle {
+			stroke-width: 1.5px;
+			stroke: $gray-5;
+		}
+
+		path {
+			stroke-width: 1.5px;
+			animation: 1.4s linear 0s infinite normal both paused vrts-rotate;
+		}
+	}
+
+	&[data-vrts-loading="true"] {
+
+		.vrts-action-button__icon {
+			opacity: 0;
+		}
+
+		.vrts-action-button__spinner {
+			visibility: visible;
+			opacity: 1;
+
+			path {
+				animation-play-state: running;
+			}
+		}
+	}
+
+	&[data-vrts-action-state="primary"] {
+
+		[data-vrts-action-state-secondary] {
+			display: none;
+		}
+	}
+
+	&[data-vrts-action-state="secondary"] {
+
+		[data-vrts-action-state-primary] {
+			display: none;
+		}
+	}
+}
+
+.vrts-gradient-loader {
+	position: absolute;
+	top: 1px;
+	left: 0;
+	width: 100%;
+	height: calc(100% - 1px);
+	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;
+
+	[data-vrts-loading="true"] > & {
+		opacity: 0.6;
+		visibility: visible;
+		animation-play-state: running;
+	}
+}

assets/editor.scss

@@ -1,4 +1,6 @@
 @import "@wordpress/base-styles/colors.native"; // stylelint-disable-line scss/at-import-partial-extension
+@import "./styles/admin-color-scheme";
+@import "./styles/animations";
 
 .vrts_post_options_metabox {
 
@@ -75,7 +77,7 @@
 	}
 
 	&--waiting {
-		color: $alert-yellow;
+		color: #f97b06;
 	}
 
 	&--running {