Refine client rail icons and motion
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
export const HARBOR_VERSIONS = Object.freeze({
|
||||
macClient: '0.25.13',
|
||||
gatewayClient: '0.26.12',
|
||||
macClient: '0.25.14',
|
||||
gatewayClient: '0.26.13',
|
||||
gatewayBackend: '0.26.5',
|
||||
});
|
||||
|
||||
|
||||
@@ -243,11 +243,13 @@ export function DevicesToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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="15" y="7" width="6" height="9" rx="1.4" />
|
||||
<path className="client-rail-device-link" d="M5.5 19.5h4M7.5 15.5v4" />
|
||||
<path className="client-rail-device-bridge" d="M12 11.5h3" />
|
||||
<path className="client-rail-device-pulse" pathLength="1" d="M12 11.5h3" />
|
||||
<g className="client-rail-device-monitor">
|
||||
<rect x="2.5" y="4.5" width="9" height="10.5" rx="1.5" />
|
||||
<path d="M5 19h4M7 15v4" />
|
||||
</g>
|
||||
<rect className="client-rail-device-phone" x="16.5" y="7" width="5" height="9" rx="1.3" />
|
||||
<path className="client-rail-device-bridge" d="M11.5 11.5h5" />
|
||||
<path className="client-rail-device-packet" pathLength="1" d="M11.5 11.5h5" />
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -60,8 +60,12 @@ export function DiagnosticsToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path className="client-rail-diagnostics-base" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
|
||||
<path className="client-rail-diagnostics-pulse" pathLength="1" d="M3 12h4l2.2-5 4.2 10 2.1-5H21" />
|
||||
<g className="client-rail-diagnostics-glass">
|
||||
<circle cx="9.5" cy="9.5" r="6.5" />
|
||||
<path d="m14.2 14.2 6.3 6.3" />
|
||||
<path className="client-rail-diagnostics-trace" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
<path className="client-rail-diagnostics-scan" pathLength="1" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
</g>
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -416,6 +416,8 @@ export function RoutingToggle({
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path className="client-rail-rule-track" d="M4 7h16M4 17h16" />
|
||||
<path className="client-rail-rule-scan is-top" pathLength="1" d="M4 7h16" />
|
||||
<path className="client-rail-rule-scan is-bottom" pathLength="1" d="M4 17h16" />
|
||||
<circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
|
||||
<circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
|
||||
</svg>
|
||||
|
||||
@@ -318,10 +318,11 @@ export function SubscriptionToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect className="client-rail-subscription-back" x="6" y="4.5" width="13" height="15" rx="1.5" />
|
||||
<rect className="client-rail-subscription-back" x="6" y="4" width="14" height="15" rx="2" />
|
||||
<g className="client-rail-subscription-front">
|
||||
<rect className="client-rail-subscription-card" x="4" y="6.5" width="13" height="13" rx="1.5" />
|
||||
<path className="client-rail-subscription-lines" d="M7.5 10.5h6M7.5 14h4" />
|
||||
<rect className="client-rail-subscription-card" x="4" y="6" width="14" height="14" rx="2" />
|
||||
<path className="client-rail-subscription-lines" d="M7.5 10.5h6.5M7.5 14.5H12" />
|
||||
<path className="client-rail-subscription-scan" pathLength="1" d="M7.5 10.5H14" />
|
||||
</g>
|
||||
</svg>
|
||||
</RailAction>;
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
}
|
||||
|
||||
.client-rail-action {
|
||||
--client-rail-state-duration: 340ms;
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 48px;
|
||||
@@ -26,11 +27,16 @@
|
||||
height: 23px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.6;
|
||||
stroke-width: 1.75;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
overflow: visible;
|
||||
transition: color 240ms ease, filter 360ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
transition: color 240ms ease, filter 360ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-rail-action:active:not(:disabled) svg {
|
||||
transform: scale(0.94);
|
||||
transition: color 120ms ease, filter 120ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-rail-action > span {
|
||||
@@ -70,21 +76,16 @@
|
||||
|
||||
.client-rail-subscription-back,
|
||||
.client-rail-subscription-front,
|
||||
.client-rail-subscription-lines,
|
||||
.client-rail-info-ring,
|
||||
.client-rail-info-sweep,
|
||||
.client-rail-info-mark,
|
||||
.client-rail-device-primary,
|
||||
.client-rail-device-secondary,
|
||||
.client-rail-device-link,
|
||||
.client-rail-device-monitor,
|
||||
.client-rail-device-phone,
|
||||
.client-rail-device-bridge,
|
||||
.client-rail-device-pulse,
|
||||
.client-rail-diagnostics-base,
|
||||
.client-rail-diagnostics-pulse,
|
||||
.client-rail-diagnostics-glass,
|
||||
.client-rail-rule-knob {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
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);
|
||||
transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.client-rail-action .client-rail-subscription-card,
|
||||
@@ -92,53 +93,29 @@
|
||||
fill: var(--client-bg);
|
||||
}
|
||||
|
||||
.client-rail-subscription-back {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.client-rail-subscription-lines {
|
||||
opacity: 0.9;
|
||||
transform-origin: left center;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-back {
|
||||
transform: translate(0.6px, -0.6px);
|
||||
transform: translate(1.5px, -1px);
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-front {
|
||||
transform: translate(-1.5px, 1px);
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-lines {
|
||||
opacity: 1;
|
||||
animation: client-rail-detail-pulse 10s ease-in-out infinite;
|
||||
transform: translate(-2px, 1px);
|
||||
}
|
||||
|
||||
.client-rail-info-ring {
|
||||
stroke-dasharray: 1 0;
|
||||
stroke-dashoffset: 0.25;
|
||||
}
|
||||
|
||||
.client-rail-info-sweep {
|
||||
stroke-width: 2.4;
|
||||
stroke-dasharray: 0.14 0.86;
|
||||
opacity: 0;
|
||||
stroke-dashoffset: 0.1;
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-info-ring {
|
||||
stroke-dasharray: 0.78 0.22;
|
||||
stroke-dasharray: 0.9 0.1;
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-info-mark {
|
||||
transform: translateY(-0.6px);
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-info-sweep {
|
||||
animation: client-rail-info-scan 10s linear infinite;
|
||||
}
|
||||
|
||||
.client-rail-device-link {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.client-rail-device-bridge {
|
||||
@@ -146,27 +123,27 @@
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.client-rail-device-pulse,
|
||||
.client-rail-diagnostics-pulse {
|
||||
.client-rail-subscription-scan,
|
||||
.client-rail-info-sweep,
|
||||
.client-rail-device-packet,
|
||||
.client-rail-diagnostics-scan,
|
||||
.client-rail-rule-scan {
|
||||
stroke-width: 2.4;
|
||||
opacity: 0;
|
||||
stroke-dasharray: 0.16 0.84;
|
||||
stroke-dasharray: 0.18 0.82;
|
||||
stroke-dashoffset: 1;
|
||||
}
|
||||
|
||||
.client-rail-device-pulse {
|
||||
stroke-dasharray: 0.5 0.5;
|
||||
.client-rail-device-packet {
|
||||
stroke-dasharray: 0.36 0.64;
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-primary {
|
||||
transform: translateX(0.6px);
|
||||
.client-devices-toggle.is-open .client-rail-device-monitor {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-secondary {
|
||||
transform: translateX(-0.6px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-link {
|
||||
opacity: 1;
|
||||
.client-devices-toggle.is-open .client-rail-device-phone {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-bridge {
|
||||
@@ -174,23 +151,8 @@
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-pulse {
|
||||
animation: client-rail-device-signal 10s linear infinite;
|
||||
}
|
||||
|
||||
.client-rail-diagnostics-base,
|
||||
.client-rail-diagnostics-pulse {
|
||||
vector-effect: non-scaling-stroke;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
|
||||
animation: client-rail-diagnostics-scan 10s linear infinite;
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
|
||||
transform: translate(1px, -1px) rotate(-4deg);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
|
||||
@@ -201,38 +163,25 @@
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob {
|
||||
animation: client-rail-rule-pulse 10s ease-in-out infinite;
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-scan,
|
||||
.client-instructions-toggle.is-open .client-rail-info-sweep,
|
||||
.client-devices-toggle.is-open .client-rail-device-packet,
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan,
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-scan {
|
||||
animation: client-rail-ambient-trace 10s 1.1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes client-rail-detail-pulse {
|
||||
0%, 8%, 100% { transform: translateX(0); }
|
||||
4% { transform: translateX(0.8px); }
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-scan.is-bottom {
|
||||
animation: client-rail-ambient-trace 10s 1.32s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes client-rail-info-scan {
|
||||
@keyframes client-rail-ambient-trace {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
2%, 8% { opacity: 1; }
|
||||
2% { opacity: 1; }
|
||||
8% { opacity: 1; stroke-dashoffset: 0; }
|
||||
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes client-rail-device-signal {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
2%, 8% { opacity: 1; }
|
||||
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes client-rail-diagnostics-scan {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
2%, 8% { opacity: 1; }
|
||||
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 {
|
||||
cursor: default;
|
||||
color: var(--client-muted);
|
||||
@@ -252,6 +201,7 @@
|
||||
}
|
||||
|
||||
.client-rail-action.is-open {
|
||||
--client-rail-state-duration: 480ms;
|
||||
color: var(--client-accent);
|
||||
}
|
||||
|
||||
|
||||
@@ -117,6 +117,10 @@
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.client-rail-action:active:not(:disabled) svg {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.client-local-rule,
|
||||
.client-local-rule-enabled svg,
|
||||
.client-local-rule-enabled circle,
|
||||
|
||||
Reference in New Issue
Block a user