chore: use drawer instead of dialog

2025-07-03 20:21:40 +00:00 · 2023-11-15 22:14:36 +08:00
parent 30d9dd04bb
commit 2296eb96ef
12 changed files with 105 additions and 141 deletions
--- a/frontend/web/src/components/CollectionView.tsx
+++ b/frontend/web/src/components/CollectionView.tsx
@ -11,7 +11,7 @@ import { useAppSelector } from "@/stores";
 import useCollectionStore from "@/stores/v1/collection";
 import { Collection } from "@/types/proto/api/v2/collection_service";
 import { showCommonDialog } from "./Alert";
-import CreateCollectionDialog from "./CreateCollectionDialog";
+import CreateCollectionDialog from "./CreateCollectionDrawer";
 import Icon from "./Icon";
 import ShortcutView from "./ShortcutView";
 import Dropdown from "./common/Dropdown";
--- a/frontend/web/src/components/CreateCollectionDrawer.tsx
+++ b/frontend/web/src/components/CreateCollectionDrawer.tsx
@ -1,4 +1,4 @@
-import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
+import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
 import { isUndefined } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@ -22,7 +22,7 @@ interface State {
  collectionCreate: Collection;
 }

-const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
+const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
  const { onClose, onConfirm, collectionId } = props;
  const { t } = useTranslation();
  const collectionStore = useCollectionStore();
@ -141,15 +141,11 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
  };

  return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="w-full flex flex-row justify-between items-center">
-          <span className="text-lg font-medium">{isCreating ? "Create Collection" : "Edit Collection"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden w-80 sm:w-96 max-w-full">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
          <div className="w-full flex flex-col justify-start items-start mb-3">
            <span className="mb-2">
              Name <span className="text-red-600">*</span>
@ -241,19 +237,20 @@ const CreateCollectionDialog: React.FC<Props> = (props: Props) => {
              )}
            </div>
          </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
        </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
  );
 };

-export default CreateCollectionDialog;
+export default CreateCollectionDrawer;
--- a/frontend/web/src/components/CreateShortcutDrawer.tsx
+++ b/frontend/web/src/components/CreateShortcutDrawer.tsx
@ -1,4 +1,16 @@
-import { Button, Divider, Input, Modal, ModalDialog, Radio, RadioGroup, Textarea } from "@mui/joy";
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  Drawer,
+  Input,
+  ModalClose,
+  Radio,
+  RadioGroup,
+  Textarea,
+} from "@mui/joy";
 import classnames from "classnames";
 import { isUndefined, uniq } from "lodash-es";
 import { useEffect, useState } from "react";
@ -22,7 +34,7 @@ interface State {

 const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];

-const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
+const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
  const { onClose, onConfirm, shortcutId, initialShortcut } = props;
  const { t } = useTranslation();
  const { shortcutList } = useAppSelector((state) => state.shortcut);
@ -199,15 +211,11 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
  };

  return (
-    <Modal open={true}>
-      <ModalDialog>
-        <div className="flex flex-row justify-between items-center w-80 sm:w-96">
-          <span className="text-lg font-medium">{isCreating ? "Create Shortcut" : "Edit Shortcut"}</span>
-          <Button variant="plain" onClick={onClose}>
-            <Icon.X className="w-5 h-auto text-gray-600" />
-          </Button>
-        </div>
-        <div className="overflow-y-auto overflow-x-hidden">
+    <Drawer anchor="right" open={true} onClose={onClose}>
+      <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
+      <ModalClose />
+      <DialogContent className="max-w-full sm:max-w-sm">
+        <div className="overflow-y-auto w-full mt-2 px-3">
          <div className="w-full flex flex-col justify-start items-start mb-3">
            <span className="mb-2">
              Name <span className="text-red-600">*</span>
@ -362,19 +370,20 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
              </div>
            )}
          </div>
-
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-            <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
-              {t("common.cancel")}
-            </Button>
-            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
-              {t("common.save")}
-            </Button>
-          </div>
        </div>
-      </ModalDialog>
-    </Modal>
+      </DialogContent>
+      <DialogActions>
+        <div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
+          <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </Button>
+        </div>
+      </DialogActions>
+    </Drawer>
  );
 };

-export default CreateShortcutDialog;
+export default CreateShortcutDrawer;
--- a/frontend/web/src/components/ShortcutActionsDropdown.tsx
+++ b/frontend/web/src/components/ShortcutActionsDropdown.tsx
@ -4,7 +4,7 @@ import useNavigateTo from "@/hooks/useNavigateTo";
 import { shortcutService } from "../services";
 import useUserStore from "../stores/v1/user";
 import { showCommonDialog } from "./Alert";
-import CreateShortcutDialog from "./CreateShortcutDialog";
+import CreateShortcutDrawer from "./CreateShortcutDrawer";
 import GenerateQRCodeDialog from "./GenerateQRCodeDialog";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
@ -18,7 +18,7 @@ const ShortcutActionsDropdown = (props: Props) => {
  const { t } = useTranslation();
  const navigateTo = useNavigateTo();
  const currentUser = useUserStore().getCurrentUser();
-  const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
+  const [showEditDrawer, setShowEditDrawer] = useState<boolean>(false);
  const [showQRCodeDialog, setShowQRCodeDialog] = useState<boolean>(false);
  const havePermission = currentUser.role === "ADMIN" || shortcut.creatorId === currentUser.id;

@ -46,7 +46,7 @@ const ShortcutActionsDropdown = (props: Props) => {
            {havePermission && (
              <button
                className="w-full px-2 flex flex-row justify-start items-center text-left leading-8 cursor-pointer rounded hover:bg-gray-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-60 dark:hover:bg-zinc-800"
-                onClick={() => setShowEditDialog(true)}
+                onClick={() => setShowEditDrawer(true)}
              >
                <Icon.Edit className="w-4 h-auto mr-2" /> {t("common.edit")}
              </button>
@ -77,11 +77,11 @@ const ShortcutActionsDropdown = (props: Props) => {
        }
      ></Dropdown>

-      {showEditDialog && (
-        <CreateShortcutDialog
+      {showEditDrawer && (
+        <CreateShortcutDrawer
          shortcutId={shortcut.id}
-          onClose={() => setShowEditDialog(false)}
-          onConfirm={() => setShowEditDialog(false)}
+          onClose={() => setShowEditDrawer(false)}
+          onConfirm={() => setShowEditDrawer(false)}
        />
      )}

--- a/frontend/web/src/components/ShortcutsContainer.tsx
+++ b/frontend/web/src/components/ShortcutsContainer.tsx
@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { absolutifyLink } from "@/helpers/utils";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import useViewStore from "../stores/v1/view";
 import ShortcutCard from "./ShortcutCard";
 import ShortcutView from "./ShortcutView";
@ -10,12 +10,13 @@ interface Props {

 const ShortcutsContainer: React.FC<Props> = (props: Props) => {
  const { shortcutList } = props;
+  const navigateTo = useNavigateTo();
  const viewStore = useViewStore();
  const displayStyle = viewStore.displayStyle || "full";
  const ShortcutItemView = viewStore.displayStyle === "compact" ? ShortcutView : ShortcutCard;

  const handleShortcutClick = (shortcut: Shortcut) => {
-    window.open(absolutifyLink(`/s/${shortcut.name}`));
+    navigateTo(`/shortcut/${shortcut.id}`);
  };

  return (
--- a/frontend/web/src/components/ViewSetting.tsx
+++ b/frontend/web/src/components/ViewSetting.tsx
@ -18,7 +18,7 @@ const ViewSetting = () => {
          <Icon.Settings2 className="w-4 h-auto text-gray-500" />
        </button>
      }
-      actionsClassName="!mt-3 !-right-2"
+      actionsClassName="!mt-3 !right-[unset] -left-24 -ml-2"
      actions={
        <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
          <div className="w-full flex flex-row justify-between items-center">