feat: Рефакторинг модальных окон с заменой на простой подход со встроенным backdrop для улучшения UX. Обновление компонентов CommandPalette, ConfirmDialog, ConfirmDiffModal, ConfirmModal, FormModal, ImportModal, SettingsModal и WsUpdateModal для повышения удобства использования и унификации интерфейса.

2025-10-03 12:52:39 +07:00
parent 9bff239035
commit f87d8f90c3
8 changed files with 659 additions and 641 deletions
@@ -1,9 +1,8 @@
-import { SmallModal } from './Modal';
-import { IconAlertTriangle, IconCheck, IconX } from '@tabler/icons-react';
+import { IconAlertTriangle } from '@tabler/icons-react';

 /**
- * ConfirmDialog - упрощённая версия ConfirmModal для быстрых подтверждений
- * Алиас для ConfirmModal с другим API (для обратной совместимости)
+ * ConfirmDialog - упрощённая версия для быстрых подтверждений
+ * Простой подход со встроенным backdrop (как в HistoryModal)
 */
 export default function ConfirmDialog({ 
  open, 
@@ -17,47 +16,78 @@ export default function ConfirmDialog({
  size = 'sm',
  loading = false
 }) {
+  if (!open) return null;
+
  return (
-    <SmallModal
-      show={open}
-      onClose={onCancel}
-      title={
-        <div className="d-flex align-items-center">
-          {destructive && (
-            <IconAlertTriangle className="text-danger me-2" size={24} />
-          )}
-          {title}
-        </div>
-      }
-      footer={
-        <>
-          <button 
-            type="button" 
-            className="btn btn-secondary" 
-            onClick={onCancel}
-            disabled={loading}
-          >
-            <IconX size={16} className="me-1" />
-            {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" />
-            )}
-            <IconCheck size={16} className="me-1" />
-            {confirmText}
-          </button>
-        </>
-      }
+    <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="text-muted">
-        <p className="mb-0">{message}</p>
+      <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>
+              )}
+              <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>
+        </div>
      </div>
-    </SmallModal>
+    </div>
  );
 }