Refine server picker ping labels and layout
This commit is contained in:
@@ -39,19 +39,21 @@ function readAuto() {
|
||||
|
||||
function serverHealthText(ping) {
|
||||
if (ping?.error) return 'Проверка недоступна';
|
||||
if (ping?.ok) return `TCP ${ping.latency} мс`;
|
||||
return ping ? 'TCP недоступен' : 'Не проверен';
|
||||
if (ping?.ok) return `${ping.latency} мс`;
|
||||
return ping ? 'Недоступен' : null;
|
||||
}
|
||||
|
||||
function ServerHealth({ ping, fallback }) {
|
||||
const health = fallback || serverHealthText(ping);
|
||||
if (!health && !ping?.checking) return null;
|
||||
|
||||
return <small
|
||||
className={`client-server-health${ping?.checking ? ' is-checking' : ''}`}
|
||||
title={ping?.checkedAt || undefined}
|
||||
aria-label={ping?.checking ? 'Проверяем TCP' : health}
|
||||
aria-label={ping?.checking ? 'Проверяем пинг' : health}
|
||||
>
|
||||
<span aria-hidden="true">{health}</span>
|
||||
<span className="client-server-health-checking" aria-hidden="true">Проверяем TCP…</span>
|
||||
<span className="client-server-health-checking" aria-hidden="true">Проверяем…</span>
|
||||
</small>;
|
||||
}
|
||||
|
||||
@@ -59,11 +61,11 @@ function ServerCheckButton({ checking, disabled, onClick }) {
|
||||
return <button
|
||||
className={`client-server-check${checking ? ' is-checking' : ''}`}
|
||||
type="button"
|
||||
aria-label={checking ? 'Проверяем доступность серверов по TCP' : 'Проверить доступность серверов по TCP'}
|
||||
aria-label={checking ? 'Проверяем пинг серверов' : 'Проверить пинг серверов'}
|
||||
disabled={checking || disabled}
|
||||
onClick={onClick}
|
||||
>
|
||||
<span>TCP</span>
|
||||
<span>Проверить пинг</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
|
||||
</svg>
|
||||
@@ -71,7 +73,7 @@ function ServerCheckButton({ checking, disabled, onClick }) {
|
||||
}
|
||||
|
||||
function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect, onFavorite }) {
|
||||
const health = ping?.checking ? 'Проверяем TCP' : serverHealthText(ping);
|
||||
const health = ping?.checking ? 'Проверяем пинг' : serverHealthText(ping);
|
||||
|
||||
return <div className={`client-server-row${selected ? ' is-selected' : ''}${onFavorite ? ' has-favorite' : ''}`}>
|
||||
<button
|
||||
@@ -79,7 +81,7 @@ function ServerRow({ server, selected, favorite, ping, disabled, index, onSelect
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
aria-pressed={selected}
|
||||
aria-label={`${server.label}, ${server.host}:${server.port}, ${health}`}
|
||||
aria-label={`${server.label}, ${server.host}:${server.port}${health ? `, ${health}` : ''}`}
|
||||
style={{ '--server-index': Math.min(index, 7) }}
|
||||
onClick={() => onSelect(server.id)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user