YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-04-03 12:21:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: tweak route enum

Browse Source
This commit is contained in:
Steven 2024-03-18 12:07:44 +08:00
parent 1e43c8d84b
commit f3fb5e0c60
7 changed files with 37 additions and 34 deletions

10
web/src/components/MemoContent/index.tsx

@ -4,7 +4,6 @@ import useCurrentUser from "@/hooks/useCurrentUser";
import { useMemoStore } from "@/store/v1"; import { useMemoStore } from "@/store/v1";
import { Node, NodeType } from "@/types/node"; import { Node, NodeType } from "@/types/node";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import Icon from "../Icon";
import Renderer from "./Renderer"; import Renderer from "./Renderer";
import { RendererContext } from "./types"; import { RendererContext } from "./types";
@ -89,15 +88,14 @@ const MemoContent: React.FC<Props> = (props: Props) => {
return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />; return <Renderer key={`${node.type}-${index}`} index={String(index)} node={node} />;
})} })}
</div> </div>
{memo && showCompactMode && ( {showCompactMode && (
<div className="w-full mt-1"> <div className="w-full mt-1">
<div <span
className="w-auto inline-flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80" className="w-auto flex flex-row justify-start items-center cursor-pointer text-sm text-blue-600 dark:text-blue-400 hover:opacity-80"
onClick={() => setShowCompactMode(false)} onClick={() => setShowCompactMode(false)}
> >
<span>{t("memo.show-more")}</span> <span>{t("memo.show-more")}</span>
<Icon.ChevronRight className="w-4 h-auto" /> </span>
</div>
</div> </div>
)} )}
</div> </div>

2
web/src/components/MemoFilter.tsx

@ -45,7 +45,7 @@ const MemoFilter = (props: Props) => {
filterStore.setTagFilter(undefined); filterStore.setTagFilter(undefined);
}} }}
> >
<Icon.Tag className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery} <Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {tagQuery}
<Icon.X className="w-4 h-auto ml-1 opacity-40" /> <Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div> </div>
<div <div

19
web/src/components/Navigation.tsx

@ -3,6 +3,7 @@ import classNames from "classnames";
import { useEffect } from "react"; import { useEffect } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import useCurrentUser from "@/hooks/useCurrentUser"; import useCurrentUser from "@/hooks/useCurrentUser";
import { Routes } from "@/router";
import { useInboxStore } from "@/store/v1"; import { useInboxStore } from "@/store/v1";
import { Inbox_Status } from "@/types/proto/api/v2/inbox_service"; import { Inbox_Status } from "@/types/proto/api/v2/inbox_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
@ -49,25 +50,25 @@ const Navigation = (props: Props) => {
const homeNavLink: NavLinkItem = { const homeNavLink: NavLinkItem = {
id: "header-home", id: "header-home",
path: "/", path: Routes.HOME,
title: t("common.home"), title: t("common.home"),
icon: <Icon.Home className="w-6 h-auto opacity-70" />, icon: <Icon.Home className="w-6 h-auto opacity-70" />,
}; };
const timelineNavLink: NavLinkItem = { const timelineNavLink: NavLinkItem = {
id: "header-timeline", id: "header-timeline",
path: "/timeline", path: Routes.TIMELINE,
title: t("timeline.title"), title: t("timeline.title"),
icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />, icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />,
}; };
const resourcesNavLink: NavLinkItem = { const resourcesNavLink: NavLinkItem = {
id: "header-resources", id: "header-resources",
path: "/resources", path: Routes.RESOURCES,
title: t("common.resources"), title: t("common.resources"),
icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />, icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />,
}; };
const exploreNavLink: NavLinkItem = { const exploreNavLink: NavLinkItem = {
id: "header-explore", id: "header-explore",
path: "/explore", path: Routes.EXPLORE,
title: t("common.explore"), title: t("common.explore"),
icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />, icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />,
}; };
@ -79,7 +80,7 @@ const Navigation = (props: Props) => {
}; };
const inboxNavLink: NavLinkItem = { const inboxNavLink: NavLinkItem = {
id: "header-inbox", id: "header-inbox",
path: "/inbox", path: Routes.INBOX,
title: t("common.inbox"), title: t("common.inbox"),
icon: ( icon: (
<> <>
@ -92,25 +93,25 @@ const Navigation = (props: Props) => {
}; };
const archivedNavLink: NavLinkItem = { const archivedNavLink: NavLinkItem = {
id: "header-archived", id: "header-archived",
path: "/archived", path: Routes.ARCHIVED,
title: t("common.archived"), title: t("common.archived"),
icon: <Icon.Archive className="w-6 h-auto opacity-70" />, icon: <Icon.Archive className="w-6 h-auto opacity-70" />,
}; };
const settingNavLink: NavLinkItem = { const settingNavLink: NavLinkItem = {
id: "header-setting", id: "header-setting",
path: "/setting", path: Routes.SETTING,
title: t("common.settings"), title: t("common.settings"),
icon: <Icon.Settings className="w-6 h-auto opacity-70" />, icon: <Icon.Settings className="w-6 h-auto opacity-70" />,
}; };
const signInNavLink: NavLinkItem = { const signInNavLink: NavLinkItem = {
id: "header-auth", id: "header-auth",
path: "/auth", path: Routes.AUTH,
title: t("common.sign-in"), title: t("common.sign-in"),
icon: <Icon.LogIn className="w-6 h-auto opacity-70" />, icon: <Icon.LogIn className="w-6 h-auto opacity-70" />,
}; };
const aboutNavLink: NavLinkItem = { const aboutNavLink: NavLinkItem = {
id: "header-about", id: "header-about",
path: "/about", path: Routes.ABOUT,
title: t("common.about"), title: t("common.about"),
icon: <Icon.Smile className="w-6 h-auto opacity-70" />, icon: <Icon.Smile className="w-6 h-auto opacity-70" />,
}; };

14
web/src/components/ShareMemoDialog.tsx

@ -26,14 +26,14 @@ interface Props extends DialogProps {
const ShareMemoDialog: React.FC<Props> = (props: Props) => { const ShareMemoDialog: React.FC<Props> = (props: Props) => {
const { memoId, destroy } = props; const { memoId, destroy } = props;
const t = useTranslate(); const t = useTranslate();
const currentUser = useCurrentUser();
const userStore = useUserStore(); const userStore = useUserStore();
const memoStore = useMemoStore();
const downloadingImageState = useLoading(false); const downloadingImageState = useLoading(false);
const loadingState = useLoading(); const loadingState = useLoading();
const memoElRef = useRef<HTMLDivElement>(null); const memoContainerRef = useRef<HTMLDivElement>(null);
const memoStore = useMemoStore();
const memo = memoStore.getMemoById(memoId); const memo = memoStore.getMemoById(memoId);
const user = userStore.getUserByUsername(extractUsernameFromName(memo.creator)); const user = userStore.getUserByUsername(extractUsernameFromName(memo.creator));
const currentUser = useCurrentUser();
const readonly = memo?.creatorId !== currentUser?.id; const readonly = memo?.creatorId !== currentUser?.id;
useEffect(() => { useEffect(() => {
@ -48,12 +48,12 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
}; };
const handleDownloadImageBtnClick = () => { const handleDownloadImageBtnClick = () => {
if (!memoElRef.current) { if (!memoContainerRef.current) {
return; return;
} }
downloadingImageState.setLoading(); downloadingImageState.setLoading();
toImage(memoElRef.current, { toImage(memoContainerRef.current, {
pixelRatio: window.devicePixelRatio * 2, pixelRatio: window.devicePixelRatio * 2,
}) })
.then((url) => { .then((url) => {
@ -151,10 +151,10 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
<div className="w-full border-t dark:border-zinc-700 overflow-clip"> <div className="w-full border-t dark:border-zinc-700 overflow-clip">
<div <div
className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800" className="w-full h-auto select-none relative flex flex-col justify-start items-start bg-white dark:bg-zinc-800"
ref={memoElRef} ref={memoContainerRef}
> >
<span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span> <span className="w-full px-6 pt-5 pb-2 text-sm text-gray-500">{getDateTimeString(memo.displayTime)}</span>
<div className="w-full px-6 text-base pb-4"> <div className="w-full px-6 text-base pb-4 space-y-2">
<MemoContent memoId={memo.id} content={memo.content} readonly={true} disableFilter /> <MemoContent memoId={memo.id} content={memo.content} readonly={true} disableFilter />
<MemoResourceListView resources={memo.resources} /> <MemoResourceListView resources={memo.resources} />
</div> </div>

15
web/src/components/TagList.tsx

@ -83,7 +83,7 @@ const TagList = () => {
<Icon.Plus className="w-4 h-4 text-gray-400" /> <Icon.Plus className="w-4 h-4 text-gray-400" />
</button> </button>
</div> </div>
<div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap"> <div className="flex flex-col justify-start items-start relative w-full h-auto flex-nowrap gap-1 mt-1">
{tags.map((t, idx) => ( {tags.map((t, idx) => (
<TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={filter.tag} /> <TagItemContainer key={t.text + "-" + idx} tag={t} tagQuery={filter.tag} />
))} ))}
@ -133,7 +133,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
return ( return (
<> <>
<div className="relative group flex flex-row justify-between items-center w-full h-8 py-0 mt-px first:mt-1 rounded-lg text-base sm:text-sm cursor-pointer select-none shrink-0 hover:opacity-80"> <div className="relative flex flex-row justify-between items-center w-full leading-6 py-0 mt-px rounded-lg text-base select-none shrink-0">
<div <div
className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${ className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${
isActive && "!text-blue-600" isActive && "!text-blue-600"
@ -141,11 +141,12 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
> >
<Dropdown> <Dropdown>
<MenuButton slots={{ root: "div" }}> <MenuButton slots={{ root: "div" }}>
<div className="shrink-0"> <div className="shrink-0 group">
<Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" /> <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-60 mr-1" />
<Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60 mr-1" />
</div> </div>
</MenuButton> </MenuButton>
<Menu size="sm" placement="bottom-start"> <Menu size="sm" placement="bottom">
<MenuItem onClick={() => showRenameTagDialog({ tag: tag.text })}> <MenuItem onClick={() => showRenameTagDialog({ tag: tag.text })}>
<Icon.Edit3 className="w-4 h-auto" /> <Icon.Edit3 className="w-4 h-auto" />
{t("common.rename")} {t("common.rename")}
@ -156,7 +157,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
</MenuItem> </MenuItem>
</Menu> </Menu>
</Dropdown> </Dropdown>
<span className="truncate" onClick={handleTagClick}> <span className="truncate cursor-pointer hover:opacity-80" onClick={handleTagClick}>
{tag.key} {tag.key}
</span> </span>
</div> </div>
@ -166,7 +167,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`} className={`flex flex-row justify-center items-center w-6 h-6 shrink-0 transition-all rotate-0 ${showSubTags && "rotate-90"}`}
onClick={handleToggleBtnClick} onClick={handleToggleBtnClick}
> >
<Icon.ChevronRight className="w-5 h-5 opacity-40 dark:text-gray-400" /> <Icon.ChevronRight className="w-5 h-5 cursor-pointer opacity-40 dark:text-gray-400" />
</span> </span>
) : null} ) : null}
</div> </div>

2
web/src/layouts/HomeLayout.tsx

@ -26,7 +26,7 @@ const HomeLayout = () => {
location.pathname, location.pathname,
) )
) { ) {
navigateTo("/explore"); navigateTo(Routes.EXPLORE);
} }
}, []); }, []);

9
web/src/router/index.tsx

@ -27,6 +27,9 @@ export enum Routes {
INBOX = "/inbox", INBOX = "/inbox",
ARCHIVED = "/archived", ARCHIVED = "/archived",
SETTING = "/setting", SETTING = "/setting",
EXPLORE = "/explore",
ABOUT = "/about",
AUTH = "/auth",
} }
const router = createBrowserRouter([ const router = createBrowserRouter([
@ -35,7 +38,7 @@ const router = createBrowserRouter([
element: <App />, element: <App />,
children: [ children: [
{ {
path: "/auth", path: Routes.AUTH,
element: <SuspenseWrapper />, element: <SuspenseWrapper />,
children: [ children: [
{ {
@ -81,7 +84,7 @@ const router = createBrowserRouter([
element: <Setting />, element: <Setting />,
}, },
{ {
path: "explore", path: Routes.EXPLORE,
element: <Explore />, element: <Explore />,
}, },
{ {
@ -93,7 +96,7 @@ const router = createBrowserRouter([
element: <UserProfile />, element: <UserProfile />,
}, },
{ {
path: "about", path: Routes.ABOUT,
element: <About />, element: <About />,
}, },
{ {