initial
This commit is contained in:
@@ -0,0 +1,13 @@
|
||||
import './admin.scss';
|
||||
|
||||
import './scripts/onboarding';
|
||||
|
||||
function importAll( r ) {
|
||||
r.keys().forEach( r );
|
||||
}
|
||||
|
||||
importAll(
|
||||
require.context( '../components/', true, /\/script\.js$/ ),
|
||||
require.context( '../components/', true, /\/_style\.scss$/ ),
|
||||
require.context( '../includes/core/settings/', true, /\/field\.js$/ )
|
||||
);
|
||||
@@ -0,0 +1,342 @@
|
||||
@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 {
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0;
|
||||
|
||||
&--paused {
|
||||
color: $alert-red;
|
||||
}
|
||||
|
||||
&--running {
|
||||
color: $alert-green;
|
||||
}
|
||||
|
||||
&--waiting {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-vrts_testing_status {
|
||||
width: 3.5rem;
|
||||
|
||||
.vrts-status {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.vrts-icon-status {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin: 3px 10px 0 3px;
|
||||
background: $gray-700;
|
||||
vertical-align: top;
|
||||
|
||||
&--paused {
|
||||
background: $alert-red;
|
||||
}
|
||||
|
||||
&--running {
|
||||
background: $alert-green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-metabox-notice {
|
||||
background: #fff;
|
||||
border: 1px solid $gray-10;
|
||||
border-left-width: 4px;
|
||||
padding: 12px;
|
||||
|
||||
&-is-info {
|
||||
border-left-color: $blue-50;
|
||||
}
|
||||
|
||||
&-is-error {
|
||||
border-left-color: $red-50;
|
||||
}
|
||||
|
||||
&-is-success {
|
||||
border-left-color: $alert-green;
|
||||
}
|
||||
|
||||
+ .vrts-metabox-notice {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,7 @@
|
||||
import './editor.scss';
|
||||
|
||||
function importAll( r ) {
|
||||
r.keys().forEach( r );
|
||||
}
|
||||
|
||||
importAll( require.context( '../editor/plugins/', true, /\/index\.js$/ ) );
|
||||
@@ -0,0 +1,113 @@
|
||||
@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 {
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
margin: 1.5rem 0;
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-transform: none;
|
||||
color: rgb(117, 117, 117);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-testing-status {
|
||||
position: relative;
|
||||
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;
|
||||
|
||||
> :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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.2818 14.1615L9.7663 19.677V0H7.53028V19.677L1.86568 14.1615L0.375 15.6522L8.57376 24L16.7725 15.6522L15.2818 14.1615Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.69064 0.5L0.833496 8.5L2.26207 9.92857L7.69064 4.64286V23.5H9.8335V4.64286L15.1192 9.92857L16.5478 8.5L8.69064 0.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 255 B |
@@ -0,0 +1,4 @@
|
||||
|
||||
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.95385 9.72248L2.23269 6.00132L5.95385 2.28017L5.20962 0.791707L0 6.00132L5.20962 11.2109L5.95385 9.72248Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 244 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 3C7.5 2.17031 6.82969 1.5 6 1.5C5.17031 1.5 4.5 2.17031 4.5 3V6H1.5C0.670312 6 0 6.67031 0 7.5C0 8.32969 0.670312 9 1.5 9H6C6.82969 9 7.5 8.32969 7.5 7.5V3ZM1.5 15C0.670312 15 0 15.6703 0 16.5C0 17.3297 0.670312 18 1.5 18H4.5V21C4.5 21.8297 5.17031 22.5 6 22.5C6.82969 22.5 7.5 21.8297 7.5 21V16.5C7.5 15.6703 6.82969 15 6 15H1.5ZM16.5 3C16.5 2.17031 15.8297 1.5 15 1.5C14.1703 1.5 13.5 2.17031 13.5 3V7.5C13.5 8.32969 14.1703 9 15 9H19.5C20.3297 9 21 8.32969 21 7.5C21 6.67031 20.3297 6 19.5 6H16.5V3ZM15 15C14.1703 15 13.5 15.6703 13.5 16.5V21C13.5 21.8297 14.1703 22.5 15 22.5C15.8297 22.5 16.5 21.8297 16.5 21V18H19.5C20.3297 18 21 17.3297 21 16.5C21 15.6703 20.3297 15 19.5 15H15Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 827 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.10755 1.25781L15.6425 5.14772C15.8084 5.25563 15.9392 5.3976 16.0347 5.57361C16.13 5.74962 16.1777 5.93685 16.1777 6.13532V13.9812C16.1777 14.3571 16.0475 14.6754 15.787 14.9358C15.5265 15.1963 15.2083 15.3266 14.8324 15.3266H3.38274C3.00678 15.3266 2.68856 15.1963 2.42807 14.9358C2.16759 14.6754 2.03735 14.3571 2.03735 13.9812V6.13532C2.03735 5.93685 2.08505 5.74962 2.18043 5.57361C2.27594 5.3976 2.40668 5.25563 2.57264 5.14772L9.10755 1.25781ZM9.10755 9.48435L14.9125 6.02368L9.10755 2.56301L3.30255 6.02368L9.10755 9.48435ZM9.10755 10.7895L3.1537 7.23157V13.9812C3.1537 14.048 3.17516 14.1029 3.21808 14.1458C3.26099 14.1888 3.31588 14.2102 3.38274 14.2102H14.8324C14.8992 14.2102 14.9541 14.1888 14.997 14.1458C15.0399 14.1029 15.0614 14.048 15.0614 13.9812V7.23157L9.10755 10.7895Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 930 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.38249 14.5829C3.00653 14.5829 2.68831 14.4526 2.42783 14.1922C2.16735 13.9317 2.03711 13.6135 2.03711 13.2375V4.76481C2.03711 4.38885 2.16735 4.07063 2.42783 3.81015C2.68831 3.54967 3.00653 3.41943 3.38249 3.41943H10.8419C10.8067 3.60548 10.7878 3.79036 10.7854 3.97406C10.783 4.15777 10.7971 4.345 10.8276 4.53577H3.26788L9.1073 8.25693L11.7951 6.5424C11.9258 6.66545 12.0649 6.77634 12.2122 6.87508C12.3597 6.97381 12.5141 7.06182 12.6753 7.13909L9.1073 9.41625L3.15346 5.60914V13.2375C3.15346 13.3044 3.17491 13.3592 3.21783 13.4022C3.26075 13.4451 3.31564 13.4665 3.38249 13.4665H14.8321C14.899 13.4665 14.9539 13.4451 14.9968 13.4022C15.0397 13.3592 15.0611 13.3044 15.0611 13.2375V7.5313C15.2749 7.48355 15.4736 7.4206 15.6573 7.34245C15.8409 7.26418 16.0143 7.1683 16.1775 7.05481V13.2375C16.1775 13.6135 16.0473 13.9317 15.7868 14.1922C15.5263 14.4526 15.2081 14.5829 14.8321 14.5829H3.38249ZM14.3169 6.12452C13.7492 6.12452 13.2662 5.92531 12.8679 5.5269C12.4695 5.12849 12.2703 4.64548 12.2703 4.07788C12.2703 3.51016 12.4695 3.02709 12.8679 2.62868C13.2662 2.23039 13.7492 2.03125 14.3169 2.03125C14.8846 2.03125 15.3676 2.23039 15.7659 2.62868C16.1643 3.02709 16.3636 3.51016 16.3636 4.07788C16.3636 4.64548 16.1643 5.12849 15.7659 5.5269C15.3676 5.92531 14.8846 6.12452 14.3169 6.12452Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.5 1.5C0.670312 1.5 0 2.17031 0 3V7.5C0 8.32969 0.670312 9 1.5 9C2.32969 9 3 8.32969 3 7.5V4.5H6C6.82969 4.5 7.5 3.82969 7.5 3C7.5 2.17031 6.82969 1.5 6 1.5H1.5ZM3 16.5C3 15.6703 2.32969 15 1.5 15C0.670312 15 0 15.6703 0 16.5V21C0 21.8297 0.670312 22.5 1.5 22.5H6C6.82969 22.5 7.5 21.8297 7.5 21C7.5 20.1703 6.82969 19.5 6 19.5H3V16.5ZM15 1.5C14.1703 1.5 13.5 2.17031 13.5 3C13.5 3.82969 14.1703 4.5 15 4.5H18V7.5C18 8.32969 18.6703 9 19.5 9C20.3297 9 21 8.32969 21 7.5V3C21 2.17031 20.3297 1.5 19.5 1.5H15ZM21 16.5C21 15.6703 20.3297 15 19.5 15C18.6703 15 18 15.6703 18 16.5V19.5H15C14.1703 19.5 13.5 20.1703 13.5 21C13.5 21.8297 14.1703 22.5 15 22.5H19.5C20.3297 22.5 21 21.8297 21 21V16.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 824 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.43627 2.69941C4.87225 2.5812 5.53414 2.47266 6.49519 2.47266C7.47028 2.47266 8.28227 2.63804 9.04284 2.79296L9.05806 2.79606C9.82804 2.95288 11.5466 3.0979 12.407 3.0979C13.3082 3.0979 13.8976 3.04673 14.2535 2.99826C14.4312 2.97405 14.55 2.95061 14.6197 2.93479C14.6546 2.92688 14.6771 2.9209 14.6884 2.91771L14.6968 2.91527C14.8587 2.86242 15.0363 2.88968 15.175 2.98897C15.3155 3.08959 15.3989 3.25182 15.3989 3.42467V10.051C15.3989 10.2804 15.2529 10.4843 15.0358 10.5582L14.8631 10.051C15.0358 10.5582 15.0358 10.5582 15.0358 10.5582L15.0339 10.5589L15.0317 10.5596L15.0268 10.5612L15.0142 10.5652C15.0046 10.5682 14.9925 10.5718 14.9778 10.5759C14.9484 10.5841 14.9085 10.5945 14.857 10.6062C14.754 10.6296 14.6041 10.6584 14.3981 10.6864C13.9864 10.7425 13.3478 10.7959 12.407 10.7959C11.4319 10.7959 9.61997 10.6305 8.8594 10.4756L8.84418 10.4725C8.07419 10.3157 7.35557 10.1706 6.49519 10.1706C5.61427 10.1706 5.0482 10.2702 4.71671 10.3601C4.55104 10.405 4.44374 10.4475 4.38464 10.4742C4.35506 10.4876 4.33741 10.4971 4.33043 10.501L4.3284 10.5021C4.16589 10.6063 3.95942 10.6151 3.78824 10.5244C3.613 10.4315 3.50342 10.2493 3.50342 10.051V3.42467C3.50342 3.24697 3.59151 3.08083 3.73861 2.98112L4.03927 3.42467C3.73861 2.98112 3.73861 2.98112 3.73861 2.98112L3.73984 2.98029L3.74114 2.97942L3.7439 2.97758L3.75014 2.9735L3.7655 2.96381C3.77703 2.9567 3.79117 2.94834 3.80806 2.93891C3.84185 2.92005 3.88656 2.89699 3.94332 2.87134C4.05689 2.82002 4.2182 2.75854 4.43627 2.69941ZM4.57511 3.77577V9.29035C5.00877 9.18671 5.63104 9.09895 6.49519 9.09895C7.47028 9.09895 8.28227 9.26434 9.04284 9.41925L9.05806 9.42235C9.82804 9.57918 11.5466 9.7242 12.407 9.7242C13.3082 9.7242 13.8976 9.67302 14.2535 9.62456C14.2793 9.62104 14.3039 9.61754 14.3272 9.61408V4.06948C13.9144 4.122 13.2955 4.16959 12.407 4.16959C11.4319 4.16959 9.61997 4.0042 8.8594 3.84929L8.84418 3.84619C8.07419 3.68937 7.35557 3.54435 6.49519 3.54435C5.61427 3.54435 5.0482 3.64389 4.71671 3.73376C4.66363 3.74815 4.61654 3.7623 4.57511 3.77577Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.57169 8.65918V16.6355H3.5L3.50319 8.65918H4.57169Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.43627 2.69941C4.87225 2.5812 5.53414 2.47266 6.49519 2.47266C7.47028 2.47266 8.28227 2.63804 9.04284 2.79296L9.05806 2.79606C9.82804 2.95288 11.5466 3.0979 12.407 3.0979C13.3082 3.0979 13.8976 3.04673 14.2535 2.99826C14.4312 2.97405 14.55 2.95061 14.6197 2.93479C14.6546 2.92688 14.6771 2.9209 14.6884 2.91771L14.6968 2.91527C14.8587 2.86242 15.0363 2.88968 15.175 2.98897C15.3155 3.08959 15.3989 3.25182 15.3989 3.42467V10.051C15.3989 10.2804 15.2529 10.4843 15.0358 10.5582L14.8631 10.051C15.0358 10.5582 15.0358 10.5582 15.0358 10.5582L15.0339 10.5589L15.0317 10.5596L15.0268 10.5612L15.0142 10.5652C15.0046 10.5682 14.9925 10.5718 14.9778 10.5759C14.9484 10.5841 14.9085 10.5945 14.857 10.6062C14.754 10.6296 14.6041 10.6584 14.3981 10.6864C13.9864 10.7425 13.3478 10.7959 12.407 10.7959C11.4319 10.7959 9.61997 10.6305 8.8594 10.4756L8.84418 10.4725C8.07419 10.3157 7.35557 10.1706 6.49519 10.1706C5.61427 10.1706 5.0482 10.2702 4.71671 10.3601C4.55104 10.405 4.44374 10.4475 4.38464 10.4742C4.35506 10.4876 4.33741 10.4971 4.33043 10.501L4.3284 10.5021C4.16589 10.6063 3.95942 10.6151 3.78824 10.5244C3.613 10.4315 3.50342 10.2493 3.50342 10.051V3.42467C3.50342 3.24697 3.59151 3.08083 3.73861 2.98112L4.03927 3.42467C3.73861 2.98112 3.73861 2.98112 3.73861 2.98112L3.73984 2.98029L3.74114 2.97942L3.7439 2.97758L3.75014 2.9735L3.7655 2.96381C3.77703 2.9567 3.79117 2.94834 3.80806 2.93891C3.84185 2.92005 3.88656 2.89699 3.94332 2.87134C4.05689 2.82002 4.2182 2.75854 4.43627 2.69941ZM4.57511 3.77577V9.29035C5.00877 9.18671 5.63104 9.09895 6.49519 9.09895C7.47028 9.09895 8.28227 9.26434 9.04284 9.41925L9.05806 9.42235C9.82804 9.57918 11.5466 9.7242 12.407 9.7242C13.3082 9.7242 13.8976 9.67302 14.2535 9.62456C14.2793 9.62104 14.3039 9.61754 14.3272 9.61408V4.06948C13.9144 4.122 13.2955 4.16959 12.407 4.16959C11.4319 4.16959 9.61997 4.0042 8.8594 3.84929L8.84418 3.84619C8.07419 3.68937 7.35557 3.54435 6.49519 3.54435C5.61427 3.54435 5.0482 3.64389 4.71671 3.73376C4.66363 3.74815 4.61654 3.7623 4.57511 3.77577Z" fill="#B32D2E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.57169 8.65918V16.6355H3.5L3.50319 8.65918H4.57169Z" fill="#B32D2E"/>
|
||||
<path d="M4.12842 9.55604V3.46766C4.17448 3.45279 4.22684 3.43716 4.28585 3.42128C4.65442 3.32206 5.28379 3.21216 6.26323 3.21216C7.21984 3.21216 8.01883 3.37227 8.87493 3.54541L8.89185 3.54883C9.73748 3.71986 11.7521 3.90246 12.8362 3.90246C13.8241 3.90246 14.5122 3.84991 14.9712 3.79193V9.91346C14.9453 9.91728 14.9179 9.92114 14.8892 9.92503C14.4935 9.97853 13.8382 10.035 12.8362 10.035C11.8796 10.035 9.96882 9.87492 9.11273 9.70178L9.09581 9.69835C8.25018 9.52732 7.34738 9.34473 6.26323 9.34473C5.30244 9.34473 4.61058 9.44162 4.12842 9.55604Z" fill="#B32D2E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.75244 9.73359H11.0428V8.44324H9.75244V9.73359ZM9.75244 13.6046H11.0428V12.3142H9.75244V13.6046ZM9.75244 17.4755H11.0428V16.1852H9.75244V17.4755ZM13.6234 8.44324V9.73359H14.9138V8.44324H13.6234ZM13.6234 13.6046H14.9138V12.3142H13.6234V13.6046ZM13.6234 17.4755H14.9138V16.1852H13.6234V17.4755Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 431 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.7393 10.5191L10.9035 9.68332C11.0151 9.06697 10.8393 8.51283 10.376 8.0209C9.91286 7.52908 9.34445 7.33899 8.6708 7.45063L7.83503 6.61486C8.00297 6.53944 8.1752 6.48288 8.35171 6.44517C8.52822 6.40747 8.72141 6.38861 8.93128 6.38861C9.77573 6.38861 10.4926 6.6832 11.0817 7.27238C11.6709 7.86157 11.9655 8.57839 11.9655 9.42284C11.9655 9.63271 11.9467 9.82832 11.9089 10.0097C11.8712 10.1909 11.8147 10.3607 11.7393 10.5191ZM14.1065 12.8348L13.285 12.0649C13.7564 11.7051 14.175 11.3113 14.5409 10.8834C14.9068 10.4555 15.22 9.96861 15.4805 9.42284C14.8603 8.17005 13.9703 7.17464 12.8106 6.43661C11.6508 5.69858 10.3577 5.32957 8.93128 5.32957C8.57157 5.32957 8.21806 5.35438 7.87075 5.40399C7.52344 5.45361 7.18234 5.52803 6.84743 5.62726L5.98022 4.76005C6.45057 4.573 6.93097 4.43513 7.42142 4.34644C7.91187 4.25763 8.41515 4.21322 8.93128 4.21322C10.6754 4.21322 12.2483 4.69412 13.6499 5.65592C15.0515 6.61771 16.0739 7.87335 16.717 9.42284C16.4413 10.0878 16.0852 10.7085 15.6487 11.2849C15.2121 11.8612 14.698 12.3778 14.1065 12.8348ZM14.7076 17.14L11.6965 14.1515C11.3148 14.2928 10.8918 14.4083 10.4276 14.4979C9.9634 14.5876 9.46464 14.6325 8.93128 14.6325C7.18234 14.6325 5.60947 14.1516 4.21267 13.1898C2.81575 12.228 1.79336 10.9723 1.14551 9.42284C1.42025 8.76544 1.77519 8.15219 2.21032 7.5831C2.64544 7.01389 3.12442 6.52034 3.64724 6.10245L1.58628 4.01861L2.3707 3.23438L15.4919 16.3555L14.7076 17.14ZM4.43166 6.88669C4.03846 7.19964 3.65605 7.57584 3.28443 8.01531C2.91281 8.45466 2.61201 8.92383 2.38205 9.42284C3.00224 10.6756 3.89222 11.671 5.05198 12.4091C6.21173 13.1471 7.50484 13.5161 8.93128 13.5161C9.27003 13.5161 9.60735 13.4875 9.94325 13.4302C10.279 13.373 10.5638 13.3139 10.7976 13.2528L9.8558 12.2881C9.72891 12.3396 9.58198 12.3806 9.41503 12.4111C9.24807 12.4417 9.08682 12.4571 8.93128 12.4571C8.08682 12.4571 7.37001 12.1625 6.78082 11.5733C6.19164 10.9841 5.89705 10.2673 5.89705 9.42284C5.89705 9.27213 5.91237 9.11448 5.94301 8.94988C5.97352 8.78528 6.01451 8.63476 6.06599 8.49832L4.43166 6.88669Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.23096 13.5C5.81846 13.5 5.46537 13.3531 5.17171 13.0592C4.87787 12.7656 4.73096 12.4125 4.73096 12C4.73096 11.5875 4.87787 11.2344 5.17171 10.9408C5.46537 10.6469 5.81846 10.5 6.23096 10.5C6.64346 10.5 6.99662 10.6469 7.29046 10.9408C7.58412 11.2344 7.73096 11.5875 7.73096 12C7.73096 12.4125 7.58412 12.7656 7.29046 13.0592C6.99662 13.3531 6.64346 13.5 6.23096 13.5ZM12.0002 13.5C11.5877 13.5 11.2346 13.3531 10.941 13.0592C10.6471 12.7656 10.5002 12.4125 10.5002 12C10.5002 11.5875 10.6471 11.2344 10.941 10.9408C11.2346 10.6469 11.5877 10.5 12.0002 10.5C12.4127 10.5 12.7658 10.6469 13.0595 10.9408C13.3533 11.2344 13.5002 11.5875 13.5002 12C13.5002 12.4125 13.3533 12.7656 13.0595 13.0592C12.7658 13.3531 12.4127 13.5 12.0002 13.5ZM17.7695 13.5C17.357 13.5 17.0038 13.3531 16.71 13.0592C16.4163 12.7656 16.2695 12.4125 16.2695 12C16.2695 11.5875 16.4163 11.2344 16.71 10.9408C17.0038 10.6469 17.357 10.5 17.7695 10.5C18.182 10.5 18.535 10.6469 18.8287 10.9408C19.1225 11.2344 19.2695 11.5875 19.2695 12C19.2695 12.4125 19.1225 12.7656 18.8287 13.0592C18.535 13.3531 18.182 13.5 17.7695 13.5Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 100 100" width="16" height="16" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
|
||||
<circle cx="50" cy="50" r="50" vector-effect="non-scaling-stroke" fill="none"></circle>
|
||||
<path d="m 50 0 a 50 50 0 0 1 50 50" vector-effect="non-scaling-stroke" fill="none" stroke="currentColor" stroke-linecap="round" transform-origin="50 50"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 383 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" style="enable-background:new 0 0 20 20" xml:space="preserve"><path fill="black" d="M10.66 19a8.906 8.906 0 0 0 4.914-1.903H10.66V19zm0-3.194h6.254a9.27 9.27 0 0 0 1.236-1.935h-7.49v1.935zm0-3.226h7.992c.188-.63.305-1.279.348-1.936h-8.34v1.936zm7.992-5.16H10.66v1.936H19a8.772 8.772 0 0 0-.348-1.936zm-1.738-3.226H10.66V6.13h7.49v-.001a9.365 9.365 0 0 0-1.236-1.935zM10.66 1v1.904h4.914A8.913 8.913 0 0 0 10.66 1zM1 10a9.047 9.047 0 0 0 2.423 6.145 9.018 9.018 0 0 0 5.949 2.854V1a9.016 9.016 0 0 0-5.949 2.854A9.049 9.049 0 0 0 1 10z"/></svg>
|
||||
|
After Width: | Height: | Size: 626 B |
@@ -0,0 +1 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 245 136" style="enable-background:new 0 0 245 136" xml:space="preserve"><style>.st4{fill:#ababab}</style><path d="M0 0h245v136H0V0z" style="fill:#f6f7f7"/><defs><path id="SVGID_1_" d="M0 0h245v136H0z"/></defs><clipPath id="SVGID_00000075871332272239653010000001685538545955086748_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><g style="clip-path:url(#SVGID_00000075871332272239653010000001685538545955086748_)"><defs><filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="0" y="27.8" width="245" height=".4"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="0" y="27.8" width="245" height=".4" id="c_00000131339708796536986220000018336221103987946920_"><path d="M0 0h245v28H0V0z" style="fill:#fff;filter:url(#Adobe_OpacityMaskFilter)"/></mask><path d="M245 27.8H0v.4h245v-.4z" style="mask:url(#c_00000131339708796536986220000018336221103987946920_);fill:#bfbfbf"/><path class="st4" d="M19 6c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zM139 16h27v8h-27v-8zm-33 0h25v8h-25v-8zM10 45h96v16H10V45z"/><path d="M139.1 45.2h95.7v82.7h-95.7V45.2z" style="fill:#e6e6e6;stroke:#a1a1a1;stroke-width:.3"/><path class="st4" d="M10 84h96v9H10v-9zm0-12h96v7H10v-7zm0 25h48v9H10v-9z"/><path d="M11 117.1h30c.5 0 .9.4.9.9v9c0 .5-.4.9-.9.9H11c-.5 0-.9-.4-.9-.9v-9c0-.5.4-.9.9-.9z" style="fill:#ababab;stroke:#8e8e8e;stroke-width:.2"/><path class="st4" d="M173 16h27v8h-27v-8zm35 0h27v8h-27v-8z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,38 @@
|
||||
export default function Dropdown( $dropdown ) {
|
||||
const $dropdownOpen = $dropdown.querySelector(
|
||||
'[data-vrts-dropdown-open]'
|
||||
);
|
||||
|
||||
const toggleContent = ( e ) => {
|
||||
const $el = e.currentTarget;
|
||||
const controls = $el.getAttribute( 'aria-controls' );
|
||||
const $controls = document.getElementById( controls );
|
||||
const isExpanded = $el.getAttribute( 'aria-expanded' ) === 'true';
|
||||
|
||||
$el.setAttribute( 'aria-expanded', ! isExpanded );
|
||||
$controls.setAttribute( 'aria-hidden', isExpanded );
|
||||
};
|
||||
|
||||
const closeDropdown = ( e ) => {
|
||||
if (
|
||||
$dropdown &&
|
||||
$dropdown !== e.target &&
|
||||
! $dropdown.contains( e.target )
|
||||
) {
|
||||
$dropdownOpen.setAttribute( 'aria-expanded', false );
|
||||
document
|
||||
.getElementById( $dropdownOpen.getAttribute( 'aria-controls' ) )
|
||||
.setAttribute( 'aria-hidden', true );
|
||||
}
|
||||
};
|
||||
|
||||
$dropdownOpen?.addEventListener( 'click', toggleContent );
|
||||
|
||||
// Close dropdown when clicking outside of it.
|
||||
document.addEventListener( 'click', closeDropdown );
|
||||
|
||||
return () => {
|
||||
$dropdownOpen?.removeEventListener( 'click', toggleContent );
|
||||
document.removeEventListener( 'click', closeDropdown );
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import { resolveSelect, dispatch } from '@wordpress/data';
|
||||
import { store as coreStore } from '@wordpress/core-data';
|
||||
import { driver } from 'driver.js';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
import '../styles/onboarding.scss';
|
||||
|
||||
if ( window.vrts_admin_vars.onboarding ) {
|
||||
const isHighlight = window.vrts_admin_vars.onboarding.steps.length === 1;
|
||||
const onboarding = driver( {
|
||||
overlayColor: 'rgba(44, 51, 56, 0.35)',
|
||||
stageRadius: 0,
|
||||
stagePadding: 0,
|
||||
popoverOffset: 20,
|
||||
allowClose: false,
|
||||
showProgress: ! isHighlight,
|
||||
popoverClass: isHighlight
|
||||
? 'vrts-onboarding-nonblocking'
|
||||
: 'vrts-onboarding',
|
||||
disableActiveInteraction: false,
|
||||
progressText: __(
|
||||
'{{current}} of {{total}}',
|
||||
'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',
|
||||
'button-large'
|
||||
);
|
||||
|
||||
popover.nextButton.classList.add(
|
||||
'button',
|
||||
'button-primary',
|
||||
'button-large'
|
||||
);
|
||||
|
||||
if ( ! hasNextStep ) {
|
||||
popover.nextButton.classList.add(
|
||||
'driver-popover-success-btn'
|
||||
);
|
||||
}
|
||||
|
||||
if ( isHighlight ) {
|
||||
popover.previousButton.setAttribute( 'hidden', true );
|
||||
}
|
||||
},
|
||||
onNextClick: ( element, step, { config, state } ) => {
|
||||
const steps = config.steps;
|
||||
const hasNextStep = steps[ state.activeIndex + 1 ];
|
||||
|
||||
if ( ! hasNextStep ) {
|
||||
onboarding.destroy();
|
||||
} else {
|
||||
onboarding.moveNext();
|
||||
}
|
||||
},
|
||||
onCloseClick: () => {
|
||||
onboarding.destroy();
|
||||
},
|
||||
onDestroyed: () => {
|
||||
window.removeEventListener( 'keyup', onKeyup );
|
||||
},
|
||||
steps: window.vrts_admin_vars.onboarding.steps.map( ( step ) => {
|
||||
return {
|
||||
element: step.element,
|
||||
popover: {
|
||||
title: step.title,
|
||||
description: step.description,
|
||||
side: step.side || 'left',
|
||||
align: step.align || 'start',
|
||||
},
|
||||
};
|
||||
} ),
|
||||
} );
|
||||
|
||||
const onKeyup = ( event ) => {
|
||||
if ( event.key === 'Escape' ) {
|
||||
onboarding.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener( 'keyup', onKeyup );
|
||||
|
||||
onboarding.drive();
|
||||
saveOnboarding();
|
||||
}
|
||||
|
||||
async function saveOnboarding() {
|
||||
const {
|
||||
currentUserId,
|
||||
onboarding: { id: onboardingId },
|
||||
} = window.vrts_admin_vars;
|
||||
|
||||
const userData = await resolveSelect( coreStore ).getEntityRecord(
|
||||
'root',
|
||||
'user',
|
||||
currentUserId
|
||||
);
|
||||
|
||||
const onboarding = userData.vrts_onboarding || {};
|
||||
const completed = onboarding.completed || [];
|
||||
|
||||
return dispatch( coreStore ).saveEntityRecord( 'root', 'user', {
|
||||
id: currentUserId,
|
||||
vrts_onboarding: {
|
||||
...onboarding,
|
||||
completed: [ ...completed, onboardingId ].filter(
|
||||
( value, index, self ) => self.indexOf( value ) === index
|
||||
),
|
||||
},
|
||||
} );
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
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, 'D, 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 dayNames = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; // abbreviated day names
|
||||
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';
|
||||
const D = dayNames[ date.getDay() ]; // get the abbreviated day name
|
||||
|
||||
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 )
|
||||
.replace( 'D', D ); // replace capital D with day name
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export default function Tabs( $element ) {
|
||||
const $tabs = $element.querySelectorAll( '[role="tab"]' );
|
||||
const $panels = $element.querySelectorAll( '[role="tabpanel"]' );
|
||||
|
||||
const toggleContent = function () {
|
||||
if ( this.getAttribute( 'aria-selected' ) === 'false' ) {
|
||||
$panels.forEach( ( item ) => {
|
||||
item.setAttribute( 'hidden', true );
|
||||
} );
|
||||
|
||||
$tabs.forEach( ( item ) => {
|
||||
item.setAttribute( 'aria-selected', false );
|
||||
} );
|
||||
|
||||
this.setAttribute( 'aria-selected', 'true' );
|
||||
|
||||
const currentTab = this.getAttribute( 'aria-controls' );
|
||||
const tabContent = document.getElementById( currentTab );
|
||||
tabContent.removeAttribute( 'hidden' );
|
||||
}
|
||||
};
|
||||
|
||||
$tabs.forEach( ( item ) => {
|
||||
item.addEventListener( 'click', toggleContent );
|
||||
} );
|
||||
|
||||
return () => {
|
||||
$tabs.forEach( ( item ) => {
|
||||
item.removeEventListener( 'click', toggleContent );
|
||||
} );
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,554 @@
|
||||
/* eslint-disable */
|
||||
/**
|
||||
* Customized version of wp-includes/js/wplink.js
|
||||
*/
|
||||
|
||||
( function ( $, wpLinkL10n, wp ) {
|
||||
let editor,
|
||||
searchTimer,
|
||||
River,
|
||||
Query,
|
||||
correctedURL,
|
||||
emailRegexp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,63}$/i,
|
||||
urlRegexp = /^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,63}[^ "]*$/i,
|
||||
inputs = {},
|
||||
rivers = {},
|
||||
isTouch = 'ontouchend' in document;
|
||||
|
||||
window.wpLink = {
|
||||
timeToTriggerRiver: 150,
|
||||
minRiverAJAXDuration: 200,
|
||||
riverBottomThreshold: 5,
|
||||
keySensitivity: 100,
|
||||
lastSearch: '',
|
||||
textarea: '',
|
||||
modalOpen: false,
|
||||
|
||||
init() {
|
||||
inputs.wrap = $( '#wp-link-wrap' );
|
||||
inputs.dialog = $( '#wp-link' );
|
||||
inputs.backdrop = $( '#wp-link-backdrop' );
|
||||
inputs.submit = $( '#wp-link-submit' );
|
||||
inputs.close = $( '#wp-link-close' );
|
||||
|
||||
// Input.
|
||||
inputs.url = $( '#wp-link-url' );
|
||||
inputs.url_post_id = $( '#wp-link-id' );
|
||||
inputs.nonce = $( '#_ajax_linking_nonce' );
|
||||
inputs.search = $( '#wp-link-search' );
|
||||
|
||||
// Build rivers.
|
||||
rivers.search = new River( $( '#search-results' ) );
|
||||
rivers.recent = new River( $( '#most-recent-results' ) );
|
||||
rivers.elements = inputs.dialog.find( '.query-results' );
|
||||
|
||||
// Get search notice text.
|
||||
inputs.queryNotice = $( '#query-notice-message' );
|
||||
inputs.queryNoticeTextDefault = inputs.queryNotice.find(
|
||||
'.query-notice-default'
|
||||
);
|
||||
inputs.queryNoticeTextHint =
|
||||
inputs.queryNotice.find( '.query-notice-hint' );
|
||||
|
||||
// Bind event handlers.
|
||||
inputs.dialog.on( 'keydown', wpLink.keydown );
|
||||
inputs.dialog.on( 'keyup', wpLink.keyup );
|
||||
|
||||
inputs.close
|
||||
.add( inputs.backdrop )
|
||||
.add( '#wp-link-cancel button' )
|
||||
.on( 'click', function ( event ) {
|
||||
event.preventDefault();
|
||||
wpLink.close();
|
||||
} );
|
||||
|
||||
rivers.elements.on( 'river-select', wpLink.updateFields );
|
||||
|
||||
// Display 'hint' message when search field or 'query-results' box are focused.
|
||||
inputs.search
|
||||
.on( 'focus.wplink', function () {
|
||||
inputs.queryNoticeTextDefault.hide();
|
||||
inputs.queryNoticeTextHint
|
||||
.removeClass( 'screen-reader-text' )
|
||||
.show();
|
||||
} )
|
||||
.on( 'blur.wplink', function () {
|
||||
inputs.queryNoticeTextDefault.show();
|
||||
inputs.queryNoticeTextHint
|
||||
.addClass( 'screen-reader-text' )
|
||||
.hide();
|
||||
} );
|
||||
|
||||
inputs.search.on( 'keyup input', function ( event ) {
|
||||
window.clearTimeout( searchTimer );
|
||||
searchTimer = window.setTimeout( function () {
|
||||
wpLink.searchInternalLinks();
|
||||
}, 500 );
|
||||
} );
|
||||
|
||||
inputs.search.on( 'keypress', function ( event ) {
|
||||
if ( event.key === 'Enter' || event.keyCode === 13 ) {
|
||||
event.preventDefault();
|
||||
inputs.search.trigger( 'keyup input' );
|
||||
}
|
||||
} );
|
||||
|
||||
inputs.url.on( 'paste', function () {
|
||||
setTimeout( wpLink.correctURL, 0 );
|
||||
} );
|
||||
|
||||
inputs.url.on( 'blur', wpLink.correctURL );
|
||||
},
|
||||
|
||||
// If URL wasn't corrected last time and doesn't start with http:, https:, ? # or /, prepend http://.
|
||||
correctURL() {
|
||||
const url = inputs.url.val().trim();
|
||||
|
||||
if (
|
||||
url &&
|
||||
correctedURL !== url &&
|
||||
! /^(?:[a-z]+:|#|\?|\.|\/)/.test( url )
|
||||
) {
|
||||
inputs.url.val( 'http://' + url );
|
||||
correctedURL = url;
|
||||
}
|
||||
},
|
||||
|
||||
open( url, text ) {
|
||||
let ed,
|
||||
$body = $( document.body );
|
||||
|
||||
$body.addClass( 'modal-open' );
|
||||
wpLink.modalOpen = true;
|
||||
|
||||
inputs.wrap.show();
|
||||
inputs.backdrop.show();
|
||||
|
||||
wpLink.refresh( url, text );
|
||||
|
||||
$( document ).trigger( 'wplink-open', inputs.wrap );
|
||||
},
|
||||
|
||||
refresh( url, text ) {
|
||||
let linkText = '';
|
||||
|
||||
// Refresh rivers (clear links, check visibility).
|
||||
rivers.search.refresh();
|
||||
rivers.recent.refresh();
|
||||
|
||||
// For the Text editor the "Link text" field is always shown.
|
||||
if ( ! inputs.wrap.hasClass( 'has-text-field' ) ) {
|
||||
inputs.wrap.addClass( 'has-text-field' );
|
||||
}
|
||||
|
||||
if ( document.selection ) {
|
||||
// Old IE.
|
||||
linkText = document.selection.createRange().text || text || '';
|
||||
} else if (
|
||||
typeof this.textarea.selectionStart !== 'undefined' &&
|
||||
this.textarea.selectionStart !== this.textarea.selectionEnd
|
||||
) {
|
||||
// W3C.
|
||||
text =
|
||||
this.textarea.value.substring(
|
||||
this.textarea.selectionStart,
|
||||
this.textarea.selectionEnd
|
||||
) ||
|
||||
text ||
|
||||
'';
|
||||
}
|
||||
|
||||
wpLink.setDefaultValues();
|
||||
|
||||
if ( isTouch ) {
|
||||
// Close the onscreen keyboard.
|
||||
inputs.url.trigger( 'focus' ).trigger( 'blur' );
|
||||
} else {
|
||||
/*
|
||||
* Focus the URL field and highlight its contents.
|
||||
* If this is moved above the selection changes,
|
||||
* IE will show a flashing cursor over the dialog.
|
||||
*/
|
||||
window.setTimeout( function () {
|
||||
inputs.url[ 0 ].select();
|
||||
inputs.url.trigger( 'focus' );
|
||||
} );
|
||||
}
|
||||
|
||||
// Load the most recent results if this is the first time opening the panel.
|
||||
if ( ! rivers.recent.ul.children().length ) {
|
||||
rivers.recent.ajax();
|
||||
}
|
||||
|
||||
correctedURL = inputs.url.val().replace( /^http:\/\//, '' );
|
||||
},
|
||||
|
||||
close( reset ) {
|
||||
$( document.body ).removeClass( 'modal-open' );
|
||||
wpLink.modalOpen = false;
|
||||
|
||||
inputs.backdrop.hide();
|
||||
inputs.wrap.hide();
|
||||
|
||||
correctedURL = false;
|
||||
|
||||
$( document ).trigger( 'wplink-close', inputs.wrap );
|
||||
},
|
||||
|
||||
updateFields( e, li ) {
|
||||
inputs.url.val( li.children( '.item-permalink' ).val() );
|
||||
inputs.url_post_id.val( li.children( '.item-id' ).val() );
|
||||
},
|
||||
|
||||
setDefaultValues() {
|
||||
// Empty the search field and swap the "rivers".
|
||||
inputs.search.val( '' );
|
||||
wpLink.searchInternalLinks();
|
||||
},
|
||||
|
||||
searchInternalLinks() {
|
||||
let waiting,
|
||||
search = inputs.search.val() || '',
|
||||
minInputLength = parseInt( wpLinkL10n.minInputLength, 10 ) || 3;
|
||||
|
||||
if ( search.length >= minInputLength ) {
|
||||
rivers.recent.hide();
|
||||
rivers.search.show();
|
||||
|
||||
// Don't search if the keypress didn't change the title.
|
||||
if ( wpLink.lastSearch == search ) return;
|
||||
|
||||
wpLink.lastSearch = search;
|
||||
waiting = inputs.search
|
||||
.parent()
|
||||
.find( '.spinner' )
|
||||
.addClass( 'is-active' );
|
||||
|
||||
rivers.search.change( search );
|
||||
rivers.search.ajax( function () {
|
||||
waiting.removeClass( 'is-active' );
|
||||
} );
|
||||
} else {
|
||||
rivers.search.hide();
|
||||
rivers.recent.show();
|
||||
}
|
||||
},
|
||||
|
||||
next() {
|
||||
rivers.search.next();
|
||||
rivers.recent.next();
|
||||
},
|
||||
|
||||
prev() {
|
||||
rivers.search.prev();
|
||||
rivers.recent.prev();
|
||||
},
|
||||
|
||||
keydown( event ) {
|
||||
let fn, id;
|
||||
|
||||
// Escape key.
|
||||
if ( 27 === event.keyCode ) {
|
||||
wpLink.close();
|
||||
event.stopImmediatePropagation();
|
||||
// Tab key.
|
||||
} else if ( 9 === event.keyCode ) {
|
||||
id = event.target.id;
|
||||
|
||||
// wp-link-submit must always be the last focusable element in the dialog.
|
||||
// Following focusable elements will be skipped on keyboard navigation.
|
||||
if ( id === 'wp-link-submit' && ! event.shiftKey ) {
|
||||
inputs.close.trigger( 'focus' );
|
||||
event.preventDefault();
|
||||
} else if ( id === 'wp-link-close' && event.shiftKey ) {
|
||||
inputs.submit.trigger( 'focus' );
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// Up Arrow and Down Arrow keys.
|
||||
if (
|
||||
event.shiftKey ||
|
||||
( 38 !== event.keyCode && 40 !== event.keyCode )
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
document.activeElement &&
|
||||
( document.activeElement.id === 'link-title-field' ||
|
||||
document.activeElement.id === 'url-field' )
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Up Arrow key.
|
||||
fn = 38 === event.keyCode ? 'prev' : 'next';
|
||||
clearInterval( wpLink.keyInterval );
|
||||
wpLink[ fn ]();
|
||||
wpLink.keyInterval = setInterval(
|
||||
wpLink[ fn ],
|
||||
wpLink.keySensitivity
|
||||
);
|
||||
event.preventDefault();
|
||||
},
|
||||
|
||||
keyup( event ) {
|
||||
// Up Arrow and Down Arrow keys.
|
||||
if ( 38 === event.keyCode || 40 === event.keyCode ) {
|
||||
clearInterval( wpLink.keyInterval );
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
delayedCallback( func, delay ) {
|
||||
let timeoutTriggered, funcTriggered, funcArgs, funcContext;
|
||||
|
||||
if ( ! delay ) return func;
|
||||
|
||||
setTimeout( function () {
|
||||
if ( funcTriggered ) return func.apply( funcContext, funcArgs );
|
||||
// Otherwise, wait.
|
||||
timeoutTriggered = true;
|
||||
}, delay );
|
||||
|
||||
return function () {
|
||||
if ( timeoutTriggered ) return func.apply( this, arguments );
|
||||
// Otherwise, wait.
|
||||
funcArgs = arguments;
|
||||
funcContext = this;
|
||||
funcTriggered = true;
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
River = function ( element, search ) {
|
||||
const self = this;
|
||||
this.element = element;
|
||||
this.ul = element.children( 'ul' );
|
||||
this.contentHeight = element.children( '#link-selector-height' );
|
||||
this.waiting = element.find( '.river-waiting' );
|
||||
|
||||
this.change( search );
|
||||
this.refresh();
|
||||
|
||||
$( '#wp-link .query-results, #wp-link #link-selector' ).on(
|
||||
'scroll',
|
||||
function () {
|
||||
self.maybeLoad();
|
||||
}
|
||||
);
|
||||
element.on( 'click', 'li', function ( event ) {
|
||||
self.select( $( this ), event );
|
||||
} );
|
||||
};
|
||||
|
||||
$.extend( River.prototype, {
|
||||
refresh() {
|
||||
this.deselect();
|
||||
this.visible = this.element.is( ':visible' );
|
||||
},
|
||||
show() {
|
||||
if ( ! this.visible ) {
|
||||
this.deselect();
|
||||
this.element.show();
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
hide() {
|
||||
this.element.hide();
|
||||
this.visible = false;
|
||||
},
|
||||
// Selects a list item and triggers the river-select event.
|
||||
select( li, event ) {
|
||||
let liHeight, elHeight, liTop, elTop;
|
||||
|
||||
if ( li.hasClass( 'unselectable' ) || li == this.selected ) return;
|
||||
|
||||
this.deselect();
|
||||
this.selected = li.addClass( 'selected' );
|
||||
// Make sure the element is visible.
|
||||
liHeight = li.outerHeight();
|
||||
elHeight = this.element.height();
|
||||
liTop = li.position().top;
|
||||
elTop = this.element.scrollTop();
|
||||
|
||||
if ( liTop < 0 )
|
||||
// Make first visible element.
|
||||
this.element.scrollTop( elTop + liTop );
|
||||
else if ( liTop + liHeight > elHeight )
|
||||
// Make last visible element.
|
||||
this.element.scrollTop( elTop + liTop - elHeight + liHeight );
|
||||
|
||||
// Trigger the river-select event.
|
||||
this.element.trigger( 'river-select', [ li, event, this ] );
|
||||
|
||||
// Focus submit button.
|
||||
inputs.submit.focus();
|
||||
},
|
||||
deselect() {
|
||||
if ( this.selected ) this.selected.removeClass( 'selected' );
|
||||
this.selected = false;
|
||||
},
|
||||
prev() {
|
||||
if ( ! this.visible ) return;
|
||||
|
||||
let to;
|
||||
if ( this.selected ) {
|
||||
to = this.selected.prev( 'li' );
|
||||
if ( to.length ) this.select( to );
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if ( ! this.visible ) return;
|
||||
|
||||
const to = this.selected
|
||||
? this.selected.next( 'li' )
|
||||
: $( 'li:not(.unselectable):first', this.element );
|
||||
if ( to.length ) this.select( to );
|
||||
},
|
||||
ajax( callback ) {
|
||||
const self = this,
|
||||
delay = this.query.page == 1 ? 0 : wpLink.minRiverAJAXDuration,
|
||||
response = wpLink.delayedCallback( function (
|
||||
results,
|
||||
params
|
||||
) {
|
||||
self.process( results, params );
|
||||
if ( callback ) callback( results, params );
|
||||
},
|
||||
delay );
|
||||
|
||||
this.query.ajax( response );
|
||||
},
|
||||
change( search ) {
|
||||
if ( this.query && this._search == search ) return;
|
||||
|
||||
this._search = search;
|
||||
this.query = new Query( search );
|
||||
this.element.scrollTop( 0 );
|
||||
},
|
||||
process( results, params ) {
|
||||
let list = '',
|
||||
alt = true,
|
||||
classes = '',
|
||||
firstPage = params.page == 1;
|
||||
|
||||
if ( ! results ) {
|
||||
if ( firstPage ) {
|
||||
list +=
|
||||
'<li class="unselectable no-matches-found"><span class="item-title"><em>' +
|
||||
wpLinkL10n.noMatchesFound +
|
||||
'</em></span></li>';
|
||||
}
|
||||
} else {
|
||||
$.each( results, function () {
|
||||
classes = alt ? 'alternate' : '';
|
||||
classes += this.title ? '' : ' no-title';
|
||||
classes +=
|
||||
this.run_tests_status
|
||||
? ' vrts-tests--active'
|
||||
: '';
|
||||
list += classes ? '<li class="' + classes + '">' : '<li>';
|
||||
|
||||
if ( ! this.run_tests_status ) {
|
||||
list +=
|
||||
'<input type="hidden" class="item-permalink" value="' +
|
||||
this.permalink +
|
||||
'" />';
|
||||
list +=
|
||||
'<input type="hidden" class="item-id" value="' +
|
||||
this.ID +
|
||||
'" />';
|
||||
}
|
||||
list += '<span class="item-title"><strong>';
|
||||
list += this.title ? this.title : wpLinkL10n.noTitle;
|
||||
list += '</strong><br><span class="item-permalink">';
|
||||
list += this.permalink
|
||||
? this.permalink
|
||||
: wpLinkL10n.noTitle;
|
||||
list += '</span>';
|
||||
list +=
|
||||
'</span><span class="item-info">' +
|
||||
this.info +
|
||||
'</span></li>';
|
||||
alt = ! alt;
|
||||
} );
|
||||
}
|
||||
|
||||
this.ul[ firstPage ? 'html' : 'append' ]( list );
|
||||
},
|
||||
maybeLoad() {
|
||||
const self = this,
|
||||
el = this.element,
|
||||
bottom = el.scrollTop() + el.height();
|
||||
|
||||
if (
|
||||
! this.query.ready() ||
|
||||
bottom <
|
||||
this.contentHeight.height() - wpLink.riverBottomThreshold
|
||||
)
|
||||
return;
|
||||
|
||||
setTimeout( function () {
|
||||
const newTop = el.scrollTop(),
|
||||
newBottom = newTop + el.height();
|
||||
|
||||
if (
|
||||
! self.query.ready() ||
|
||||
newBottom <
|
||||
self.contentHeight.height() -
|
||||
wpLink.riverBottomThreshold
|
||||
)
|
||||
return;
|
||||
|
||||
self.waiting.addClass( 'is-active' );
|
||||
el.scrollTop( newTop + self.waiting.outerHeight() );
|
||||
|
||||
self.ajax( function () {
|
||||
self.waiting.removeClass( 'is-active' );
|
||||
} );
|
||||
}, wpLink.timeToTriggerRiver );
|
||||
},
|
||||
} );
|
||||
|
||||
Query = function ( search ) {
|
||||
this.page = 1;
|
||||
this.allLoaded = false;
|
||||
this.querying = false;
|
||||
this.search = search;
|
||||
};
|
||||
|
||||
$.extend( Query.prototype, {
|
||||
ready() {
|
||||
return ! ( this.querying || this.allLoaded );
|
||||
},
|
||||
ajax( callback ) {
|
||||
const self = this,
|
||||
query = {
|
||||
action: 'wp-link-ajax',
|
||||
vrts_filter_query: true,
|
||||
page: this.page,
|
||||
_ajax_linking_nonce: inputs.nonce.val(),
|
||||
};
|
||||
|
||||
if ( this.search ) query.search = this.search;
|
||||
|
||||
this.querying = true;
|
||||
|
||||
$.post(
|
||||
window.ajaxurl,
|
||||
query,
|
||||
function ( r ) {
|
||||
self.page++;
|
||||
self.querying = false;
|
||||
self.allLoaded = ! r;
|
||||
callback( r, query );
|
||||
},
|
||||
'json'
|
||||
);
|
||||
},
|
||||
} );
|
||||
|
||||
$( wpLink.init );
|
||||
} )( jQuery, window.wpLinkL10n, window.wp );
|
||||
@@ -0,0 +1,39 @@
|
||||
:root {
|
||||
--vrts-admin-theme-color: #2271b1;
|
||||
}
|
||||
|
||||
.admin-color-fresh {
|
||||
--vrts-admin-theme-color: #1e8cbe;
|
||||
}
|
||||
|
||||
.admin-color-modern {
|
||||
--vrts-admin-theme-color: #3858e9;
|
||||
}
|
||||
|
||||
.admin-color-light {
|
||||
--vrts-admin-theme-color: #04a4cc;
|
||||
}
|
||||
|
||||
.admin-color-blue {
|
||||
--vrts-admin-theme-color: #e1a948;
|
||||
}
|
||||
|
||||
.admin-color-coffee {
|
||||
--vrts-admin-theme-color: #c7a589;
|
||||
}
|
||||
|
||||
.admin-color-ectoplasm {
|
||||
--vrts-admin-theme-color: #a3b745;
|
||||
}
|
||||
|
||||
.admin-color-midnight {
|
||||
--vrts-admin-theme-color: #dd362d;
|
||||
}
|
||||
|
||||
.admin-color-ocean {
|
||||
--vrts-admin-theme-color: #9ebaa0;
|
||||
}
|
||||
|
||||
.admin-color-sunrise {
|
||||
--vrts-admin-theme-color: #dd823b;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
@keyframes vrts-fade-in {
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vrts-slide-up {
|
||||
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vrts-rotate {
|
||||
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vrts-shimmer {
|
||||
|
||||
0% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vrts-scale-up-down {
|
||||
|
||||
from,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
20% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: scale3d(1.5, 1.5, 1.5);
|
||||
}
|
||||
|
||||
40% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
|
||||
60% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: scale3d(1.3, 1.3, 1.3);
|
||||
}
|
||||
|
||||
80% {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: scale3d(0.8, 0.8, 0.8);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vrts-color-highlight {
|
||||
|
||||
25% {
|
||||
background-color: rgba(32, 113, 177, 0.2);
|
||||
}
|
||||
|
||||
75% {
|
||||
background-color: rgba(32, 113, 177, 0.2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
.driver {
|
||||
|
||||
&-no-interaction {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
animation: vrts-fade-in 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&-popover {
|
||||
all: unset;
|
||||
animation: vrts-fade-in 0.2s;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
color: #1e1e1e;
|
||||
line-height: 1.5;
|
||||
padding: 15px;
|
||||
border-radius: 2px;
|
||||
min-width: 250px;
|
||||
max-width: 345px;
|
||||
box-shadow: 2px 2px 8px 4px rgba(30, 30, 30, 0.12);
|
||||
z-index: 100099;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&-popover-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
&-popover-description {
|
||||
font-size: 0.8125rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&-popover-close-btn {
|
||||
all: unset;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 7px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
display: block !important;
|
||||
background-image: url('data:image/svg+xml,<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.2564 1.41L6.71644 4.95L10.2564 8.49L8.84645 9.9L5.30645 6.37L1.77644 9.9L0.356445 8.48L3.88645 4.95L0.356445 1.42L1.77644 0L5.30645 3.53L8.84645 0L10.2564 1.41Z" fill="%23757575"/></svg>'); // stylelint-disable-line
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 3px;
|
||||
font-size: 0;
|
||||
z-index: 1;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f6f7f7;
|
||||
}
|
||||
}
|
||||
|
||||
&-popover-footer {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
&-popover-navigation-btns {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
|
||||
.button-secondary[disabled] {
|
||||
border-color: #2271b1 !important;
|
||||
color: #2271b1 !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button-secondary,
|
||||
.button-secondary[disabled] {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-popover-prev-btn,
|
||||
&-popover-next-btn {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-popover-prev-btn::before,
|
||||
&-popover-next-btn:not(.driver-popover-success-btn)::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 52%;
|
||||
}
|
||||
|
||||
&-popover-prev-btn::before {
|
||||
// stylelint-disable-next-line
|
||||
background-image: url('data:image/svg+xml,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0572 4.34922V5.64922H3.25723L5.85723 8.24922L5.20723 9.54922L0.657227 4.99922L5.20723 0.449219L5.85723 1.74922L3.25723 4.34922H11.0572Z" fill="%232271B1"/></svg>');
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line
|
||||
&-popover-next-btn::after {
|
||||
// stylelint-disable-next-line
|
||||
background-image: url('data:image/svg+xml,<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.657227 5.64922V4.34922H8.45723L5.85723 1.74922L6.50723 0.449219L11.0572 4.99922L6.50723 9.54922L5.85723 8.24922L8.45723 5.64922H0.657227Z" fill="white"/></svg>');
|
||||
}
|
||||
|
||||
&-popover-progress-text {
|
||||
font-size: 0.75rem;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
&-popover-arrow {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border: 8px solid #fff;
|
||||
|
||||
&-none,
|
||||
&-side-over,
|
||||
&-side-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-side-left {
|
||||
left: 100%;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
&-side-right {
|
||||
right: 100%;
|
||||
border-left-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
&-side-top {
|
||||
top: 100%;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&-side-bottom {
|
||||
bottom: 100%;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
&-side-left.driver-popover-arrow-align-start,
|
||||
&-side-right.driver-popover-arrow-align-start {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&-side-top.driver-popover-arrow-align-start,
|
||||
&-side-bottom.driver-popover-arrow-align-start {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
&-align-end.driver-popover-arrow-side-left,
|
||||
&-align-end.driver-popover-arrow-side-right {
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
&-side-top.driver-popover-arrow-align-end,
|
||||
&-side-bottom.driver-popover-arrow-align-end {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
&-side-left.driver-popover-arrow-align-center,
|
||||
&-side-right.driver-popover-arrow-align-center {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
&-side-top.driver-popover-arrow-align-center,
|
||||
&-side-bottom.driver-popover-arrow-align-center {
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vrts-onboarding-nonblocking ~ .driver-overlay {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user