diff --git a/src/shared/versions.js b/src/shared/versions.js
index 91f4547..15edc3c 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({
- macClient: '0.17.14',
- gatewayClient: '0.18.14',
+ macClient: '0.17.15',
+ gatewayClient: '0.18.15',
gatewayBackend: '0.18.1',
});
diff --git a/src/web/components/ClientOverviewPage.jsx b/src/web/components/ClientOverviewPage.jsx
index e7018ad..93e002e 100644
--- a/src/web/components/ClientOverviewPage.jsx
+++ b/src/web/components/ClientOverviewPage.jsx
@@ -1164,7 +1164,7 @@ export function ClientOverviewPage({
Устройства
}
@@ -1183,7 +1183,8 @@ export function ClientOverviewPage({
}}
>
Диагностика
diff --git a/src/web/styles.css b/src/web/styles.css
index 98d6456..9d815e4 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -1693,22 +1693,23 @@ p {
filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
}
-.client-rail-info-ring,
.client-rail-device-primary,
.client-rail-device-secondary,
-.client-rail-device-link,
-.client-rail-diagnostics-wave,
.client-rail-rule-knob {
transform-box: fill-box;
transform-origin: center;
}
-.client-rail-info-ring,
-.client-rail-device-link,
-.client-rail-diagnostics-wave {
+.client-rail-info-ring {
stroke-dasharray: 1;
}
+.client-rail-diagnostics-pulse {
+ stroke-width: 2.4;
+ opacity: 0;
+ stroke-dasharray: 0.16 0.84;
+}
+
.client-instructions-toggle.is-open:not(.client-devices-toggle):not(.client-diagnostics-toggle) .client-rail-info-ring {
animation: client-rail-info-refill 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -1721,12 +1722,8 @@ p {
animation: client-rail-device-right 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
-.client-devices-toggle.is-open .client-rail-device-link {
- animation: client-rail-device-link 680ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-wave {
- animation: client-rail-diagnostics-wave 760ms cubic-bezier(0.16, 1, 0.3, 1);
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
+ animation: client-rail-diagnostics-pulse 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
@@ -1744,38 +1741,32 @@ p {
@keyframes client-rail-device-left {
0%, 100% { transform: translate(0, 0); }
- 45% { transform: translate(1.5px, -1px); }
- 72% { transform: translate(0.5px, 0); }
+ 38%, 58% { transform: translate(-0.6px, -2.25px); }
+ 82% { transform: translate(0.15px, 0.35px); }
}
@keyframes client-rail-device-right {
0%, 100% { transform: translate(0, 0); }
- 45% { transform: translate(-1.5px, 1px); }
- 72% { transform: translate(-0.5px, 0); }
+ 38%, 58% { transform: translate(0.6px, -2.25px); }
+ 82% { transform: translate(-0.15px, 0.35px); }
}
-@keyframes client-rail-device-link {
- from { opacity: 0.28; stroke-dashoffset: 1; }
- to { opacity: 1; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-diagnostics-wave {
- 0%, 100% { stroke-dashoffset: 0; transform: scaleY(1); }
- 32% { stroke-dashoffset: -0.24; transform: scaleY(0.68); }
- 68% { stroke-dashoffset: -0.58; transform: scaleY(1.32); }
- 84% { stroke-dashoffset: -0.82; transform: scaleY(0.9); }
+@keyframes client-rail-diagnostics-pulse {
+ 0% { opacity: 0; stroke-dashoffset: 1; }
+ 16%, 84% { opacity: 1; }
+ 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes client-rail-rule-top {
0%, 100% { transform: translateX(0); }
- 42% { transform: translateX(3px); }
- 72% { transform: translateX(-1px); }
+ 42% { transform: translateX(-3px); }
+ 72% { transform: translateX(1px); }
}
@keyframes client-rail-rule-bottom {
0%, 100% { transform: translateX(0); }
- 42% { transform: translateX(-3px); }
- 72% { transform: translateX(1px); }
+ 42% { transform: translateX(3px); }
+ 72% { transform: translateX(-1px); }
}
.client-local-rules-toggle:disabled {
diff --git a/test/web/responsive-layout-contract.test.js b/test/web/responsive-layout-contract.test.js
index 716b331..2c328dd 100644
--- a/test/web/responsive-layout-contract.test.js
+++ b/test/web/responsive-layout-contract.test.js
@@ -112,9 +112,12 @@ test('secondary menus share one right rail and both drawers open from the right'
assert.match(disabledRulesLabel, /opacity:\s*0/);
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
- assert.match(component, /client-rail-info-ring[\s\S]*client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
- assert.match(styles, /client-rail-info-refill[\s\S]*client-rail-device-left[\s\S]*client-rail-device-right[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-top[\s\S]*client-rail-rule-bottom/);
- assert.match(styles, /@keyframes client-rail-diagnostics-wave[\s\S]*scaleY\(0\.68\)[\s\S]*scaleY\(1\.32\)/);
+ assert.match(component, /client-rail-info-ring[\s\S]*client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-base[\s\S]*client-rail-diagnostics-pulse[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
+ assert.match(styles, /client-rail-info-refill[\s\S]*client-rail-device-left[\s\S]*client-rail-device-right[\s\S]*client-rail-diagnostics-pulse[\s\S]*client-rail-rule-top[\s\S]*client-rail-rule-bottom/);
+ assert.match(styles, /\.client-rail-diagnostics-pulse \{[\s\S]*stroke-dasharray: 0\.16 0\.84/);
+ assert.match(styles, /@keyframes client-rail-diagnostics-pulse[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
+ assert.match(styles, /@keyframes client-rail-device-left[\s\S]*translate\(-0\.6px, -2\.25px\)[\s\S]*@keyframes client-rail-device-right[\s\S]*translate\(0\.6px, -2\.25px\)/);
+ assert.match(styles, /@keyframes client-rail-rule-top[\s\S]*translateX\(-3px\)[\s\S]*@keyframes client-rail-rule-bottom[\s\S]*translateX\(3px\)/);
assert.match(styles, /@keyframes client-rail-info-refill[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);