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>
)} )}
<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'} /> <IconRefresh size={18} className={loading ? 'spin me-2' : 'me-2'} />
{loading ? 'Загрузка…' : 'Обновить'} {loading ? 'Загрузка…' : 'Обновить'}
</button> </button>
@@ -785,33 +785,31 @@ function EasySwitchManager() {
{activeTab === 'proxies' && ( {activeTab === 'proxies' && (
<> <>
{/* Панель фильтров — Tabler form-check, input-icon, btn-list */} {/* Панель фильтров — отдельная карточка, чёткая структура без наложений */}
<div className="mb-4"> <div className="card mb-4">
<div className="row g-2 align-items-center flex-wrap"> <div className="card-body py-3">
<div className="col-auto"> <div className="d-flex flex-wrap align-items-center gap-3">
<label className="form-check form-switch mb-0"> <div className="d-flex align-items-center gap-4 flex-shrink-0">
<input <label className="form-check form-switch mb-0">
className="form-check-input" <input
type="checkbox" className="form-check-input"
checked={showOnlyConfigured} type="checkbox"
onChange={(e) => setShowOnlyConfigured(e.target.checked)} checked={showOnlyConfigured}
/> onChange={(e) => setShowOnlyConfigured(e.target.checked)}
<span className="form-check-label">Только настроенные фильтры</span> />
</label> <span className="form-check-label">Только настроенные фильтры</span>
</div> </label>
<div className="col-auto"> <label className="form-check form-switch mb-0">
<label className="form-check form-switch mb-0"> <input
<input className="form-check-input"
className="form-check-input" type="checkbox"
type="checkbox" checked={groupByTags}
checked={groupByTags} onChange={(e) => setGroupByTags(e.target.checked)}
onChange={(e) => setGroupByTags(e.target.checked)} />
/> <span className="form-check-label">Группировать по тегам</span>
<span className="form-check-label">Группировать по тегам</span> </label>
</label> </div>
</div> <div className="input-icon flex-grow-1" style={{ minWidth: '220px', maxWidth: '340px' }}>
<div className="col">
<div className="input-icon">
<span className="input-icon-addon"> <span className="input-icon-addon">
<IconSearch size={18} /> <IconSearch size={18} />
</span> </span>
@@ -825,51 +823,44 @@ function EasySwitchManager() {
style={searchQuery ? { paddingRight: '2.5rem' } : undefined} style={searchQuery ? { paddingRight: '2.5rem' } : undefined}
/> />
{searchQuery && ( {searchQuery && (
<span <button
className="input-icon-addon" type="button"
style={{ right: 0, left: 'auto', cursor: 'pointer' }} className="btn btn-icon btn-ghost-secondary position-absolute top-50 end-0 translate-middle-y me-1"
style={{ zIndex: 2 }}
onClick={() => setSearchQuery('')} onClick={() => setSearchQuery('')}
onKeyDown={(e) => e.key === 'Enter' && setSearchQuery('')} aria-label="Очистить поиск"
role="button"
tabIndex={0}
aria-label="Очистить"
> >
<IconX size={18} /> <IconX size={18} />
</span> </button>
)} )}
</div> </div>
</div> <div className="d-flex align-items-center gap-1 flex-shrink-0">
<div className="col-auto btn-list"> <button
<button type="button"
type="button" className="btn btn-outline-secondary btn-sm"
className="btn btn-outline-secondary btn-sm" onClick={() => {
onClick={() => { if (expandedServers.size === filteredServers.length) {
if (expandedServers.size === filteredServers.length) { setExpandedServers(new Set());
setExpandedServers(new Set()); } else {
} else { setExpandedServers(new Set(filteredServers.map((s) => s.id)));
setExpandedServers(new Set(filteredServers.map((s) => s.id))); }
} }}
}} title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
title={expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'} >
> {expandedServers.size === filteredServers.length ? (
{expandedServers.size === filteredServers.length ? (
<>
<IconChevronUp size={18} className="me-1" /> <IconChevronUp size={18} className="me-1" />
Свернуть все ) : (
</>
) : (
<>
<IconChevronDown size={18} className="me-1" /> <IconChevronDown size={18} className="me-1" />
Развернуть все )}
</> {expandedServers.size === filteredServers.length ? 'Свернуть все' : 'Развернуть все'}
)} </button>
</button> <button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки">
<button type="button" className="btn btn-icon btn-outline-secondary" title="Настройки" aria-label="Настройки"> <IconSettings size={18} />
<IconSettings size={18} /> </button>
</button> <button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия">
<button type="button" className="btn btn-icon btn-outline-secondary" title="Быстрые действия" aria-label="Быстрые действия"> <IconFilter size={18} />
<IconFilter size={18} /> </button>
</button> </div>
</div> </div>
</div> </div>
</div> </div>