-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
170 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
web/src/components/MemoDetailSidebar/MemoDetailSidebar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import clsx from "clsx"; | ||
| import { Memo } from "@/types/proto/api/v1/memo_service"; | ||
| import { useTranslate } from "@/utils/i18n"; | ||
| import Icon from "../Icon"; | ||
|
|
||
| interface Props { | ||
| memo: Memo; | ||
| className?: string; | ||
| } | ||
|
|
||
| const MemoDetailSidebar = ({ memo, className }: Props) => { | ||
| const t = useTranslate(); | ||
|
|
||
| if (!memo.property) { | ||
| return; | ||
| } | ||
|
|
||
| return ( | ||
| <aside | ||
| className={clsx( | ||
| "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start", | ||
| className, | ||
| )} | ||
| > | ||
| <div className="flex flex-col justify-start items-start w-full mt-1 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar"> | ||
| <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none"> | ||
| <span>{t("common.tags")}</span> | ||
| {memo.property.tags.length > 0 && <span className="shrink-0">({memo.property.tags.length})</span>} | ||
| </div> | ||
| <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1"> | ||
| {memo.property.tags.map((tag) => ( | ||
| <div | ||
| key={tag} | ||
| className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800" | ||
| > | ||
| <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" /> | ||
| <div className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}> | ||
| <span className="truncate dark:opacity-80">{tag}</span> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </aside> | ||
| ); | ||
| }; | ||
|
|
||
| export default MemoDetailSidebar; |
41 changes: 41 additions & 0 deletions
41
web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { Drawer, IconButton } from "@mui/joy"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useLocation } from "react-router-dom"; | ||
| import { Memo } from "@/types/proto/api/v1/memo_service"; | ||
| import Icon from "../Icon"; | ||
| import MemoDetailSidebar from "./MemoDetailSidebar"; | ||
|
|
||
| interface Props { | ||
| memo: Memo; | ||
| } | ||
|
|
||
| const MemoDetailSidebarDrawer = ({ memo }: Props) => { | ||
| const location = useLocation(); | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setOpen(false); | ||
| }, [location.pathname]); | ||
|
|
||
| const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { | ||
| if (event.type === "keydown" && ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")) { | ||
| return; | ||
| } | ||
| setOpen(inOpen); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <IconButton onClick={toggleDrawer(true)}> | ||
| <Icon.GanttChart className="w-5 h-auto dark:text-gray-400" /> | ||
| </IconButton> | ||
| <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}> | ||
| <div className="w-full h-full px-4 bg-zinc-100 dark:bg-zinc-900"> | ||
| <MemoDetailSidebar className="py-4" memo={memo} /> | ||
| </div> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MemoDetailSidebarDrawer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import MemoDetailSidebar from "./MemoDetailSidebar"; | ||
| import MemoDetailSidebarDrawer from "./MemoDetailSidebarDrawer"; | ||
|
|
||
| export { MemoDetailSidebar, MemoDetailSidebarDrawer }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters