diff options
Diffstat (limited to 'FrontEnd/src/views/common/dialog')
| -rw-r--r-- | FrontEnd/src/views/common/dialog/Dialog.css | 11 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dialog/Dialog.tsx | 27 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dialog/OperationDialog.css | 29 | ||||
| -rw-r--r-- | FrontEnd/src/views/common/dialog/OperationDialog.tsx | 32 |
4 files changed, 37 insertions, 62 deletions
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> |