diff --git a/web/src/components/MemoContent.tsx b/web/src/components/MemoContent.tsx index f45e5557..d03922ce 100644 --- a/web/src/components/MemoContent.tsx +++ b/web/src/components/MemoContent.tsx @@ -2,6 +2,8 @@ import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { marked } from "../labs/marked"; import Icon from "./Icon"; +import { SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE } from "../helpers/consts"; +import useLocalStorage from "../hooks/useLocalStorage"; import "../less/memo-content.less"; export interface DisplayConfig { @@ -31,6 +33,7 @@ const MAX_MEMO_CONTAINER_HEIGHT = 384; const MemoContent: React.FC = (props: Props) => { const { className, content, onMemoContentClick, onMemoContentDoubleClick } = props; const { t } = useTranslation(); + const [isFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE); const [state, setState] = useState({ expandButtonStatus: -1, }); @@ -45,7 +48,7 @@ const MemoContent: React.FC = (props: Props) => { return; } - if (displayConfig.enableExpand) { + if (displayConfig.enableExpand && isFoldingEnabled) { if (Number(memoContentContainerRef.current?.clientHeight) > MAX_MEMO_CONTAINER_HEIGHT) { setState({ ...state, diff --git a/web/src/components/Settings/PreferencesSection.tsx b/web/src/components/Settings/PreferencesSection.tsx index 3f0c0562..8c276657 100644 --- a/web/src/components/Settings/PreferencesSection.tsx +++ b/web/src/components/Settings/PreferencesSection.tsx @@ -1,7 +1,14 @@ import { useTranslation } from "react-i18next"; +import Switch from "@mui/joy/Switch"; import { globalService, userService } from "../../services"; import { useAppSelector } from "../../store"; -import { VISIBILITY_SELECTOR_ITEMS, MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS } from "../../helpers/consts"; +import { + VISIBILITY_SELECTOR_ITEMS, + MEMO_DISPLAY_TS_OPTION_SELECTOR_ITEMS, + SETTING_IS_FOLDING_ENABLED_KEY, + IS_FOLDING_ENABLED_DEFAULT_VALUE, +} from "../../helpers/consts"; +import useLocalStorage from "../../hooks/useLocalStorage"; import Selector from "../common/Selector"; import "../../less/settings/preferences-section.less"; @@ -37,6 +44,8 @@ const PreferencesSection = () => { }; }); + const [isFoldingEnabled, setIsFoldingEnabled] = useLocalStorage(SETTING_IS_FOLDING_ENABLED_KEY, IS_FOLDING_ENABLED_DEFAULT_VALUE); + const handleLocaleChanged = async (value: string) => { await userService.upsertUserSetting("locale", value); globalService.setLocale(value as Locale); @@ -50,6 +59,10 @@ const PreferencesSection = () => { await userService.upsertUserSetting("memoDisplayTsOption", value); }; + const handleIsFoldingEnabledChanged = (event: React.ChangeEvent) => { + setIsFoldingEnabled(event.target.checked); + }; + return (

{t("common.basic")}

@@ -67,6 +80,10 @@ const PreferencesSection = () => { handleValueChanged={handleDefaultMemoVisibilityChanged} /> +