From 2d4a75a21a8a97db8017b56e321c56c7d70bc674 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 29 Jul 2023 01:22:38 +0800
Subject: ...

---
 FrontEnd/src/views/common/dialog/Dialog.css        | 11 ++++++--
 FrontEnd/src/views/common/dialog/Dialog.tsx        | 27 ++++++++----------
 .../src/views/common/dialog/OperationDialog.css    | 29 ++++----------------
 .../src/views/common/dialog/OperationDialog.tsx    | 32 ++++++++--------------
 4 files changed, 37 insertions(+), 62 deletions(-)

(limited to 'FrontEnd/src/views/common/dialog')

diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css
index 99e1a516..8f12614b 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/views/common/dialog/Dialog.css
@@ -6,7 +6,6 @@
   right: 0;
   bottom: 0;
   display: flex;
-  padding: 2em;
   overflow: auto;
 }
 
@@ -14,8 +13,8 @@
   position: absolute;
   z-index: -1;
   left: 0;
-  top: 0;
   right: 0;
+  top: 0;
   bottom: 0;
   background-color: var(--cru-surface-dim-color);
   opacity: 0.8;
@@ -25,7 +24,7 @@
   max-width: 100%;
   min-width: 30vw;
 
-  margin: auto;
+  margin: 2em auto;
 
   border: var(--cru-key-container-color) 1px solid;
   border-radius: 5px;
@@ -33,6 +32,12 @@
   background-color: var(--cru-surface-color);
 }
 
+@media (min-width: 576px) {
+  .cru-dialog-container {
+    max-width: 800px;
+  }
+}
+
 .cru-dialog-bottom-area {
   display: flex;
   justify-content: flex-end;
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
index 31dd113b..9ce344dc 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -38,23 +38,18 @@ export default function Dialog({
       timeout={300}
       classNames="cru-dialog"
     >
-      <div
-        className={classNames("cru-dialog-overlay", `cru-${color}`)}
-        onPointerDown={
-          disableCloseOnClickOnOverlay
-            ? undefined
-            : () => {
-                onClose();
-              }
-        }
-      >
-        <div className="cru-dialog-background" />
+      <div className={classNames("cru-dialog-overlay", `cru-${color}`)}>
         <div
-          className="cru-dialog-container"
-          onPointerDown={(e) => e.stopPropagation()}
-        >
-          {children}
-        </div>
+          className="cru-dialog-background"
+          onClick={
+            disableCloseOnClickOnOverlay
+              ? undefined
+              : () => {
+                  onClose();
+                }
+          }
+        />
+        <div className="cru-dialog-container">{children}</div>
       </div>
     </CSSTransition>,
     portalElement,
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.css b/FrontEnd/src/views/common/dialog/OperationDialog.css
index 19c5d806..43cdb692 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.css
+++ b/FrontEnd/src/views/common/dialog/OperationDialog.css
@@ -9,32 +9,15 @@
   color: var(--cru-surface-on-color);
 }
 
-.cru-operation-dialog-main-area {
-  margin-top: 0.5em;
-}
-
-.cru-operation-dialog-group {
-  display: block;
-  margin: 0.4em 0;
-}
-
-.cru-operation-dialog-label {
-  display: block;
-  color: var(--cru-primary-color);
+.cru-dialog-middle-area {
+  margin: 0.5em 0;
 }
 
-.cru-operation-dialog-inline-label {
-  margin-inline-start: 0.5em;
+.cru-dialog-bottom-area {
+  margin-top: 0.5em;
 }
 
-.cru-operation-dialog-error-text {
+.cru-operation-dialog-input-group {
   display: block;
-  font-size: 0.8em;
-  color: var(--cru-danger-color);
+  margin: 0.5em 0;
 }
-
-.cru-operation-dialog-helper-text {
-  display: block;
-  font-size: 0.8em;
-  color: var(--cru-primary-color);
-}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/dialog/OperationDialog.tsx b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
index 97d135e9..8aab45d9 100644
--- a/FrontEnd/src/views/common/dialog/OperationDialog.tsx
+++ b/FrontEnd/src/views/common/dialog/OperationDialog.tsx
@@ -7,15 +7,17 @@ import Button from "../button/Button";
 import {
   useInputs,
   InputGroup,
-  InitializeInfo as InputInitializer,
+  Initializer as InputInitializer,
   InputValueDict,
-  InputScheme,
+  InputErrorDict,
 } from "../input/InputGroup";
 import LoadingButton from "../button/LoadingButton";
 import Dialog from "./Dialog";
 
 import "./OperationDialog.css";
 
+export type { InputInitializer, InputValueDict, InputErrorDict };
+
 interface OperationDialogPromptProps {
   message?: Text;
   customMessage?: ReactNode;
@@ -40,13 +42,13 @@ export interface OperationDialogProps<TData> {
   close: () => void;
 
   color?: ThemeColor;
+  inputColor?: ThemeColor;
   title: Text;
   inputPrompt?: Text;
   successPrompt?: (data: TData) => ReactNode;
   failurePrompt?: (error: unknown) => ReactNode;
 
-  inputInit?: InputInitializer;
-  inputScheme?: InputScheme;
+  inputs: InputInitializer;
 
   onProcess: (inputs: InputValueDict) => Promise<TData>;
   onSuccessAndClose?: (data: TData) => void;
@@ -57,25 +59,16 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
     open,
     close,
     color,
+    inputColor,
     title,
     inputPrompt,
     successPrompt,
     failurePrompt,
-    inputInit,
-    inputScheme,
+    inputs,
     onProcess,
     onSuccessAndClose,
   } = props;
 
-  if (process.env.NODE_ENV === "development") {
-    if (inputScheme == null && inputInit == null) {
-      throw Error("Scheme or Init? Choose one and create one.");
-    }
-    if (inputScheme != null && inputInit != null) {
-      throw Error("Scheme or Init? Choose one and drop one");
-    }
-  }
-
   const c = useC();
 
   type Step =
@@ -93,14 +86,13 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
   const [step, setStep] = useState<Step>({ type: "input" });
 
   const { inputGroupProps, hasError, setAllDisabled, confirm } = useInputs({
-    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-    init: inputInit ?? { scheme: inputScheme! },
+    init: inputs,
   });
 
   function onClose() {
     if (step.type !== "process") {
       close();
-      if (step.type === "success" && props.onSuccessAndClose) {
+      if (step.type === "success" && onSuccessAndClose) {
         onSuccessAndClose?.(step.data);
       }
     } else {
@@ -136,11 +128,11 @@ function OperationDialog<TData>(props: OperationDialogProps<TData>) {
 
     body = (
       <div className="cru-operation-dialog-main-area">
-        <div>
+        <div className="cru-dialog-middle-area">
           <OperationDialogPrompt customMessage={c(inputPrompt)} />
           <InputGroup
             containerClassName="cru-operation-dialog-input-group"
-            color={color}
+            color={inputColor ?? "primary"}
             {...inputGroupProps}
           />
         </div>
-- 
cgit v1.2.3