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

refactor: Update button styles and layout in ServerManager for improved accessibility and visual consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 5m59s
Details

Browse Source
This commit is contained in:
denozord
2025-07-11 13:01:45 +07:00
parent 3e6199a339
commit a4c5b1dd98
1 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ServerManager.jsx
+41 -35
View File
@@ -398,38 +398,29 @@ function ServerManager() {
<div className="d-flex flex-wrap gap-2 mb-3 align-items-center">
<button
type="button"
className="btn btn-primary"
className="btn btn-primary d-flex align-items-center"
onClick={handleOpenAddServerModal}
>
<IconPlus className="icon me-2" />
Добавить новый сервер
<span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
<span className="fw-bold">Добавить</span>
</button>
<button
type="button"
className="btn btn-success"
className="btn btn-outline-primary d-flex align-items-center"
onClick={handleSaveChanges}
disabled={loading}
>
{loading ? (
<>
<IconRefresh className="icon me-2 spin" />
Сохранение...
</>
) : (
<>
<IconDatabase className="icon me-2" />
Сохранить в S3
</>
)}
<span className="me-2 d-flex align-items-center"><IconDatabase className={loading ? 'spin' : ''} /></span>
<span className="fw-bold">Сохранить</span>
</button>
<button
type="button"
className="btn btn-outline-primary"
className="btn btn-outline-primary d-flex align-items-center"
onClick={exportAllLinks}
disabled={servers.length === 0}
>
<IconDownload className="icon me-2" />
Экспорт всех ссылок (CSV)
<span className="me-2 d-flex align-items-center"><IconDownload className="icon" /></span>
<span className="fw-bold">Экспорт</span>
</button>
</div>
@@ -524,7 +515,7 @@ function ServerManager() {
)}
</th>
<th className="text-center">Статус</th>
<th className="text-end" style={{ minWidth: 140 }}>Действия</th>
<th className="text-end w-1" style={{ minWidth: 140 }}></th>
</tr>
</thead>
<tbody>
@@ -543,15 +534,15 @@ function ServerManager() {
<td className="text-center">
<span className="badge bg-success-lt text-success">Онлайн</span>
</td>
<td className="text-end" style={{ minWidth: 140 }}>
<td className="text-end w-1" style={{ minWidth: 140 }}>
<div className="btn-list gap-1 mb-0">
<button className="btn btn-icon btn-sm btn-outline-primary" title="Ссылка" onClick={() => handleGenerateLink(server)} onContextMenu={(e) => { e.preventDefault(); quickCopyLink(server); }}>
<button className="btn btn-icon btn-sm btn-outline-primary rounded" title="Ссылка" onClick={() => handleGenerateLink(server)} onContextMenu={(e) => { e.preventDefault(); quickCopyLink(server); }}>
<IconLink size={18} />
</button>
<button className="btn btn-icon btn-sm btn-outline-secondary" title="Редактировать" onClick={() => handleEdit(server)}>
<button className="btn btn-icon btn-sm btn-outline-secondary rounded" title="Редактировать" onClick={() => handleEdit(server)}>
<IconEdit size={18} />
</button>
<button className="btn btn-icon btn-sm btn-outline-danger" title="Удалить" onClick={() => confirmDelete(server)}>
<button className="btn btn-icon btn-sm btn-outline-danger rounded" title="Удалить" onClick={() => confirmDelete(server)}>
<IconTrash size={18} />
</button>
</div>
@@ -697,8 +688,12 @@ function EditServerModal({ show, server, onChange, onSave, onClose }) {
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" className="btn btn-primary" onClick={() => onSave && onSave(localServer)}>Сохранить</button>
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
<span className="fw-bold">Отмена</span>
</button>
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={() => onSave && onSave(localServer)}>
<span className="fw-bold">Сохранить</span>
</button>
</div>
</div>
</div>
@@ -742,8 +737,12 @@ function DeleteServerModal({ show, server, onDelete, onClose }) {
<p className="text-muted">Это действие нельзя отменить.</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" className="btn btn-danger" onClick={onDelete}>Удалить</button>
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
<span className="fw-bold">Отмена</span>
</button>
<button type="button" className="btn btn-danger d-flex align-items-center" onClick={onDelete}>
<span className="fw-bold">Удалить</span>
</button>
</div>
</div>
</div>
@@ -904,19 +903,24 @@ function LinkGeneratorModal({ show, server, urlSettings, onUrlSettingsChange, on
style={{ fontFamily: 'monospace', fontSize: '0.875rem' }}
/>
<button
className="btn btn-outline-secondary"
className="btn btn-outline-secondary d-flex align-items-center"
type="button"
onClick={() => onCopyToClipboard(generatedUrl)}
title="Копировать в буфер обмена"
>
<IconDownload size={18} />
<span className="me-2 d-flex align-items-center"><IconDownload size={18} /></span>
<span className="fw-bold">Копировать</span>
</button>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="button" className="btn btn-primary" onClick={handleSaveSettings}>Сохранить настройки</button>
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
<span className="fw-bold">Закрыть</span>
</button>
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={handleSaveSettings}>
<span className="fw-bold">Сохранить настройки</span>
</button>
</div>
</div>
</div>
@@ -1072,10 +1076,12 @@ function AddServerModal({ show, newServer, customProvider, onNewServerChange, on
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
<button type="button" className="btn btn-primary" onClick={onAddServer}>
<IconPlus className="icon me-2" />
Добавить сервер
<button type="button" className="btn btn-secondary d-flex align-items-center" data-bs-dismiss="modal">
<span className="fw-bold">Отмена</span>
</button>
<button type="button" className="btn btn-primary d-flex align-items-center" onClick={onAddServer}>
<span className="me-2 d-flex align-items-center"><IconPlus className="icon" /></span>
<span className="fw-bold">Добавить сервер</span>
</button>
</div>
</div>