From edcf9001a044261c5d0fbb7b0d5fe620890fa2ab Mon Sep 17 00:00:00 2001 From: Dimitris Zervas Date: Wed, 21 May 2025 11:23:48 +0300 Subject: [PATCH 1/2] Add the "compact mode" memo view setting - dictates weather the memos will get compacted by default or not --- web/src/components/MemoContent/index.tsx | 11 ++++++----- web/src/components/MemoDisplaySettingMenu.tsx | 16 +++++++++++++++- web/src/locales/en.json | 3 +++ web/src/pages/Home.tsx | 4 ++-- web/src/store/v2/view.ts | 4 ++++ 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx index 9a6c849b3301d..a136eff9278dd 100644 --- a/web/src/components/MemoContent/index.tsx +++ b/web/src/components/MemoContent/index.tsx @@ -35,23 +35,24 @@ const MemoContent: React.FC = (props: Props) => { const currentUser = useCurrentUser(); const memoStore = useMemoStore(); const memoContentContainerRef = useRef(null); + // const [showCompactMode, setShowCompactMode] = useState(props.compact ? "SNIPPET" : "ALL"); const [showCompactMode, setShowCompactMode] = useState(undefined); const memo = memoName ? memoStore.getMemoByName(memoName) : null; const allowEdit = !props.readonly && memo && (currentUser?.name === memo.creator || isSuperUser(currentUser)); // Initial compact mode. useEffect(() => { - if (!props.compact) { - return; - } + console.log("Updating compactness") if (!memoContentContainerRef.current) { return; } - if ((memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) { + if (props.compact && (memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) { setShowCompactMode("ALL"); + } else if (showCompactMode !== undefined) { + setShowCompactMode("SNIPPET"); } - }, []); + }, [props.compact]); const onMemoContentClick = async (e: React.MouseEvent) => { if (onClick) { diff --git a/web/src/components/MemoDisplaySettingMenu.tsx b/web/src/components/MemoDisplaySettingMenu.tsx index d1da8d5fe5b87..34b9f33e32710 100644 --- a/web/src/components/MemoDisplaySettingMenu.tsx +++ b/web/src/components/MemoDisplaySettingMenu.tsx @@ -12,7 +12,7 @@ interface Props { const MemoDisplaySettingMenu = observer(({ className }: Props) => { const t = useTranslate(); - const isApplying = viewStore.state.orderByTimeAsc !== false || viewStore.state.layout !== "LIST"; + const isApplying = viewStore.state.orderByTimeAsc !== false || viewStore.state.layout !== "LIST" || viewStore.state.compact !== true; return ( @@ -51,6 +51,20 @@ const MemoDisplaySettingMenu = observer(({ className }: Props) => { +
+ {t("memo.compact")} + +
diff --git a/web/src/locales/en.json b/web/src/locales/en.json index c457cecaf73da..75c9140dc3c41 100644 --- a/web/src/locales/en.json +++ b/web/src/locales/en.json @@ -143,6 +143,9 @@ "direction": "Direction", "direction-asc": "Ascending", "direction-desc": "Descending", + "compact": "Compact View", + "enable": "Enable", + "disable": "Disable", "display-time": "Display Time", "filters": "Filters", "links": "Links", diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 54d3e19e9cdde..ccd8395cde88d 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -46,11 +46,11 @@ const Home = observer(() => { conditions.push(`tag_search == [${tagSearch.join(", ")}]`); } return conditions.join(" && "); - }, [user, memoFilterStore.filters, viewStore.state.orderByTimeAsc]); + }, [user, memoFilterStore.filters, viewStore.state.compact, viewStore.state.orderByTimeAsc]); return ( } + renderer={(memo: Memo) => } listSort={(memos: Memo[]) => memos .filter((memo) => memo.state === State.NORMAL) diff --git a/web/src/store/v2/view.ts b/web/src/store/v2/view.ts index a8535ad1ea54b..8f9f2b4beafbf 100644 --- a/web/src/store/v2/view.ts +++ b/web/src/store/v2/view.ts @@ -5,6 +5,7 @@ const LOCAL_STORAGE_KEY = "memos-view-setting"; class LocalState { orderByTimeAsc: boolean = false; layout: "LIST" | "MASONRY" = "LIST"; + compact: boolean = true; constructor() { makeAutoObservable(this); @@ -36,6 +37,9 @@ const viewStore = (() => { if (Object.hasOwn(cache, "orderByTimeAsc")) { viewStore.state.setPartial({ orderByTimeAsc: Boolean(cache.orderByTimeAsc) }); } + if (Object.hasOwn(cache, "compact")) { + viewStore.state.setPartial({ compact: Boolean(cache.compact) }); + } if (Object.hasOwn(cache, "layout")) { if (["LIST", "MASONRY"].includes(cache.layout)) { viewStore.state.setPartial({ layout: cache.layout }); From f146295eafee0bb3874ff142c649a61605380564 Mon Sep 17 00:00:00 2001 From: Dimitris Zervas Date: Wed, 28 May 2025 18:58:16 +0300 Subject: [PATCH 2/2] Fix linting errors --- web/src/components/MemoContent/index.tsx | 2 -- web/src/pages/Home.tsx | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx index a136eff9278dd..1bc107b1017b7 100644 --- a/web/src/components/MemoContent/index.tsx +++ b/web/src/components/MemoContent/index.tsx @@ -35,14 +35,12 @@ const MemoContent: React.FC = (props: Props) => { const currentUser = useCurrentUser(); const memoStore = useMemoStore(); const memoContentContainerRef = useRef(null); - // const [showCompactMode, setShowCompactMode] = useState(props.compact ? "SNIPPET" : "ALL"); const [showCompactMode, setShowCompactMode] = useState(undefined); const memo = memoName ? memoStore.getMemoByName(memoName) : null; const allowEdit = !props.readonly && memo && (currentUser?.name === memo.creator || isSuperUser(currentUser)); // Initial compact mode. useEffect(() => { - console.log("Updating compactness") if (!memoContentContainerRef.current) { return; } diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index ccd8395cde88d..83e3b0b66a2b1 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -50,7 +50,9 @@ const Home = observer(() => { return ( } + renderer={(memo: Memo) => ( + + )} listSort={(memos: Memo[]) => memos .filter((memo) => memo.state === State.NORMAL)