dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refine rule delete animation and bump Harbor versions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 14s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-12 00:17:17 +03:00
parent d49a1f6837
commit 4ed25301db
4 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/shared/versions.js
View File

@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.6.9',
gatewayClient: '0.6.8',
macClient: '0.6.10',
gatewayClient: '0.6.9',
gatewayBackend: '0.6.0',
});

3
src/web/components/ClientOverviewPage.jsx
View File

@@ -402,7 +402,8 @@ function LocalRulesPanel({
>
<svg viewBox="0 0 20 20" aria-hidden="true">
<circle cx="10" cy="10" r="6" />
<path d="m6.8 10.1 2.1 2.2 4.5-5" />
<path className="client-rule-check" d="m6.8 10.1 2.1 2.2 4.5-5" />
<path className="client-rule-delete-cross" d="m6 6 8 8M14 6l-8 8" />
</svg>
</button>
<RuleTypePicker

39
src/web/styles.css
View File

@@ -962,9 +962,12 @@ p {
.client-delete-strike {
--client-delete-strike-y: 50%;
position: absolute;
inset: 0;
top: 0;
right: 0;
bottom: 0;
left: 12px;
z-index: 100;
background: radial-gradient(ellipse at 50% var(--client-delete-strike-y), oklch(0.68 0.15 28 / 0.3) 0%, oklch(0.68 0.15 28 / 0.12) 36%, transparent 74%);
background: linear-gradient(90deg, oklch(0.68 0.15 28 / 0.3), oklch(0.68 0.15 28 / 0.12) 48%, transparent);
opacity: 0;
pointer-events: none;
transform: scaleX(0);
@@ -979,7 +982,7 @@ p {
top: calc(var(--client-delete-strike-y) - 2px);
height: 4px;
background: oklch(0.68 0.15 28);
clip-path: polygon(0 50%, 18% 40%, 50% 28%, 82% 40%, 100% 50%, 82% 60%, 50% 72%, 18% 60%);
clip-path: polygon(0 8%, 100% 50%, 0 92%);
filter: drop-shadow(0 0 2px oklch(0.68 0.15 28 / 0.5));
}
@@ -992,6 +995,11 @@ p {
z-index: 0;
}
.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;
@@ -1020,11 +1028,19 @@ p {
transition: fill 320ms ease, stroke 260ms ease;
}
.client-local-rule-enabled path {
.client-rule-check {
stroke-width: 1.8;
stroke-dasharray: 12;
stroke-dashoffset: 12;
transition: stroke-dashoffset 360ms cubic-bezier(0.16, 1, 0.3, 1);
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'] {
@@ -1040,10 +1056,21 @@ p {
fill: color-mix(in oklch, var(--client-accent) 12%, transparent);
}
.client-local-rule-enabled[aria-checked='true'] path {
.client-local-rule-enabled[aria-checked='true'] .client-rule-check {
stroke-dashoffset: 0;
}
.client-deletable-row.is-removing .client-local-rule-enabled circle,
.client-deletable-row.is-removing .client-rule-check {
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;
min-width: 0;