From ba15a25c89fd590d2dc2390dfb37e1372863b204 Mon Sep 17 00:00:00 2001 From: Dmitriy Petrov Date: Sun, 12 Jul 2026 11:00:54 +0300 Subject: [PATCH] Refine local rule delete animation and bump Harbor versions --- src/shared/versions.js | 4 +-- src/web/components/ClientOverviewPage.jsx | 1 - src/web/styles.css | 38 +++-------------------- test/web/rule-editor-contract.test.js | 7 ++--- 4 files changed, 10 insertions(+), 40 deletions(-) diff --git a/src/shared/versions.js b/src/shared/versions.js index 30310fe..9221360 100644 --- a/src/shared/versions.js +++ b/src/shared/versions.js @@ -1,6 +1,6 @@ export const HARBOR_VERSIONS = Object.freeze({ - macClient: '0.6.15', - gatewayClient: '0.6.14', + macClient: '0.6.16', + gatewayClient: '0.6.15', gatewayBackend: '0.6.0', }); diff --git a/src/web/components/ClientOverviewPage.jsx b/src/web/components/ClientOverviewPage.jsx index d3452b4..5d67f57 100644 --- a/src/web/components/ClientOverviewPage.jsx +++ b/src/web/components/ClientOverviewPage.jsx @@ -403,7 +403,6 @@ function LocalRulesPanel({ .client-delete-strike { @@ -1008,11 +998,6 @@ p { animation: client-delete-content-dim 820ms ease-out both; } -.client-deletable-row.is-removing > .client-local-rule-enabled { - z-index: 101; - color: oklch(0.68 0.15 28); -} - .client-local-rule-enabled { width: 24px; height: 32px; @@ -1048,14 +1033,6 @@ p { transition: opacity 160ms ease, stroke-dashoffset 360ms cubic-bezier(0.16, 1, 0.3, 1); } -.client-rule-delete-cross { - stroke-width: 1.6; - opacity: 0; - transform: rotate(-35deg) scale(0.55); - transform-origin: center; - transition: opacity 160ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1); -} - .client-local-rule-enabled[aria-checked='true'] { color: var(--client-accent); } @@ -1078,11 +1055,6 @@ p { opacity: 0; } -.client-deletable-row.is-removing .client-rule-delete-cross { - opacity: 1; - transform: rotate(0) scale(1); - filter: drop-shadow(0 0 3px oklch(0.68 0.15 28 / 0.55)); -} .client-rule-type { position: relative; @@ -1350,15 +1322,15 @@ p { } @keyframes client-delete-strike { - 0% { opacity: 1; transform: scaleX(0); transform-origin: left center; } - 42%, 52% { opacity: 1; transform: scaleX(1); transform-origin: left center; } - 53% { opacity: 1; transform: scaleX(1); transform-origin: right center; } + 0% { opacity: 0.58; transform: scaleX(0); transform-origin: left center; } + 42%, 52% { opacity: 0.58; transform: scaleX(1); transform-origin: left center; } + 53% { opacity: 0.58; transform: scaleX(1); transform-origin: right center; } 100% { opacity: 0; transform: scaleX(0); transform-origin: right center; } } @keyframes client-delete-content-dim { - 0%, 42% { opacity: 0.58; filter: brightness(0.55) saturate(0.65) blur(0.7px); } - 62%, 100% { opacity: 0.28; filter: brightness(0.42) saturate(0.5) blur(1.5px); } + 0%, 52% { opacity: 0.58; filter: brightness(0.55) saturate(0.65) blur(1.4px); } + 100% { opacity: 0; filter: brightness(0.42) saturate(0.5) blur(2.6px); } } @keyframes client-local-rules-notice { diff --git a/test/web/rule-editor-contract.test.js b/test/web/rule-editor-contract.test.js index d77e12f..e8d7c6d 100644 --- a/test/web/rule-editor-contract.test.js +++ b/test/web/rule-editor-contract.test.js @@ -21,19 +21,18 @@ test('rule editor add latency stays constant and dirty exits are guarded', () => assert.match(component, /Перезапустить VPN/); assert.match(component, /client-deletable-row/); assert.match(component, /className="client-delete-strike"[\s\S]*onAnimationEnd/); - assert.match(component, /client-rule-delete-cross/); + assert.doesNotMatch(component, /client-rule-delete-cross/); assert.match(component, /className="client-local-rule-delete"/); assert.match(styles, /\.client-deletable-row\.is-removing > \.client-delete-strike[\s\S]*client-delete-strike/); assert.match(styles, /\.client-delete-strike \{[\s\S]*z-index: 100[\s\S]*background: transparent/); assert.match(styles, /\.client-deletable-row\.is-removing > :not\(\.client-delete-strike\)[\s\S]*z-index: 0/); - assert.match(styles, /\.client-deletable-row\.is-removing > \.client-local-rule-enabled[\s\S]*z-index: 101/); assert.match(styles, /clip-path: polygon\(0 24%, 100% 50%, 0 76%\)/); - assert.match(styles, /\.client-delete-strike::before[\s\S]*20% 8%[\s\S]*filter: blur\(3px\)/); + assert.doesNotMatch(styles, /\.client-delete-strike::before/); assert.doesNotMatch(styles, /client-local-rule > button:last-child/); assert.match(styles, /@keyframes client-delete-strike[\s\S]*scaleX\(0\)[\s\S]*scaleX\(1\)/); assert.match(styles, /53%[\s\S]*transform-origin: right center[\s\S]*100%[\s\S]*scaleX\(0\)/); assert.match(styles, /@keyframes client-local-rule-leave[\s\S]*translateX\(28px\)/); - assert.match(styles, /@keyframes client-delete-content-dim[\s\S]*brightness\(0\.55\)[\s\S]*blur\(0\.7px\)[\s\S]*brightness\(0\.42\)/); + assert.match(styles, /@keyframes client-delete-content-dim[\s\S]*opacity: 0\.58[\s\S]*blur\(1\.4px\)[\s\S]*opacity: 0/); assert.match(styles, /\.client-local-rule:has\(\.client-rule-type\.is-open\)[\s\S]*z-index: 5/); });