diff --git a/src/shared/versions.js b/src/shared/versions.js index 0a0fb74..80c7b81 100644 --- a/src/shared/versions.js +++ b/src/shared/versions.js @@ -1,6 +1,6 @@ export const HARBOR_VERSIONS = Object.freeze({ - macClient: '0.8.8', - gatewayClient: '0.8.8', + macClient: '0.8.9', + gatewayClient: '0.8.9', gatewayBackend: '0.8.0', }); diff --git a/src/web/components/ServerPicker.jsx b/src/web/components/ServerPicker.jsx index 476fd92..61d9736 100644 --- a/src/web/components/ServerPicker.jsx +++ b/src/web/components/ServerPicker.jsx @@ -53,7 +53,9 @@ function ServerHealth({ ping, fallback }) { aria-label={ping?.checking ? 'Проверяем пинг' : health} > - + ; } diff --git a/src/web/styles.css b/src/web/styles.css index ae22edc..ab777ef 100644 --- a/src/web/styles.css +++ b/src/web/styles.css @@ -2697,31 +2697,38 @@ p { .client-server-meta .client-server-health { width: 42px; min-height: 44px; - place-items: end center; - padding-bottom: 4px; - border-bottom: 1px solid var(--client-accent); + place-items: end start; + padding-bottom: 7px; } -.client-server-health > span { +.client-server-health > span, +.client-server-health > svg { grid-area: 1 / 1; transition: opacity 420ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), color 520ms ease; } .client-server-health-checking { + width: 12px; + height: 12px; + fill: none; + stroke: currentColor; + stroke-width: 1.6; + stroke-linecap: round; + stroke-linejoin: round; color: var(--client-accent); opacity: 0; filter: blur(4px); - text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 42%, transparent); } .client-server-health.is-checking > span:first-child { - opacity: 0.32; + opacity: 0; filter: blur(2px); } .client-server-health.is-checking .client-server-health-checking { opacity: 1; filter: blur(0); + animation: client-server-check-spin 700ms linear infinite; } .client-servers.is-scalable { @@ -3058,7 +3065,7 @@ p { min-height: 44px; display: grid; place-items: center; - margin-left: 8px; + margin-left: 4px; } .client-server-row .client-server { @@ -3619,6 +3626,7 @@ p { .client-server, .client-server-auto, .client-server-health > span, + .client-server-health > svg, .client-server-check, .client-server-check svg, .client-server-mode-toggle, diff --git a/test/web/server-picker.test.js b/test/web/server-picker.test.js index 10548ff..3601808 100644 --- a/test/web/server-picker.test.js +++ b/test/web/server-picker.test.js @@ -55,7 +55,8 @@ test('server picker checks health only on manual refresh and bounds the result w 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, /Проверяем…<\/span>/); assert.match(picker, /function ServerCheckButton/); assert.match(picker, /client-server-check client-tooltip-anchor/); assert.match(picker, //); @@ -64,8 +65,9 @@ test('manual ping uses plain language and keeps results beside server names', () assert.match(styles, /\.client-server-row \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\) 120px minmax\(0, 1fr\);/); assert.match(styles, /\.client-server-row \.client-server \{[\s\S]*?width: 120px;/); assert.match(styles, /\.client-server-health \{[\s\S]*?font-size: 9px;[\s\S]*?font-variant-numeric: tabular-nums;/); - assert.match(styles, /\.client-server-meta \.client-server-health \{[\s\S]*?padding-bottom: 4px;[\s\S]*?border-bottom: 1px solid var\(--client-accent\);/); - assert.match(styles, /\.client-server-meta \{[\s\S]*?width: 42px;[\s\S]*?margin-left: 8px;/); + assert.match(styles, /\.client-server-meta \.client-server-health \{[\s\S]*?place-items: end start;[\s\S]*?padding-bottom: 7px;/); + assert.match(styles, /\.client-server-health\.is-checking \.client-server-health-checking \{[\s\S]*?animation: client-server-check-spin 700ms linear infinite;/); + assert.match(styles, /\.client-server-meta \{[\s\S]*?width: 42px;[\s\S]*?margin-left: 4px;/); assert.match(styles, /\.client-server-favorite \{[\s\S]*?position: absolute;[\s\S]*?width: 44px;/); assert.match(picker, /server={servers\[0\]}[\s\S]*?ping={pings\[servers\[0\]\.id\]}/); assert.match(picker, /simpleServers\.map[\s\S]*?ping={pings\[server\.id\]}/);