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

Refine secondary rail icons and animations
Build and Deploy Gateway / build-and-push (push) Successful in 23s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-14 23:40:05 +03:00
parent 5a21a09b82
commit 978fe71628
7 changed files with 104 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/versions.ts
+2 -2
View File
@@ -1,6 +1,6 @@
export const HARBOR_VERSIONS = Object.freeze({ export const HARBOR_VERSIONS = Object.freeze({
macClient: '0.25.12', macClient: '0.25.13',
gatewayClient: '0.26.11', gatewayClient: '0.26.12',
gatewayBackend: '0.26.5', gatewayBackend: '0.26.5',
}); });
src/web/features/devices/DevicesFeature.tsx
+5 -5
View File
@@ -243,11 +243,11 @@ export function DevicesToggle({
onClick={onToggle} onClick={onToggle}
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<rect className="client-rail-device-primary" x="3.5" y="5" width="7" height="10" rx="1.5" /> <rect className="client-rail-device-primary" x="3" y="4.5" width="9" height="11" rx="1.5" />
<rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" /> <rect className="client-rail-device-secondary" x="15" y="7" width="6" height="9" rx="1.4" />
<path className="client-rail-device-link" d="M7 15v4h3.5M17 15v4h-3.5" /> <path className="client-rail-device-link" d="M5.5 19.5h4M7.5 15.5v4" />
<path className="client-rail-device-bridge" d="M10.5 19h3" /> <path className="client-rail-device-bridge" d="M12 11.5h3" />
<path className="client-rail-device-pulse" pathLength="1" d="M7 19h10" /> <path className="client-rail-device-pulse" pathLength="1" d="M12 11.5h3" />
</svg> </svg>
</RailAction>; </RailAction>;
} }
src/web/features/instructions/InstructionsFeature.tsx
+3 -3
View File
@@ -249,9 +249,9 @@ export function InstructionsToggle({
onClick={onToggle} onClick={onToggle}
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<path className="client-rail-book-page is-left" d="M12 7.5C10.2 6.1 7.7 5.7 5 6v11c2.8-.3 5.2.3 7 1.7z" /> <circle className="client-rail-info-ring" cx="12" cy="12" r="8.5" pathLength="1" />
<path className="client-rail-book-page is-right" d="M12 7.5c1.8-1.4 4.3-1.8 7-1.5v11c-2.8-.3-5.2.3-7 1.7z" /> <circle className="client-rail-info-sweep" cx="12" cy="12" r="8.5" pathLength="1" />
<path className="client-rail-book-spine" d="M12 7.5v11.2" /> <path className="client-rail-info-mark" d="M12 11v5M12 8h.01" />
</svg> </svg>
</RailAction>; </RailAction>;
} }
src/web/features/routing/RoutingFeature.tsx
+2 -2
View File
@@ -416,8 +416,8 @@ export function RoutingToggle({
> >
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<path className="client-rail-rule-track" d="M4 7h16M4 17h16" /> <path className="client-rail-rule-track" d="M4 7h16M4 17h16" />
<circle className="client-rail-rule-knob is-top" cx="12" cy="7" r="2" /> <circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
<circle className="client-rail-rule-knob is-bottom" cx="12" cy="17" r="2" /> <circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
</svg> </svg>
</RailAction> </RailAction>
); );
src/web/styles/primitives.css
+61 -44
View File
@@ -71,8 +71,9 @@
.client-rail-subscription-back, .client-rail-subscription-back,
.client-rail-subscription-front, .client-rail-subscription-front,
.client-rail-subscription-lines, .client-rail-subscription-lines,
.client-rail-book-page, .client-rail-info-ring,
.client-rail-book-spine, .client-rail-info-sweep,
.client-rail-info-mark,
.client-rail-device-primary, .client-rail-device-primary,
.client-rail-device-secondary, .client-rail-device-secondary,
.client-rail-device-link, .client-rail-device-link,
@@ -83,7 +84,7 @@
.client-rail-rule-knob { .client-rail-rule-knob {
transform-box: fill-box; transform-box: fill-box;
transform-origin: center; transform-origin: center;
transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, stroke-dasharray 620ms cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
} }
.client-rail-action .client-rail-subscription-card, .client-rail-action .client-rail-subscription-card,
@@ -92,63 +93,52 @@
} }
.client-rail-subscription-back { .client-rail-subscription-back {
transform: translate(-1.4px, 1.4px); transform: translate(0, 0);
}
.client-rail-subscription-front {
transform: translateX(1px);
} }
.client-rail-subscription-lines { .client-rail-subscription-lines {
opacity: 0.52; opacity: 0.9;
transform: scaleX(0.68);
transform-origin: left center; transform-origin: left center;
} }
.client-subscription-toggle.is-open .client-rail-subscription-back { .client-subscription-toggle.is-open .client-rail-subscription-back {
transform: translate(0, 0); transform: translate(0.6px, -0.6px);
} }
.client-subscription-toggle.is-open .client-rail-subscription-front { .client-subscription-toggle.is-open .client-rail-subscription-front {
transform: translate(-1px, 0.6px); transform: translate(-1.5px, 1px);
} }
.client-subscription-toggle.is-open .client-rail-subscription-lines { .client-subscription-toggle.is-open .client-rail-subscription-lines {
opacity: 1; opacity: 1;
transform: scaleX(1); animation: client-rail-detail-pulse 10s ease-in-out infinite;
} }
.client-rail-book-page.is-left { .client-rail-info-ring {
transform: translateX(1.7px) scaleX(0.58); stroke-dasharray: 1 0;
transform-origin: right center; stroke-dashoffset: 0.25;
} }
.client-rail-book-page.is-right { .client-rail-info-sweep {
transform: translateX(-1.7px) scaleX(0.58); stroke-width: 2.4;
transform-origin: left center; stroke-dasharray: 0.14 0.86;
opacity: 0;
} }
.client-rail-book-spine { .client-instructions-toggle.is-open .client-rail-info-ring {
opacity: 0.55; stroke-dasharray: 0.78 0.22;
transform: scaleY(0.74);
} }
.client-instructions-toggle.is-open .client-rail-book-page, .client-instructions-toggle.is-open .client-rail-info-mark {
.client-instructions-toggle.is-open .client-rail-book-spine { transform: translateY(-0.6px);
opacity: 1;
transform: translate(0, 0) scale(1);
} }
.client-rail-device-primary { .client-instructions-toggle.is-open .client-rail-info-sweep {
transform: translate(-0.9px, -1.8px); animation: client-rail-info-scan 10s linear infinite;
}
.client-rail-device-secondary {
transform: translate(0.9px, -1.8px);
} }
.client-rail-device-link { .client-rail-device-link {
opacity: 0.55; opacity: 0.9;
} }
.client-rail-device-bridge { .client-rail-device-bridge {
@@ -163,9 +153,16 @@
stroke-dasharray: 0.16 0.84; stroke-dasharray: 0.16 0.84;
} }
.client-devices-toggle.is-open .client-rail-device-primary, .client-rail-device-pulse {
stroke-dasharray: 0.5 0.5;
}
.client-devices-toggle.is-open .client-rail-device-primary {
transform: translateX(0.6px);
}
.client-devices-toggle.is-open .client-rail-device-secondary { .client-devices-toggle.is-open .client-rail-device-secondary {
transform: translate(0, 0); transform: translateX(-0.6px);
} }
.client-devices-toggle.is-open .client-rail-device-link { .client-devices-toggle.is-open .client-rail-device-link {
@@ -178,13 +175,13 @@
} }
.client-devices-toggle.is-open .client-rail-device-pulse { .client-devices-toggle.is-open .client-rail-device-pulse {
animation: client-rail-device-signal 760ms cubic-bezier(0.16, 1, 0.3, 1); animation: client-rail-device-signal 10s linear infinite;
} }
.client-rail-diagnostics-base, .client-rail-diagnostics-base,
.client-rail-diagnostics-pulse { .client-rail-diagnostics-pulse {
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
transform: scaleY(0.22); transform: scaleY(0.8);
} }
.client-diagnostics-toggle.is-open .client-rail-diagnostics-base, .client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
@@ -193,27 +190,47 @@
} }
.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse { .client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
animation: client-rail-diagnostics-scan 760ms cubic-bezier(0.16, 1, 0.3, 1); animation: client-rail-diagnostics-scan 10s linear infinite;
} }
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top { .client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
transform: translateX(3px); transform: translateX(2px);
} }
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom { .client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
transform: translateX(-3px); transform: translateX(-2px);
}
.client-local-rules-toggle.is-open .client-rail-rule-knob {
animation: client-rail-rule-pulse 10s ease-in-out infinite;
}
@keyframes client-rail-detail-pulse {
0%, 8%, 100% { transform: translateX(0); }
4% { transform: translateX(0.8px); }
}
@keyframes client-rail-info-scan {
0% { opacity: 0; stroke-dashoffset: 1; }
2%, 8% { opacity: 1; }
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
} }
@keyframes client-rail-device-signal { @keyframes client-rail-device-signal {
0% { opacity: 0; stroke-dashoffset: 1; } 0% { opacity: 0; stroke-dashoffset: 1; }
18%, 78% { opacity: 1; } 2%, 8% { opacity: 1; }
100% { opacity: 0; stroke-dashoffset: 0; } 10%, 100% { opacity: 0; stroke-dashoffset: 0; }
} }
@keyframes client-rail-diagnostics-scan { @keyframes client-rail-diagnostics-scan {
0% { opacity: 0; stroke-dashoffset: 1; } 0% { opacity: 0; stroke-dashoffset: 1; }
16%, 84% { opacity: 1; } 2%, 8% { opacity: 1; }
100% { opacity: 0; stroke-dashoffset: 0; } 10%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes client-rail-rule-pulse {
0%, 10%, 100% { stroke-width: 1.6; }
5% { stroke-width: 2.4; }
} }
.client-local-rules-toggle:disabled { .client-local-rules-toggle:disabled {
test/web/responsive-layout-contract.test.js
+18 -10
View File
@@ -147,25 +147,33 @@ test('secondary menus share one right rail and switch equal drawers as a vertica
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/); 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(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/); assert.match(subscription, /client-rail-subscription-back[\s\S]*client-rail-subscription-front[\s\S]*client-rail-subscription-lines/);
assert.match(instructions, /client-rail-book-page is-left[\s\S]*client-rail-book-page is-right[\s\S]*client-rail-book-spine/); assert.match(instructions, /client-rail-info-ring[\s\S]*client-rail-info-sweep[\s\S]*client-rail-info-mark/);
assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/); assert.match(component, /<InstructionsToggle[\s\S]*<DevicesToggle[\s\S]*<DiagnosticsToggle[\s\S]*<RoutingToggle/);
assert.match(diagnosticsFeature, /client-rail-diagnostics-base[\s\S]*client-rail-diagnostics-pulse/); assert.match(diagnosticsFeature, /client-rail-diagnostics-base[\s\S]*client-rail-diagnostics-pulse/);
assert.match(devices, /client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-pulse/); assert.match(devices, /client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-device-bridge[\s\S]*client-rail-device-pulse/);
assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/); assert.match(routing, /client-rail-rule-track[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
assert.match(styles, /\.client-rail-subscription-back \{[\s\S]*translate\(-1\.4px, 1\.4px\)/); assert.match(styles, /\.client-rail-subscription-lines \{[\s\S]*opacity:\s*0\.9/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-1px, 0\.6px\)/); assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-front \{[\s\S]*translate\(-1\.5px, 1px\)/);
assert.match(styles, /\.client-rail-book-page\.is-left \{[\s\S]*scaleX\(0\.58\)/); assert.match(styles, /\.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*1 0/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-book-page,[\s\S]*scale\(1\)/); assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-ring \{[\s\S]*stroke-dasharray:\s*0\.78 0\.22/);
assert.match(styles, /\.client-rail-device-primary \{[\s\S]*translate\(-0\.9px, -1\.8px\)/); assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-primary \{[\s\S]*translateX\(0\.6px\)/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-secondary \{[\s\S]*translateX\(-0\.6px\)/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/); assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-bridge \{[\s\S]*scaleX\(1\)/);
assert.match(styles, /\.client-rail-diagnostics-base,[\s\S]*scaleY\(0\.22\)/); assert.match(styles, /\.client-rail-diagnostics-base,[\s\S]*scaleY\(0\.8\)/);
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-base,[\s\S]*scaleY\(1\)/); assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-base,[\s\S]*scaleY\(1\)/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(3px\)/); assert.match(routing, /client-rail-rule-knob is-top" cx="15"[\s\S]*client-rail-rule-knob is-bottom" cx="9"/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-3px\)/); assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-top \{[\s\S]*translateX\(2px\)/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob\.is-bottom \{[\s\S]*translateX\(-2px\)/);
assert.match(styles, /\.client-subscription-toggle\.is-open \.client-rail-subscription-lines \{[\s\S]*animation:\s*client-rail-detail-pulse 10s/);
assert.match(styles, /\.client-instructions-toggle\.is-open \.client-rail-info-sweep \{[\s\S]*animation:\s*client-rail-info-scan 10s/);
assert.match(styles, /\.client-devices-toggle\.is-open \.client-rail-device-pulse \{[\s\S]*animation:\s*client-rail-device-signal 10s/);
assert.match(styles, /\.client-diagnostics-toggle\.is-open \.client-rail-diagnostics-pulse \{[\s\S]*animation:\s*client-rail-diagnostics-scan 10s/);
assert.match(styles, /\.client-local-rules-toggle\.is-open \.client-rail-rule-knob \{[\s\S]*animation:\s*client-rail-rule-pulse 10s/);
assert.match(styles, /@keyframes client-rail-info-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.match(styles, /@keyframes client-rail-device-signal[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/); assert.match(styles, /@keyframes client-rail-device-signal[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.match(styles, /@keyframes client-rail-diagnostics-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/); assert.match(styles, /@keyframes client-rail-diagnostics-scan[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
assert.match(styles, /transition: transform 620ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/); assert.match(styles, /transition: transform 620ms cubic-bezier\(0\.16, 1, 0\.3, 1\)/);
assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top/); assert.doesNotMatch(styles, /client-rail-info-refill|client-rail-device-left|client-rail-rule-top|client-rail-book-page/);
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/); 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/); assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/); assert.match(rule('.client-drawer'), /width:\s*min\(580px, 100vw\)/);
test/web/style-boundaries.test.js
+13 -13
View File
@@ -37,26 +37,26 @@ const expectedImports = [
const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex'); const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
const acceptedLedger = { const acceptedLedger = {
counts: { counts: {
cascadeEdges: 822, cascadeEdges: 823,
customProperties: 103, customProperties: 103,
declarations: 3325, declarations: 3333,
important: 0, important: 0,
keyframes: 52, keyframes: 55,
media: 12, media: 12,
rules: 953, rules: 961,
variableReferences: 811, variableReferences: 811,
}, },
hashes: { hashes: {
cascadeEdges: 'c9c0e3988cea68ecc1c5e06e12b3b12fe9bb4d20482a67abcf838296ccf9740f', cascadeEdges: '20d8763bd907f8182994186e2c53e03885ecdcb8dda07c69ff7e64b5ac808625',
customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb', customProperties: 'ef70fb1d9b61b177f1939f811babe1116bee631de26f5eac0aa0d0009ca5a1fb',
declarations: '856c8aa1395c435723a52d709a39c9d37e0ede48ddb59f4ce8eff91d695e605d', declarations: '633264a595c8ade20cae3adb50bb484c61c22f430b7760155efb4ec4b15d30de',
duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945', duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e', duplicateSelectors: '0fa66e370695261a2a5c6a189752c07d518d80d68d3e79a3ba4bb34407893c0e',
keyframes: 'd3050d026f6fba3975cf6bb07320d0c3f400c3b3b6eaa3cecbc53b0b137083a3', keyframes: '35e40cc917b4c0d5a99bb0a3a626736e134167d29cf303ec41d02bf713d18637',
ruleDeclarationSequences: 'e129c791ddbc3fa3f28fe4fb5565688a7e2e212eff2f8f8e85d76394f9628847', ruleDeclarationSequences: 'b7643608ce8526684769dc22bf6641962e324093f9f20b6239e7d71dab031272',
selectors: '4ab0b3b0944d13512d5ea28255d031b4b2cb7469883057e8f16ab090580fbd51', selectors: '896dc29ad2ed823b0754d4c667c093c5733bc54af951cf2b9ed83e9c022836d5',
variableReferences: '0ffb99792db35b451fb35d1ced24e1aeef3a6df769cb37bf3d61229b0c970eba', variableReferences: '0ffb99792db35b451fb35d1ced24e1aeef3a6df769cb37bf3d61229b0c970eba',
witnesses: 'c502e252880f18c633b82d09bf349de134c52da4b67a8dfadd327ee01b464692', witnesses: 'f9c177d5f967c116a1f8a79c05a6d1faf1231775045dbafbc1772d2f916e40e0',
}, },
}; };
@@ -405,8 +405,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1); assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css')); const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
assert.deepEqual(assets, ['index-D5lRz6FV.css']); assert.deepEqual(assets, ['index-Ceg2DPeq.css']);
const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0])); const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
assert.equal(built.byteLength, 129198); assert.equal(built.byteLength, 129584);
assert.equal(sha256(built), '1108b32f6d493f170b7683a1947c248c5d4e1295dd810bdc0f0935d133c28497'); assert.equal(sha256(built), '8ccbb067a01c28e729a1aa34908a96e508f07fb9e12c0d05ead10ddc959731bc');
}); });