Improve server picker scrolling and subscription input layout
This commit is contained in:
@@ -22,7 +22,7 @@ type PickerServer = HarborServer & {
|
||||
const FAVORITES_KEY = 'harbor-server-favorites';
|
||||
const RECENT_KEY = 'harbor-server-recent';
|
||||
const AUTO_KEY = 'harbor-server-auto';
|
||||
const SIMPLE_SERVER_LIMIT = 5;
|
||||
const INLINE_SERVER_ROWS = 8;
|
||||
|
||||
interface PingResult {
|
||||
id?: string;
|
||||
@@ -314,9 +314,9 @@ export function ServerPicker({
|
||||
const simpleServers = [
|
||||
...(selected && selected.id !== anchorServerId ? [selected] : []),
|
||||
...servers.filter(({ id }) => id !== selectedServerId && id !== anchorServerId),
|
||||
].slice(0, SIMPLE_SERVER_LIMIT);
|
||||
];
|
||||
|
||||
return <section className={`client-servers is-scalable${servers.length <= SIMPLE_SERVER_LIMIT ? ' is-short' : ''}`} aria-label="Выберите сервер">
|
||||
return <section className={`client-servers is-scalable${simpleServers.length <= INLINE_SERVER_ROWS ? ' is-short' : ''}`} aria-label="Выберите сервер">
|
||||
{prompt && <span className="client-server-prompt">Выберите сервер</span>}
|
||||
<div className="client-server-toolbar">
|
||||
<span className="client-server-toolbar-title">Список серверов</span>
|
||||
@@ -352,9 +352,6 @@ export function ServerPicker({
|
||||
onSelect={select}
|
||||
/>)}
|
||||
</div>
|
||||
{servers.length > simpleServers.length && <p className="client-server-overflow-note">
|
||||
Ещё {servers.length - simpleServers.length} — доступны через поиск
|
||||
</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -338,18 +338,16 @@ function AddProfileForm({ feature }: { feature: SubscriptionFeatureController })
|
||||
feature.addProfile();
|
||||
}}
|
||||
>
|
||||
<label>
|
||||
<span>Ссылка подписки</span>
|
||||
<input
|
||||
ref={feature.labelRef}
|
||||
type="url"
|
||||
inputMode="url"
|
||||
value={feature.url}
|
||||
placeholder="https://…"
|
||||
aria-invalid={feature.validationStatus === 'invalid'}
|
||||
onChange={(event) => feature.setUrl(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
ref={feature.labelRef}
|
||||
type="url"
|
||||
inputMode="url"
|
||||
value={feature.url}
|
||||
placeholder="https://…"
|
||||
aria-label="Ссылка подписки"
|
||||
aria-invalid={feature.validationStatus === 'invalid'}
|
||||
onChange={(event) => feature.setUrl(event.target.value)}
|
||||
/>
|
||||
{message && <div className="client-profile-form-status" role="status">{message}</div>}
|
||||
<div className="client-profile-form-actions">
|
||||
{feature.profiles.length > 0 && <button type="button" onClick={feature.cancelAdd}>Отмена</button>}
|
||||
|
||||
Reference in New Issue
Block a user