denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(EasySwitchManager): enhance filter panel layout and button styles for improved usability
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 2m1s
Details

Browse Source
This commit is contained in:
denozord
2026-02-24 11:08:16 +07:00
parent ba20b127df
commit e70aa47a34
1 changed files with 57 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/EasySwitchManager.jsx
+57 -66
View File
@@ -730,7 +730,7 @@ function EasySwitchManager() {
Применить изменения
</button>
)}
<button type="button" className="btn btn-outline-primary" onClick={handleRefresh} disabled={loading}>
<button type="button" className="btn btn-primary" onClick={handleRefresh} disabled={loading}>
<IconRefresh size={18} className={loading ? 'spin me-2' : 'me-2'} />
{loading ? 'Загрузка…' : 'Обновить'}
</button>
@@ -785,33 +785,31 @@ function EasySwitchManager() {
{activeTab === 'proxies' && (
<>
{/* Панель фильтров — Tabler form-check, input-icon, btn-list */}
<div className="mb-4">
<div className="row g-2 align-items-center flex-wrap">
<div className="col-auto">
<label className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
checked={showOnlyConfigured}
onChange={(e) => setShowOnlyConfigured(e.target.checked)}
/>
<span className="form-check-label">Только настроенные фильтры</span>
</label>
</div>
<div className="col-auto">
<label className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
checked={groupByTags}
onChange={(e) => setGroupByTags(e.target.checked)}
/>
<span className="form-check-label">Группировать по тегам</span>
</label>
</div>
<div className="col">
<div className="input-icon">
{/* Панель фильтров — отдельная карточка, чёткая структура без наложений */}
<div className="card mb-4">
<div className="card-body py-3">
<div className="d-flex flex-wrap align-items-center gap-3">
<div className="d-flex align-items-center gap-4 flex-shrink-0">
<label className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
checked={showOnlyConfigured}
onChange={(e) => setShowOnlyConfigured(e.target.checked)}
/>
<span className="form-check-label">Только настроенные фильтры</span>
</label>
<label className="form-check form-switch mb-0">
<input
className="form-check-input"
type="checkbox"
checked={groupByTags}
onChange={(e) => setGroupByTags(e.target.checked)}
/>
<span className="form-check-label">Группировать по тегам</span>
</label>
</div>
<div className="input-icon flex-grow-1" style={{ minWidth: '220px', maxWidth: '340px' }}>
<span className="input-icon-addon">
<IconSearch size={18} />
</span>
@@ -825,51 +823,44 @@ function EasySwitchManager() {
style={searchQuery ? { paddingRight: '2.5rem' } : undefined}
/>
{searchQuery && (
<span
className="input-icon-addon"
style={{ right: 0, left: 'auto', cursor: 'pointer' }}
<button
type="button"
className="btn btn-icon btn-ghost-secondary position-absolute top-50 end-0 translate-middle-y me-1"
style={{ zIndex: 2 }}
onClick={() => setSearchQuery('')}
onKeyDown={(e) => e.key === 'Enter' && setSearchQuery('')}
role="button"
tabIndex={0}
aria-label="Очистить"
aria-label="Очистить поиск"
>
<IconX size={18} />
</span>
</button>
)}
</div>
</div>
<div className="col-auto btn-list">
<button
type="button"
className="btn btn-outline-secondary btn-sm"
onClick={() => {
if (expandedServers.size === filteredServers.length) {
setExpandedServers(new Set());
} else {
setExpandedServers(new Set(filteredServers.map((s) => s.id)));
}
}}
title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
>
{expandedServers.size === filteredServers.length ? (
<>
<div className="d-flex align-items-center gap-1 flex-shrink-0">
<button
type="button"
className="btn btn-outline-secondary btn-sm"
onClick={() => {
if (expandedServers.size === filteredServers.length) {
setExpandedServers(new Set());
} else {
setExpandedServers(new Set(filteredServers.map((s) => s.id)));
}
}}
title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
>
{expandedServers.size === filteredServers.length ? (
<IconChevronUp size={18} className="me-1" />
Свернуть все
</>
) : (
<>
) : (
<IconChevronDown size={18} className="me-1" />
Развернуть все
</>
)}
</button>
<button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
<IconSettings size={18} />
</button>
<button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
<IconFilter size={18} />
</button>
)}
{expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
</button>
<button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
<IconSettings size={18} />
</button>
<button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
<IconFilter size={18} />
</button>
</div>
</div>
</div>
</div>