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

Refine Harbor mode swap icon animation
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 12s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 15:56:02 +03:00
parent aa54be9c9b
commit 89feffd0b7
2 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -95,8 +95,8 @@ function HarborBrand({ isGateway, gatewayAvailable, gatewayDirect, busy, onSetGa
<em className="harbor-mode-gateway">Gateway</em> <em className="harbor-mode-gateway">Gateway</em>
</span> </span>
<svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true"> <svg className="harbor-mode-swap" viewBox="0 0 18 18" aria-hidden="true">
<path className="is-connect" d="M3 6h10m-3-3 3 3-3 3" /> <g className="is-connect"><path d="M3 6h10m-3-3 3 3-3 3" /></g>
<path className="is-gateway" d="M15 12H5m3 3-3-3 3-3" /> <g className="is-gateway"><path d="M15 12H5m3 3-3-3 3-3" /></g>
</svg> </svg>
<span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip"> <span id="harbor-mode-tooltip" className="harbor-mode-tooltip" role="tooltip">
<strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong> <strong>{gatewayDirect ? 'Harbor Gateway активен' : 'Harbor Gateway доступен'}</strong>

36
src/web/styles.css
View File

@@ -288,6 +288,7 @@ p {
transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
} }
.harbor-mode-swap g,
.harbor-mode-swap path { .harbor-mode-swap path {
transform-box: fill-box; transform-box: fill-box;
transform-origin: center; transform-origin: center;
@@ -295,10 +296,20 @@ p {
.harbor-mode-swap .is-connect { .harbor-mode-swap .is-connect {
stroke: var(--harbor-connect); stroke: var(--harbor-connect);
transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
} }
.harbor-mode-swap .is-gateway { .harbor-mode-swap .is-gateway {
stroke: var(--harbor-gateway); stroke: var(--harbor-gateway);
transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}
.harbor-brand.is-gateway-active .harbor-mode-swap .is-connect {
transform: translateY(6px);
}
.harbor-brand.is-gateway-active .harbor-mode-swap .is-gateway {
transform: translateY(-6px);
} }
.harbor-mode-tooltip { .harbor-mode-tooltip {
@@ -345,24 +356,24 @@ p {
opacity: 1; opacity: 1;
} }
.harbor-brand-control:hover .harbor-mode-swap .is-connect, .harbor-brand-control:hover .harbor-mode-swap .is-connect path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect { .harbor-brand-control:focus-visible .harbor-mode-swap .is-connect path {
animation: harbor-arrow-float-up 1500ms ease-in-out infinite; animation: harbor-arrow-float-right 1500ms ease-in-out infinite;
} }
.harbor-brand-control:hover .harbor-mode-swap .is-gateway, .harbor-brand-control:hover .harbor-mode-swap .is-gateway path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway { .harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway path {
animation: harbor-arrow-float-down 1500ms ease-in-out infinite; animation: harbor-arrow-float-left 1500ms ease-in-out infinite;
} }
@keyframes harbor-arrow-float-up { @keyframes harbor-arrow-float-right {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateX(0); }
50% { transform: translateY(-1.5px); } 50% { transform: translateX(1.5px); }
} }
@keyframes harbor-arrow-float-down { @keyframes harbor-arrow-float-left {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateX(0); }
50% { transform: translateY(1.5px); } 50% { transform: translateX(-1.5px); }
} }
.client-instructions-toggle { .client-instructions-toggle {
@@ -1839,6 +1850,7 @@ p {
} }
.harbor-mode-stack em, .harbor-mode-stack em,
.harbor-mode-swap g,
.harbor-mode-swap path, .harbor-mode-swap path,
.harbor-brand .harbor-mode-swap, .harbor-brand .harbor-mode-swap,
.harbor-mode-tooltip { .harbor-mode-tooltip {