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

2025-10-03 13:09:14 +07:00
parent e85c8cf84e
commit f2b1db2092
9 changed files with 444 additions and 341 deletions
@@ -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>
+    </>
  );
 }