From bc3cc12f6935fbd289c7f6de1e28df7663ff8734 Mon Sep 17 00:00:00 2001 From: Dmitriy Petrov Date: Tue, 14 Jul 2026 23:06:29 +0300 Subject: [PATCH] Bump Harbor versions and tighten server picker layout --- src/shared/versions.js | 4 +- src/web/components/ServerPicker.jsx | 34 +++++++----- src/web/styles.css | 59 ++++++++++++++------- test/web/responsive-layout-contract.test.js | 5 +- test/web/server-picker.test.js | 10 ++-- 5 files changed, 72 insertions(+), 40 deletions(-) diff --git a/src/shared/versions.js b/src/shared/versions.js index fcc137d..86951a3 100644 --- a/src/shared/versions.js +++ b/src/shared/versions.js @@ -1,6 +1,6 @@ export const HARBOR_VERSIONS = Object.freeze({ - macClient: '0.8.5', - gatewayClient: '0.8.5', + macClient: '0.8.6', + gatewayClient: '0.8.6', gatewayBackend: '0.8.0', }); diff --git a/src/web/components/ServerPicker.jsx b/src/web/components/ServerPicker.jsx index df1e5b2..18cd5c3 100644 --- a/src/web/components/ServerPicker.jsx +++ b/src/web/components/ServerPicker.jsx @@ -59,16 +59,16 @@ function ServerHealth({ ping, fallback }) { function ServerCheckButton({ checking, disabled, onClick }) { return ; } @@ -194,7 +194,10 @@ export function ServerPicker({ return
{prompt && Выберите сервер}
- + Список серверов +
+ +
{prompt && Выберите сервер}
- - + Список серверов +
+ + +
diff --git a/src/web/styles.css b/src/web/styles.css index f34f126..db3c741 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -2027,7 +2027,7 @@ p { .client-form-content { display: grid; align-content: start; - gap: 36px; + gap: 24px; opacity: 1; filter: blur(0); transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1); @@ -2598,17 +2598,17 @@ p { display: grid; grid-template-columns: 1fr; gap: 8px; - width: min(100%, 220px); + width: min(100%, 180px); margin-inline: auto; } .client-server { min-width: 0; min-height: 44px; - display: flex; + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; - justify-content: center; - gap: 9px; + gap: 0; padding: 6px 4px 7px; border: 0; border-bottom: 1px solid var(--client-border); @@ -2663,6 +2663,8 @@ p { } .client-server strong { + grid-column: 2; + justify-self: center; display: block; overflow: hidden; text-overflow: ellipsis; @@ -2679,6 +2681,8 @@ p { } .client-server-health { + grid-column: 3; + justify-self: end; display: grid; place-items: center; white-space: nowrap; @@ -2719,14 +2723,27 @@ p { .client-server-toolbar { display: grid; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; - margin-bottom: 8px; + min-height: 32px; + margin-bottom: 4px; } -.client-server-toolbar.is-single { +.client-server-toolbar-title { + grid-column: 2; + color: var(--client-muted); + font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; + letter-spacing: 0.08em; + text-transform: uppercase; + white-space: nowrap; +} + +.client-server-toolbar-actions { + grid-column: 3; + justify-self: end; display: flex; - justify-content: center; + align-items: center; + gap: 2px; } .client-server-mode-toggle { @@ -2735,9 +2752,8 @@ p { align-items: center; justify-content: center; gap: 7px; - grid-column: 2; margin: 0; - padding: 5px 8px; + padding: 5px 4px; border: 0; background: transparent; color: var(--client-muted); @@ -2747,26 +2763,23 @@ p { } .client-server-check { - grid-column: 3; - justify-self: start; - width: 116px; + width: 32px; + height: 32px; min-height: 32px; - padding: 5px 7px; + padding: 0; border: 0; background: transparent; color: var(--client-muted); display: flex; align-items: center; justify-content: center; - gap: 6px; - font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; cursor: pointer; transition: color 300ms ease, opacity 300ms ease, text-shadow 500ms ease; } .client-server-check svg { - width: 13px; - height: 13px; + width: 16px; + height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; @@ -3441,7 +3454,7 @@ p { } .client-form-content { - gap: 48px; + gap: 32px; } .harbor-brand { @@ -3464,12 +3477,18 @@ p { .client-server-filters button, .client-server-mode-toggle, + .client-server-check, .client-server-group-toggle, .client-server-more, .client-server-favorite { min-height: 44px; } + .client-server-check { + width: 44px; + height: 44px; + } + .client-local-rule { grid-template-columns: 44px minmax(0, 1fr) 44px; } diff --git a/test/web/responsive-layout-contract.test.js b/test/web/responsive-layout-contract.test.js index d450eb0..7c75a0a 100644 --- a/test/web/responsive-layout-contract.test.js +++ b/test/web/responsive-layout-contract.test.js @@ -41,7 +41,10 @@ test('server rows scroll without moving the subscription column or showing a scr assert.match(styles, /\.client-server-scroll::-webkit-scrollbar\s*\{[\s\S]*display:\s*none/); assert.match(simpleScroll, /max-height:\s*none/); assert.match(simpleScroll, /overflow:\s*visible/); - assert.match(grid, /width:\s*min\(100%, 220px\)/); + assert.match(grid, /width:\s*min\(100%, 180px\)/); + assert.match(rule('.client-form-content'), /gap:\s*24px/); + assert.match(rule('.client-server-toolbar-title'), /grid-column:\s*2/); + assert.match(rule('.client-server-toolbar-actions'), /grid-column:\s*3/); assert.doesNotMatch(rule('.client-servers.is-scalable .client-server-grid'), /width:/); }); diff --git a/test/web/server-picker.test.js b/test/web/server-picker.test.js index 30961f9..70b26c9 100644 --- a/test/web/server-picker.test.js +++ b/test/web/server-picker.test.js @@ -57,10 +57,12 @@ test('manual ping uses plain language and keeps results beside server names', () assert.match(picker, /function ServerHealth/); assert.match(picker, /client-server-health-checking/); assert.match(picker, /function ServerCheckButton/); - assert.match(picker, /Проверить пинг<\/span>/); + assert.match(picker, /client-server-check client-tooltip-anchor/); + assert.match(picker, //); assert.doesNotMatch(picker, /TCP|Не проверен/); - assert.match(styles, /\.client-server \{[\s\S]*?align-items: baseline;[\s\S]*?justify-content: center;/); - assert.match(styles, /\.client-server-grid \{[\s\S]*?width: min\(100%, 220px\);/); + assert.match(styles, /\.client-server \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) auto minmax\(0, 1fr\);/); + assert.match(styles, /\.client-server-health \{[\s\S]*?grid-column: 3;[\s\S]*?justify-self: end;/); + assert.match(styles, /\.client-server-grid \{[\s\S]*?width: min\(100%, 180px\);/); assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/); assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/); }); @@ -70,6 +72,8 @@ test('server picker starts simple and reveals advanced controls on demand', () = assert.match(picker, /aria-expanded={advanced}/); assert.match(picker, /setAdvanced\(\(current\) => !current\)/); assert.match(picker, /Поиск и фильтры<\/span>/); + assert.match(picker, /client-server-toolbar-title">Список серверов/); + assert.match(picker, /client-server-toolbar-actions/); assert.match(picker, /client-server-mode-panel is-simple/); assert.match(picker, /client-server-mode-panel is-advanced/); assert.match(picker, /inert={advanced \? true : undefined}/);