feat: Рефакторинг модальных окон с добавлением обработчиков клика по фону для закрытия. Обновление компонентов ConfirmDialog, ConfirmDiffModal, ConfirmModal, FormModal, HistoryModal, ImportModal, SettingsModal и WsUpdateModal для улучшения взаимодействия с пользователем и унификации интерфейса.
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 1m6s
Publish Fast Tabler Docker image / build-and-push-fast (push) Failing after 1m6s
This commit is contained in:
@@ -18,76 +18,88 @@ export default function ConfirmDialog({
|
||||
}) {
|
||||
if (!open) return null;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onCancel?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
|
||||
>
|
||||
<div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} modal-dialog-centered`} role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
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">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onCancel} />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="d-flex align-items-start">
|
||||
{destructive && (
|
||||
<div className="flex-shrink-0 me-3">
|
||||
<IconAlertTriangle className="text-danger" size={32} />
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onCancel} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="d-flex align-items-start">
|
||||
{destructive && (
|
||||
<div className="flex-shrink-0 me-3">
|
||||
<IconAlertTriangle className="text-danger" size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow-1">
|
||||
<p className="mb-0">{message}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow-1">
|
||||
<p className="mb-0">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{confirmText}
|
||||
</button>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${destructive ? 'btn-danger' : 'btn-primary'}`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{confirmText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,93 +11,105 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Подтвердить сохранение</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="row g-2 text-center">
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Добавлено</strong>
|
||||
<div className="text-muted">{added}</div>
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Подтвердить сохранение</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="row g-2 text-center">
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Добавлено</strong>
|
||||
<div className="text-muted">{added}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Удалено</strong>
|
||||
<div className="text-muted">{removed}</div>
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Удалено</strong>
|
||||
<div className="text-muted">{removed}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Изменено</strong>
|
||||
<div className="text-muted">{changed}</div>
|
||||
<div className="col">
|
||||
<div className="card">
|
||||
<div className="card-body p-2">
|
||||
<strong>Изменено</strong>
|
||||
<div className="text-muted">{changed}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
Сохранить
|
||||
</button>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -23,75 +23,87 @@ function ConfirmModal({
|
||||
onConfirm?.();
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||||
<div
|
||||
className="modal-content"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="d-flex align-items-start">
|
||||
{showIcon && Icon && (
|
||||
<div className="flex-shrink-0 me-3">
|
||||
<Icon className={`text-${variant}`} size={32} />
|
||||
}}
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<div className="d-flex align-items-start">
|
||||
{showIcon && Icon && (
|
||||
<div className="flex-shrink-0 me-3">
|
||||
<Icon className={`text-${variant}`} size={32} />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow-1">
|
||||
{typeof message === 'string' ? <p className="mb-0">{message}</p> : message}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-grow-1">
|
||||
{typeof message === 'string' ? <p className="mb-0">{message}</p> : message}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-${variant}`}
|
||||
onClick={handleConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{confirmLabel}
|
||||
</button>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-${variant}`}
|
||||
onClick={handleConfirm}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -36,55 +36,67 @@ function FormModal({
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${centered ? ' modal-dialog-centered' : ''}`}
|
||||
role="document"
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{CancelIcon && <CancelIcon className="me-2" size={16} />}
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={`btn btn-${submitVariant}`}
|
||||
disabled={loading || disabled}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{!loading && SubmitIcon && <SubmitIcon className="me-2" size={16} />}
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${centered ? ' modal-dialog-centered' : ''}`}
|
||||
role="document"
|
||||
>
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{CancelIcon && <CancelIcon className="me-2" size={16} />}
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className={`btn btn-${submitVariant}`}
|
||||
disabled={loading || disabled}
|
||||
>
|
||||
{loading && (
|
||||
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
|
||||
)}
|
||||
{!loading && SubmitIcon && <SubmitIcon className="me-2" size={16} />}
|
||||
{submitLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -86,23 +86,34 @@ function ImportModal({
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconUpload className="me-2" size={24} />
|
||||
{title}
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconUpload className="me-2" size={24} />
|
||||
{title}
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{/* Description */}
|
||||
|
||||
@@ -50,63 +50,75 @@ function Modal({
|
||||
|
||||
if (!show) return null;
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (backdrop && e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`modal show d-block ${className}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
|
||||
role="document"
|
||||
className={`modal show d-block ${className}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div
|
||||
className="modal-content"
|
||||
ref={modalRef}
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
|
||||
role="document"
|
||||
>
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
<div
|
||||
className="modal-content"
|
||||
ref={modalRef}
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Tab') {
|
||||
const c = e.currentTarget;
|
||||
const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
if (!focusable || focusable.length === 0) return;
|
||||
const first = focusable[0];
|
||||
const last = focusable[focusable.length - 1];
|
||||
if (e.shiftKey && document.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">{title}</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
aria-label="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="modal-body">
|
||||
{children}
|
||||
|
||||
{footer && (
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{footer && (
|
||||
<div className="modal-footer">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -103,23 +103,34 @@ export default function SettingsModal({ open, onClose }) {
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconSettings className="me-2" size={24} />
|
||||
Настройки интерфейса
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconSettings className="me-2" size={24} />
|
||||
Настройки интерфейса
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{error && <ErrorAlert message={error} onClose={() => setError('')} />}
|
||||
|
||||
@@ -117,24 +117,35 @@ function WsUpdateModal({ show, url, onClose }) {
|
||||
);
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconPlugConnected className="me-2" size={24} />
|
||||
Логи запуска
|
||||
{getStatusBadge()}
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} />
|
||||
</div>
|
||||
<>
|
||||
{/* Modal Backdrop */}
|
||||
<div className="modal-backdrop show" onClick={handleBackdropClick} />
|
||||
|
||||
{/* Modal */}
|
||||
<div
|
||||
className="modal show d-block"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabIndex={-1}
|
||||
onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
|
||||
>
|
||||
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div className="modal-content" tabIndex={-1}>
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title d-flex align-items-center">
|
||||
<IconPlugConnected className="me-2" size={24} />
|
||||
Логи запуска
|
||||
{getStatusBadge()}
|
||||
</h5>
|
||||
<button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{/* Controls */}
|
||||
|
||||
Reference in New Issue
Block a user