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/);