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

feat: Рефакторинг модальных окон с добавлением обработчиков клика по фону для закрытия. Обновление компонентов ConfirmDialog, ConfirmDiffModal, ConfirmModal, FormModal, HistoryModal, ImportModal, SettingsModal и WsUpdateModal для улучшения взаимодействия с пользователем и унификации интерфейса.
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 1m6s
Details

Browse Source
This commit is contained in:
denozord
2025-10-03 13:09:14 +07:00
parent e85c8cf84e
commit f2b1db2092
9 changed files with 444 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ConfirmDialog.jsx
+14 -2
View File
@@ -18,12 +18,23 @@ export default function ConfirmDialog({
}) {
if (!open) return null;
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onCancel?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
>
<div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} modal-dialog-centered`} role="document">
@@ -49,7 +60,7 @@ export default function ConfirmDialog({
>
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="btn-close" onClick={onCancel} />
<button type="button" className="btn-close" onClick={onCancel} aria-label="Закрыть" />
</div>
<div className="modal-body">
@@ -89,5 +100,6 @@ export default function ConfirmDialog({
</div>
</div>
</div>
</>
);
}
frontend/src/components/ConfirmDiffModal.jsx
+14 -2
View File
@@ -11,12 +11,23 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
if (!show) return null;
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
@@ -42,7 +53,7 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
>
<div className="modal-header">
<h5 className="modal-title">Подтвердить сохранение</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
@@ -98,6 +109,7 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
</div>
</div>
</div>
</>
);
}
frontend/src/components/ConfirmModal.jsx
+14 -2
View File
@@ -23,12 +23,23 @@ function ConfirmModal({
onConfirm?.();
};
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
@@ -54,7 +65,7 @@ function ConfirmModal({
>
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
@@ -92,6 +103,7 @@ function ConfirmModal({
</div>
</div>
</div>
</>
);
}
frontend/src/components/FormModal.jsx
+14 -2
View File
@@ -36,12 +36,23 @@ function FormModal({
}
};
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={handleKeyDown}
>
<div
@@ -52,7 +63,7 @@ function FormModal({
<form onSubmit={handleSubmit}>
<div className="modal-header">
<h5 className="modal-title">{title}</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
@@ -85,6 +96,7 @@ function FormModal({
</div>
</div>
</div>
</>
);
}
frontend/src/components/HistoryModal.jsx
+12 -2
View File
@@ -55,13 +55,23 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
}
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -90,7 +100,7 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
<IconHistory className="me-2" size={24} />
История версий
</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
frontend/src/components/ImportModal.jsx
+13 -2
View File
@@ -86,12 +86,23 @@ function ImportModal({
URL.revokeObjectURL(url);
};
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -101,7 +112,7 @@ function ImportModal({
<IconUpload className="me-2" size={24} />
{title}
</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
frontend/src/components/Modal.jsx
+13 -1
View File
@@ -50,12 +50,23 @@ function Modal({
if (!show) return null;
const handleBackdropClick = (e) => {
if (backdrop && e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className={`modal show d-block ${className}`}
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div
@@ -107,6 +118,7 @@ function Modal({
</div>
</div>
</div>
</>
);
}
frontend/src/components/SettingsModal.jsx
+13 -2
View File
@@ -103,12 +103,23 @@ export default function SettingsModal({ open, onClose }) {
}
};
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-dialog-centered" role="document">
@@ -118,7 +129,7 @@ export default function SettingsModal({ open, onClose }) {
<IconSettings className="me-2" size={24} />
Настройки интерфейса
</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">
frontend/src/components/WsUpdateModal.jsx
+13 -2
View File
@@ -117,12 +117,23 @@ function WsUpdateModal({ show, url, onClose }) {
);
};
const handleBackdropClick = (e) => {
if (e.target === e.currentTarget) {
onClose?.();
}
};
return (
<>
{/* Modal Backdrop */}
<div className="modal-backdrop show" onClick={handleBackdropClick} />
{/* Modal */}
<div
className="modal show d-block"
role="dialog"
aria-modal="true"
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
tabIndex={-1}
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
>
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -133,7 +144,7 @@ function WsUpdateModal({ show, url, onClose }) {
Логи запуска
{getStatusBadge()}
</h5>
<button type="button" className="btn-close" onClick={onClose} />
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
</div>
<div className="modal-body">