diff options
Diffstat (limited to 'FrontEnd/src/views')
17 files changed, 96 insertions, 116 deletions
diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx index 2a123a76..125219c3 100644 --- a/FrontEnd/src/views/admin/UserAdmin.tsx +++ b/FrontEnd/src/views/admin/UserAdmin.tsx @@ -3,7 +3,7 @@ import classnames from "classnames"; import OperationDialog, { OperationDialogBoolInput, -} from "../common/OperationDialog"; +} from "../common/dailog/OperationDialog"; import { AuthUser } from "@/services/user"; import { @@ -45,7 +45,7 @@ const CreateUserDialog: React.FC<DialogProps<undefined, HttpUser>> = ({ password, }) } - close={close} + onClose={close} open={open} onSuccessAndClose={onSuccess} /> @@ -61,7 +61,7 @@ const UserDeleteDialog: React.FC<DialogProps<{ username: string }, unknown>> = return ( <OperationDialog open={open} - close={close} + onClose={close} title="admin:user.dialog.delete.title" themeColor="danger" inputPrompt={() => ( @@ -86,7 +86,7 @@ const UserModifyDialog: React.FC< return ( <OperationDialog open={open} - close={close} + onClose={close} title="admin:user.dialog.modify.title" themeColor="danger" inputPrompt={() => ( @@ -137,7 +137,7 @@ const UserPermissionModifyDialog: React.FC< return ( <OperationDialog open={open} - close={close} + onClose={close} title="admin:user.dialog.modifyPermissions.title" themeColor="danger" inputPrompt={() => ( diff --git a/FrontEnd/src/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/views/center/TimelineCreateDialog.tsx index b4e25ba1..4871a5e0 100644 --- a/FrontEnd/src/views/center/TimelineCreateDialog.tsx +++ b/FrontEnd/src/views/center/TimelineCreateDialog.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useHistory } from "react-router"; import { validateTimelineName } from "@/services/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; interface TimelineCreateDialogProps { @@ -16,7 +16,7 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => { return ( <OperationDialog open={props.open} - close={props.close} + onClose={props.close} themeColor="success" title="home.createDialog.title" inputScheme={ diff --git a/FrontEnd/src/views/common/ToggleIconButton.tsx b/FrontEnd/src/views/common/ToggleIconButton.tsx deleted file mode 100644 index c4d2d132..00000000 --- a/FrontEnd/src/views/common/ToggleIconButton.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import classnames from "classnames"; - -export interface ToggleIconButtonProps - extends React.HTMLAttributes<HTMLElement> { - state: boolean; - trueIconClassName: string; - falseIconClassName: string; -} - -const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({ - state, - className, - trueIconClassName, - falseIconClassName, - ...otherProps -}) => { - return ( - <i - className={classnames( - state ? trueIconClassName : falseIconClassName, - "icon-button", - className - )} - {...otherProps} - /> - ); -}; - -export default ToggleIconButton; diff --git a/FrontEnd/src/views/common/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx index cd9f1adc..fd1c19b3 100644 --- a/FrontEnd/src/views/common/LoadingButton.tsx +++ b/FrontEnd/src/views/common/button/LoadingButton.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { Button, ButtonProps, Spinner } from "react-bootstrap"; const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({ loading, diff --git a/FrontEnd/src/views/common/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx index 70dc83f5..1ad52350 100644 --- a/FrontEnd/src/views/common/ConfirmDialog.tsx +++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx @@ -2,25 +2,23 @@ import { convertI18nText, I18nText } from "@/common"; import React from "react"; import { useTranslation } from "react-i18next"; -import Button from "./button/Button"; +import Button from "../button/Button"; +import Dialog from "./Dialog"; const ConfirmDialog: React.FC<{ + open?: boolean; onClose: () => void; onConfirm: () => void; title: I18nText; body: I18nText; -}> = ({ onClose, onConfirm, title, body }) => { +}> = ({ open, onClose, onConfirm, title, body }) => { const { t } = useTranslation(); return ( - <Modal onHide={onClose} show centered> - <Modal.Header> - <Modal.Title className="text-danger"> - {convertI18nText(title, t)} - </Modal.Title> - </Modal.Header> - <Modal.Body>{convertI18nText(body, t)}</Modal.Body> - <Modal.Footer> + <Dialog onClose={onClose} open={open}> + <h3 className="text-danger">{convertI18nText(title, t)}</h3> + <p>{convertI18nText(body, t)}</p> + <div> <Button text="operationDialog.cancel" color="secondary" @@ -34,8 +32,8 @@ const ConfirmDialog: React.FC<{ onClose(); }} /> - </Modal.Footer> - </Modal> + </div> + </Dialog> ); }; diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/FrontEnd/src/views/common/dailog/Dialog.css diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx new file mode 100644 index 00000000..5a3902c4 --- /dev/null +++ b/FrontEnd/src/views/common/dailog/Dialog.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export interface DialogProps { + onClose: () => void; + open?: boolean; + children?: React.ReactNode; +} + +export default function Dialog(props: DialogProps): React.ReactElement | null { + const { open, onClose, children } = props; + + return <div>{children}</div>; +} diff --git a/FrontEnd/src/views/common/OperationDialog.tsx b/FrontEnd/src/views/common/dailog/OperationDialog.tsx index ac4c51b9..129e85d5 100644 --- a/FrontEnd/src/views/common/OperationDialog.tsx +++ b/FrontEnd/src/views/common/dailog/OperationDialog.tsx @@ -1,12 +1,13 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Form, Button, Modal } from "react-bootstrap"; import { TwitterPicker } from "react-color"; import moment from "moment"; import { convertI18nText, I18nText, UiLogicError } from "@/common"; -import LoadingButton from "./LoadingButton"; +import Button from "../button/Button"; +import LoadingButton from "../button/LoadingButton"; +import Dialog from "./Dialog"; interface DefaultErrorPromptProps { error?: string; @@ -141,7 +142,7 @@ export interface OperationDialogProps< OperationInputInfoList extends readonly OperationDialogInput[] > { open: boolean; - close: () => void; + onClose: () => void; title: I18nText | (() => React.ReactNode); themeColor?: "danger" | "success" | string; onProcess: ( @@ -204,7 +205,7 @@ const OperationDialog = < const close = (): void => { if (step.type !== "process") { - props.close(); + props.onClose(); if (step.type === "success" && props.onSuccessAndClose) { props.onSuccessAndClose(step.data); } @@ -278,7 +279,7 @@ const OperationDialog = < body = ( <> - <Modal.Body> + <div> {inputPrompt} {inputScheme.map((item, index) => { const value = values[index]; @@ -403,11 +404,13 @@ const OperationDialog = < ); } })} - </Modal.Body> - <Modal.Footer> - <Button variant="outline-secondary" onClick={close}> - {t("operationDialog.cancel")} - </Button> + </div> + <div> + <Button + text="operationDialog.cancel" + color="secondary" + onClick={close} + /> <LoadingButton variant={props.themeColor} loading={process} @@ -421,7 +424,7 @@ const OperationDialog = < > {t("operationDialog.confirm")} </LoadingButton> - </Modal.Footer> + </div> </> ); } else { @@ -439,12 +442,10 @@ const OperationDialog = < } body = ( <> - <Modal.Body>{content}</Modal.Body> - <Modal.Footer> - <Button variant="primary" onClick={close}> - {t("operationDialog.ok")} - </Button> - </Modal.Footer> + <div>{content}</div> + <div> + <Button text="operationDialog.ok" color="primary" onClick={close} /> + </div> </> ); } @@ -455,16 +456,16 @@ const OperationDialog = < : convertI18nText(props.title, t); return ( - <Modal show={props.open} onHide={close}> - <Modal.Header + <Dialog open={props.open} onClose={close}> + <h3 className={ props.themeColor != null ? "text-" + props.themeColor : undefined } > {title} - </Modal.Header> + </h3> {body} - </Modal> + </Dialog> ); }; diff --git a/FrontEnd/src/views/login/index.tsx b/FrontEnd/src/views/login/index.tsx index 55bd2f8c..89aeb47a 100644 --- a/FrontEnd/src/views/login/index.tsx +++ b/FrontEnd/src/views/login/index.tsx @@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next"; import { useUser, userService } from "@/services/user"; import AppBar from "../common/AppBar"; -import LoadingButton from "../common/LoadingButton"; +import LoadingButton from "../common/button/LoadingButton"; import "./index.css"; diff --git a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx index 1baab1cc..0bf51c21 100644 --- a/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx +++ b/FrontEnd/src/views/settings/ChangeAvatarDialog.tsx @@ -10,6 +10,7 @@ import { getHttpUserClient } from "@/http/user"; import ImageCropper, { Clip, applyClipToImage } from "../common/ImageCropper"; import Button from "../common/button/Button"; +import Dialog from "../common/dailog/Dialog"; export interface ChangeAvatarDialogProps { open: boolean; @@ -159,29 +160,27 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { }; return ( - <Modal show={props.open} onHide={close}> - <Modal.Header> - <Modal.Title> {t("settings.dialogChangeAvatar.title")}</Modal.Title> - </Modal.Header> + <Dialog open={props.open} onClose={close}> + <h3>{t("settings.dialogChangeAvatar.title")}</h3> {(() => { if (state === "select") { return ( <> - <Modal.Body className="container"> + <div className="container"> <div className="row"> {t("settings.dialogChangeAvatar.prompt.select")} </div> <div className="row"> <input type="file" accept="image/*" onChange={onSelectFile} /> </div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.cancel" color="secondary" onClick={close} /> - </Modal.Footer> + </div> </> ); } else if (state === "crop") { @@ -190,7 +189,7 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { } return ( <> - <Modal.Body className="container"> + <div className="container"> <div className="row justify-content-center"> <ImageCropper clip={clip} @@ -202,8 +201,8 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { <div className="row"> {t("settings.dialogChangeAvatar.prompt.crop")} </div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.cancel" color="secondary" @@ -222,18 +221,18 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { cropImgElement == null || clip == null || clip.width === 0 } /> - </Modal.Footer> + </div> </> ); } else if (state === "processcrop") { return ( <> - <Modal.Body className="container"> + <div className="container"> <div className="row"> {t("settings.dialogChangeAvatar.prompt.processingCrop")} </div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.cancel" color="secondary" @@ -244,19 +243,19 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { color="secondary" onClick={onPreviewPrevious} /> - </Modal.Footer> + </div> </> ); } else if (state === "preview") { return ( <> - <Modal.Body className="container"> + <div className="container"> {createPreviewRow()} <div className="row"> {t("settings.dialogChangeAvatar.prompt.preview")} </div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.cancel" color="secondary" @@ -272,46 +271,46 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { color="primary" onClick={upload} /> - </Modal.Footer> + </div> </> ); } else if (state === "uploading") { return ( <> - <Modal.Body className="container"> + <div className="container"> {createPreviewRow()} <div className="row"> {t("settings.dialogChangeAvatar.prompt.uploading")} </div> - </Modal.Body> - <Modal.Footer></Modal.Footer> + </div> + <div></div> </> ); } else if (state === "success") { return ( <> - <Modal.Body className="container"> + <div className="container"> <div className="row p-4 text-success"> {t("operationDialog.success")} </div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.ok" color="success" onClick={close} /> - </Modal.Footer> + </div> </> ); } else { return ( <> - <Modal.Body className="container"> + <div className="container"> {createPreviewRow()} <div className="row text-danger">{trueMessage}</div> - </Modal.Body> - <Modal.Footer> + </div> + <div> <Button text="operationDialog.cancel" color="secondary" @@ -322,12 +321,12 @@ const ChangeAvatarDialog: React.FC<ChangeAvatarDialogProps> = (props) => { color="primary" onClick={upload} /> - </Modal.Footer> + </div> </> ); } })()} - </Modal> + </Dialog> ); }; diff --git a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx index 4b44cdd6..605796ca 100644 --- a/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx +++ b/FrontEnd/src/views/settings/ChangeNicknameDialog.tsx @@ -2,7 +2,7 @@ import { getHttpUserClient } from "@/http/user"; import { useUserLoggedIn } from "@/services/user"; import React from "react"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; export interface ChangeNicknameDialogProps { open: boolean; @@ -24,7 +24,7 @@ const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => { nickname: newNickname, }); }} - close={props.close} + onClose={props.close} /> ); }; diff --git a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx index 21eeeb09..944fdaed 100644 --- a/FrontEnd/src/views/settings/ChangePasswordDialog.tsx +++ b/FrontEnd/src/views/settings/ChangePasswordDialog.tsx @@ -3,7 +3,7 @@ import { useHistory } from "react-router"; import { userService } from "@/services/user"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; export interface ChangePasswordDialogProps { open: boolean; @@ -55,7 +55,7 @@ const ChangePasswordDialog: React.FC<ChangePasswordDialogProps> = (props) => { await userService.changePassword(oldPassword, newPassword); setRedirect(true); }} - close={() => { + onClose={() => { props.close(); if (redirect) { history.push("/login"); diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx index 005da933..0e43cb6e 100644 --- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx @@ -9,7 +9,7 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; import FlatButton from "../common/button/FlatButton"; import TabPages from "../common/TabPages"; import TimelinePostBuilder from "@/services/TimelinePostBuilder"; -import ConfirmDialog from "../common/ConfirmDialog"; +import ConfirmDialog from "../common/dailog/ConfirmDialog"; export interface MarkdownPostEditProps { timeline: string; diff --git a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx index 001e52d7..988124b6 100644 --- a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx +++ b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx @@ -2,7 +2,7 @@ import React from "react"; import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; function PostPropertyChangeDialog(props: { onClose: () => void; @@ -14,7 +14,7 @@ function PostPropertyChangeDialog(props: { return ( <OperationDialog title="timeline.changePostPropertyDialog.title" - close={onClose} + onClose={onClose} open inputScheme={[ { diff --git a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx index b522f288..06e508e6 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePostEdit.tsx @@ -15,7 +15,7 @@ import { pushAlert } from "@/services/alert"; import { base64 } from "@/http/common"; import BlobImage from "../common/BlobImage"; -import LoadingButton from "../common/LoadingButton"; +import LoadingButton from "../common/button/LoadingButton"; import { PopupMenu } from "../common/Menu"; import Card from "../common/Card"; import MarkdownPostEdit from "./MarkdownPostEdit"; diff --git a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx index 70f72025..64daa19b 100644 --- a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx +++ b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx @@ -8,7 +8,7 @@ import { TimelineVisibility, } from "@/http/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; export interface TimelinePropertyChangeDialogProps { open: boolean; @@ -60,7 +60,7 @@ const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> ] as const } open={props.open} - close={props.close} + onClose={props.close} onProcess={([newTitle, newVisibility, newDescription, newColor]) => { const req: HttpTimelinePatchRequest = {}; if (newTitle !== timeline.title) { diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx index dbca62ca..aedf4f29 100644 --- a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx +++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx @@ -4,7 +4,7 @@ import { Trans } from "react-i18next"; import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; interface TimelineDeleteDialog { timeline: HttpTimelineInfo; @@ -20,7 +20,7 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => { return ( <OperationDialog open={props.open} - close={props.close} + onClose={props.close} title="timeline.deleteDialog.title" themeColor="danger" inputPrompt={() => { |