usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-01-01 10:01:54 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: remove memo filter

Browse source
This commit is contained in:
Steven 2024-06-05 23:18:14 +08:00
parent f33571fec6
commit 076aa2f8aa
7 changed files with 54 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
web/src/components/HomeSidebar/TagsSection.tsx
View file

@ -1,4 +1,5 @@
import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
import clsx from "clsx";
import toast from "react-hot-toast";
import { useLocation } from "react-router-dom";
import useDebounce from "react-use/lib/useDebounce";
@ -19,6 +20,7 @@ const TagsSection = (props: Props) => {
const t = useTranslate();
const location = useLocation();
const user = useCurrentUser();
const filterStore = useFilterStore();
const tagStore = useTagStore();
const memoList = useMemoList();
const tagAmounts = Object.entries(tagStore.getState().tagAmounts)
@ -31,44 +33,7 @@ const TagsSection = (props: Props) => {
await tagStore.fetchTags({ user, location });
};
return (
<div className="flex flex-col justify-start items-start w-full mt-3 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>
{tagAmounts.length > 0 && <span className="shrink-0">({tagAmounts.length})</span>}
</div>
{tagAmounts.length > 0 ? (
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
{tagAmounts.map(([tag, amount]) => (
<TagContainer key={tag} tag={tag} amount={amount} />
))}
</div>
) : (
!props.readonly && (
<div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
<Icon.Tags />
<p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
</div>
)
)}
</div>
);
};
interface TagContainerProps {
tag: string;
amount: number;
}
const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) => {
const t = useTranslate();
const filterStore = useFilterStore();
const tagStore = useTagStore();
const { tag, amount } = props;
const user = useCurrentUser();
const location = useLocation();
const handleTagClick = () => {
const handleTagClick = (tag: string) => {
if (filterStore.getState().tag === tag) {
filterStore.setTagFilter(undefined);
} else {
@ -76,7 +41,7 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
}
};
const handleDeleteTag = async () => {
const handleDeleteTag = async (tag: string) => {
showCommonDialog({
title: t("tag.delete-tag"),
content: t("tag.delete-confirm"),
@ -94,31 +59,57 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
};
return (
<div
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`}
>
<Dropdown>
<MenuButton slots={{ root: "div" }}>
<div className="shrink-0 group">
<Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
<Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60" />
</div>
</MenuButton>
<Menu size="sm" placement="bottom-start">
<MenuItem onClick={() => showRenameTagDialog({ tag: tag })}>
<Icon.Edit3 className="w-4 h-auto" />
{t("common.rename")}
</MenuItem>
<MenuItem color="danger" onClick={handleDeleteTag}>
<Icon.Trash className="w-4 h-auto" />
{t("common.delete")}
</MenuItem>
</Menu>
</Dropdown>
<div className="inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]" onClick={handleTagClick}>
<span className="truncate dark:opacity-80">{tag}</span>
{amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
<div className="flex flex-col justify-start items-start w-full mt-3 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>
{tagAmounts.length > 0 && <span className="shrink-0">({tagAmounts.length})</span>}
</div>
{tagAmounts.length > 0 ? (
<div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
{tagAmounts.map(([tag, amount]) => (
<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"
>
<Dropdown>
<MenuButton slots={{ root: "div" }}>
<div className="shrink-0 group">
<Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
<Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60" />
</div>
</MenuButton>
<Menu size="sm" placement="bottom-start">
<MenuItem onClick={() => showRenameTagDialog({ tag: tag })}>
<Icon.Edit3 className="w-4 h-auto" />
{t("common.rename")}
</MenuItem>
<MenuItem color="danger" onClick={() => handleDeleteTag(tag)}>
<Icon.Trash className="w-4 h-auto" />
{t("common.delete")}
</MenuItem>
</Menu>
</Dropdown>
<div
className={clsx(
"inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]",
filterStore.state.tag === tag && "text-blue-600 dark:text-blue-400",
)}
onClick={() => handleTagClick(tag)}
>
<span className="truncate dark:opacity-80">{tag}</span>
{amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
</div>
</div>
))}
</div>
) : (
!props.readonly && (
<div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
<Icon.Tags />
<p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
</div>
)
)}
</div>
);
};

75
web/src/components/MemoFilter.tsx
View file

@ -1,75 +0,0 @@
import clsx from "clsx";
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import { useFilterStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import Icon from "./Icon";
interface Props {
className?: string;
}
const MemoFilter = (props: Props) => {
const t = useTranslate();
const location = useLocation();
const filterStore = useFilterStore();
const filter = filterStore.state;
const showFilter = Boolean(filter.tag || filter.text || filter.visibility);
useEffect(() => {
filterStore.clearFilter();
}, [location]);
if (!showFilter) {
return null;
}
return (
<div
className={clsx(
`w-full flex flex-row justify-start items-start flex-wrap gap-2 text-sm leading-7 dark:text-gray-400`,
props.className,
)}
>
<div className="shrink-0 flex flex-row justify-start items-center text-gray-400">
<Icon.Filter className="w-4 h-auto mr-1" />
<span>{t("common.filter")}:</span>
</div>
{filter.tag && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setTagFilter(undefined);
}}
>
<Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.tag}
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.visibility && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setMemoVisibilityFilter(undefined);
}}
>
<Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.visibility}
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
{filter.text && (
<div
className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
onClick={() => {
filterStore.setTextFilter(undefined);
}}
>
<Icon.Search className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.text}
<Icon.X className="w-4 h-auto ml-1 opacity-40" />
</div>
)}
</div>
);
};
export default MemoFilter;

2
web/src/pages/Archived.tsx
View file

@ -6,7 +6,6 @@ import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
import MemoContent from "@/components/MemoContent";
import MemoFilter from "@/components/MemoFilter";
import MobileHeader from "@/components/MobileHeader";
import SearchBar from "@/components/SearchBar";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@ -99,7 +98,6 @@ const Archived = () => {
<SearchBar />
</div>
</div>
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (
<div
key={memo.name}

2
web/src/pages/Explore.tsx
View file

@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
import Empty from "@/components/Empty";
import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
import Icon from "@/components/Icon";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@ -63,7 +62,6 @@ const Explore = () => {
<div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
<div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
<div className="flex flex-col justify-start items-start w-full max-w-full">
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact />
))}

2
web/src/pages/Home.tsx
View file

@ -6,7 +6,6 @@ import Empty from "@/components/Empty";
import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
import Icon from "@/components/Icon";
import MemoEditor from "@/components/MemoEditor";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@ -87,7 +86,6 @@ const Home = () => {
<div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
<div className="flex flex-col justify-start items-start w-full max-w-full">
<MemoFilter className="px-2 pb-2" />
{sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact />
))}

3
web/src/pages/Timeline.tsx
View file

@ -7,7 +7,6 @@ import ActivityCalendar from "@/components/ActivityCalendar";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import { TimelineSidebar, TimelineSidebarDrawer } from "@/components/TimelineSidebar";
@ -141,8 +140,6 @@ const Timeline = () => {
</div>
</div>
<div className="w-full h-auto flex flex-col justify-start items-start">
<MemoFilter className="p-2 my-2 rounded-lg dark:bg-zinc-900" />
<div className="flex flex-col justify-start items-start w-full mt-2">
<div className="w-full flex shrink-0 flex-row justify-between pl-1 mt-1 mb-3">
<div className="w-auto flex flex-col">

2
web/src/pages/UserProfile.tsx
View file

@ -5,7 +5,6 @@ import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader";
import UserAvatar from "@/components/UserAvatar";
@ -131,7 +130,6 @@ const UserProfile = () => {
</p>
</div>
</div>
<MemoFilter className="px-2 pb-3" />
{sortedMemos.map((memo) => (
<MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />
))}