YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update memo filter styles

Browse Source
This commit is contained in:
Steven
2024-07-26 08:30:59 +08:00
parent cd38ec93ed
commit c6a09d9353
10 changed files with 59 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/components/HomeSidebar/TagsSection.tsx
View File

@ -6,8 +6,7 @@ import useDebounce from "react-use/lib/useDebounce";
import useLocalStorage from "react-use/lib/useLocalStorage";
import { memoServiceClient } from "@/grpcweb";
import useCurrentUser from "@/hooks/useCurrentUser";
import { useFilterStore } from "@/store/module";
import { useMemoList, useTagStore } from "@/store/v1";
import { useMemoFilterStore, useMemoList, useTagStore } from "@/store/v1";
import { useTranslate } from "@/utils/i18n";
import Icon from "../Icon";
import showRenameTagDialog from "../RenameTagDialog";
@ -22,7 +21,7 @@ const TagsSection = (props: Props) => {
const t = useTranslate();
const location = useLocation();
const user = useCurrentUser();
const filterStore = useFilterStore();
const memoFilterStore = useMemoFilterStore();
const tagStore = useTagStore();
const memoList = useMemoList();
const [treeMode, setTreeMode] = useLocalStorage<boolean>("tag-view-as-tree", false);
@ -37,10 +36,14 @@ const TagsSection = (props: Props) => {
};
const handleTagClick = (tag: string) => {
if (filterStore.getState().tag === tag) {
filterStore.setTagFilter(undefined);
const isActive = memoFilterStore.getFiltersByFactor("tag").some((filter) => filter.value === tag);
if (isActive) {
memoFilterStore.removeFilter((f) => f.factor === "tag" && f.value === tag);
} else {
filterStore.setTagFilter(tag);
memoFilterStore.addFilter({
factor: "tag",
value: tag,
});
}
};
@ -103,10 +106,7 @@ const TagsSection = (props: Props) => {
</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",
)}
className={clsx("inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]")}
onClick={() => handleTagClick(tag)}
>
<span className="truncate dark:opacity-80">{tag}</span>

45
web/src/components/MemoFilters.tsx
View File

@ -1,34 +1,42 @@
import { isEqual } from "lodash-es";
import { useMemoFilterStore } from "@/store/v1";
import { FilterFactor, getMemoFilterKey, MemoFilter, useMemoFilterStore } from "@/store/v1";
import Icon from "./Icon";
const MemoFilters = () => {
const memoFilterStore = useMemoFilterStore();
const filters = memoFilterStore.filters;
const getFilterDisplayText = (filter: MemoFilter) => {
if (filter.value) {
return filter.value;
}
if (filter.factor.startsWith("property.")) {
return filter.factor.replace("property.", "");
}
return filter.factor;
};
if (filters.length === 0) {
return undefined;
}
return (
<div className="w-full mb-2 flex flex-row justify-start items-start gap-2">
<span className="flex flex-row items-center gap-0.5 text-gray-500 text-sm leading-6">
<span className="flex flex-row items-center gap-0.5 text-gray-500 text-sm leading-6 border border-transparent">
<Icon.Filter className="w-4 h-auto opacity-60 inline" />
Filters
</span>
<div className="flex flex-row justify-start items-center flex-wrap gap-2 leading-6">
<div className="flex flex-row justify-start items-center flex-wrap gap-2 leading-6 h-6">
{filters.map((filter) => (
<div
key={filter.factor}
className="flex flex-row items-center gap-1 bg-gray-100 dark:bg-zinc-800 border dark:border-zinc-700 px-1 rounded-md"
key={getMemoFilterKey(filter)}
className="flex flex-row items-center gap-1 bg-white dark:bg-zinc-800 border dark:border-zinc-700 pl-1.5 pr-1 rounded-md hover:line-through cursor-pointer"
onClick={() => memoFilterStore.removeFilter((f) => isEqual(f, filter))}
>
<span className="text-gray-600 dark:text-gray-500 text-sm">{filter.factor}</span>
{filter.value && <span className="text-gray-500 dark:text-gray-400 text-sm max-w-12 truncate">{filter.value}</span>}
<button
onClick={() => memoFilterStore.removeFilter((f) => isEqual(f, filter))}
className="text-gray-500 dark:text-gray-300 opacity-60 hover:opacity-100"
>
<Icon.X className="w-3 h-auto" />
<FactorIcon className="w-4 h-auto text-gray-500 dark:text-gray-400 opacity-60" factor={filter.factor} />
<span className="text-gray-500 dark:text-gray-400 text-sm max-w-32 truncate">{getFilterDisplayText(filter)}</span>
<button className="text-gray-500 dark:text-gray-300 opacity-60 hover:opacity-100">
<Icon.X className="w-4 h-auto" />
</button>
</div>
))}
@ -37,4 +45,17 @@ const MemoFilters = () => {
);
};
const FactorIcon = ({ factor, className }: { factor: FilterFactor; className?: string }) => {
const iconMap = {
tag: <Icon.Tag className={className} />,
visibility: <Icon.Eye className={className} />,
contentSearch: <Icon.Search className={className} />,
displayTime: <Icon.Calendar className={className} />,
"property.hasLink": <Icon.Link className={className} />,
"property.hasTaskList": <Icon.CheckCircle className={className} />,
"property.hasCode": <Icon.Code className={className} />,
};
return iconMap[factor as keyof typeof iconMap] || <></>;
};
export default MemoFilters;

1
web/src/components/SearchBar.tsx
View File

@ -21,6 +21,7 @@ const SearchBar = () => {
factor: "contentSearch",
value: queryText,
});
setQueryText("");
}
}
};

12
web/src/components/UserStatisticsView.tsx
View File

@ -116,9 +116,7 @@ const UserStatisticsView = () => {
<Divider className="!my-2 opacity-50" />
<div className="w-full flex flex-row justify-start items-center gap-x-2 gap-y-1 flex-wrap">
<div
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
)}
className={clsx("w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center")}
onClick={() => memoFilterStore.addFilter({ factor: "property.hasLink", value: "" })}
>
<div className="w-auto flex justify-start items-center mr-1">
@ -128,9 +126,7 @@ const UserStatisticsView = () => {
<span className="text-sm truncate">{memoStats.link}</span>
</div>
<div
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
)}
className={clsx("w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center")}
onClick={() => memoFilterStore.addFilter({ factor: "property.hasTaskList", value: "" })}
>
<div className="w-auto flex justify-start items-center mr-1">
@ -154,9 +150,7 @@ const UserStatisticsView = () => {
)}
</div>
<div
className={clsx(
"w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center cursor-pointer hover:shadow",
)}
className={clsx("w-auto border dark:border-zinc-800 pl-1 pr-1.5 rounded-md flex justify-between items-center")}
onClick={() => memoFilterStore.addFilter({ factor: "property.hasCode", value: "" })}
>
<div className="w-auto flex justify-start items-center mr-1">

4
web/src/store/index.ts
View File

@ -1,13 +1,9 @@
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import dialogReducer from "./reducer/dialog";
import filterReducer from "./reducer/filter";
import resourceReducer from "./reducer/resource";
const store = configureStore({
reducer: {
filter: filterReducer,
resource: resourceReducer,
dialog: dialogReducer,
},
});

52
web/src/store/module/filter.ts
View File

@ -1,52 +0,0 @@
import { Visibility } from "@/types/proto/api/v1/memo_service";
import store, { useAppSelector } from "..";
import { MemoPropertyFilter, setFilter, setMemoPropertyFilter } from "../reducer/filter";
export const useFilterStore = () => {
const state = useAppSelector((state) => state.filter);
return {
state,
getState: () => {
return store.getState().filter;
},
clearFilter: () => {
store.dispatch(
setFilter({
tag: undefined,
text: undefined,
visibility: undefined,
memoPropertyFilter: undefined,
}),
);
},
setTextFilter: (text?: string) => {
store.dispatch(
setFilter({
text: text,
}),
);
},
setTagFilter: (tag?: string) => {
store.dispatch(
setFilter({
tag: tag,
}),
);
},
setMemoVisibilityFilter: (visibility?: Visibility) => {
store.dispatch(
setFilter({
visibility: visibility,
}),
);
},
setMemoPropertyFilter: (memoPropertyFilter: Partial<MemoPropertyFilter>) => {
store.dispatch(
setMemoPropertyFilter({
...memoPropertyFilter,
}),
);
},
};
};

1
web/src/store/module/index.ts
View File

@ -1,2 +1 @@
export * from "./filter";
export * from "./dialog";

65
web/src/store/reducer/filter.ts
View File

@ -1,65 +0,0 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { Visibility } from "@/types/proto/api/v1/memo_service";
interface State {
tag?: string;
text?: string;
visibility?: Visibility;
memoPropertyFilter?: MemoPropertyFilter;
}
export interface MemoPropertyFilter {
hasLink?: boolean;
hasTaskList?: boolean;
hasCode?: boolean;
}
export type Filter = State;
const getInitialState = (): State => {
const state: State = {};
const urlParams = new URLSearchParams(location.search);
const tag = urlParams.get("tag");
const text = urlParams.get("text");
if (tag) {
state.tag = tag;
}
if (text) {
state.text = text;
}
return state;
};
const filterSlice = createSlice({
name: "filter",
initialState: getInitialState(),
reducers: {
setFilter: (state, action: PayloadAction<Partial<State>>) => {
if (JSON.stringify(action.payload) === state) {
return state;
}
return {
...state,
...action.payload,
};
},
setMemoPropertyFilter: (state, action: PayloadAction<Partial<MemoPropertyFilter>>) => {
if (JSON.stringify(action.payload) === state.memoPropertyFilter) {
return state;
}
return {
...state,
memoPropertyFilter: {
...state.memoPropertyFilter,
...action.payload,
},
};
},
},
});
export const { setFilter, setMemoPropertyFilter } = filterSlice.actions;
export default filterSlice.reducer;

47
web/src/store/reducer/resource.ts
View File

@ -1,47 +0,0 @@
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { uniqBy } from "lodash-es";
import { Resource } from "@/types/proto/api/v1/resource_service";
interface State {
resources: Resource[];
}
const resourceSlice = createSlice({
name: "resource",
initialState: {
resources: [],
} as State,
reducers: {
setResources: (state, action: PayloadAction<Resource[]>) => {
return {
...state,
resources: action.payload,
};
},
upsertResources: (state, action: PayloadAction<Resource[]>) => {
return {
...state,
resources: uniqBy([...action.payload, ...state.resources], "name"),
};
},
patchResource: (state, action: PayloadAction<Partial<Resource>>) => {
return {
...state,
resources: state.resources.map((resource) => {
if (resource.name === action.payload.name) {
return {
...resource,
...action.payload,
};
} else {
return resource;
}
}),
};
},
},
});
export const { setResources, upsertResources, patchResource } = resourceSlice.actions;
export default resourceSlice.reducer;

31
web/src/store/v1/memoFilter.ts
View File

@ -1,8 +1,8 @@
import { uniq } from "lodash-es";
import { uniqBy } from "lodash-es";
import { create } from "zustand";
import { combine, persist } from "zustand/middleware";
import { combine } from "zustand/middleware";
type FilterFactor =
export type FilterFactor =
| "tag"
| "visibility"
| "contentSearch"
@ -16,25 +16,18 @@ export interface MemoFilter {
value: string;
}
export const getMemoFilterKey = (filter: MemoFilter) => `${filter.factor}:${filter.value}`;
interface State {
filters: MemoFilter[];
}
const getDefaultState = (): State => ({
filters: [],
});
export const useMemoFilterStore = create(
persist(
combine(getDefaultState(), (set, get) => ({
setState: (state: State) => set(state),
getState: () => get(),
getFiltersByFactor: (factor: FilterFactor) => get().filters.filter((f) => f.factor === factor),
addFilter: (filter: MemoFilter) => set((state) => ({ filters: uniq([...state.filters, filter]) })),
removeFilter: (filterFn: (f: MemoFilter) => boolean) => set((state) => ({ filters: state.filters.filter((f) => !filterFn(f)) })),
})),
{
name: "memo-filter",
},
),
combine(((): State => ({ filters: [] }))(), (set, get) => ({
setState: (state: State) => set(state),
getState: () => get(),
getFiltersByFactor: (factor: FilterFactor) => get().filters.filter((f) => f.factor === factor),
addFilter: (filter: MemoFilter) => set((state) => ({ filters: uniqBy([...state.filters, filter], getMemoFilterKey) })),
removeFilter: (filterFn: (f: MemoFilter) => boolean) => set((state) => ({ filters: state.filters.filter((f) => !filterFn(f)) })),
})),
);