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

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