Enable font size adjustment

hkbus · Nov 11, 2023 · 74b5ceb · 74b5ceb
1 parent 0dc47b1
commit 74b5ceb
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -37,7 +37,7 @@ const DataImport = loadable(() => import("./pages/DataImport"));
 const DataExport = loadable(() => import("./pages/DataExport"));
 
 const App = () => {
-  const { analytics, colorMode } = useContext(AppContext);
+  const { analytics, colorMode, fontSize } = useContext(AppContext);
   const {
     i18n: { language },
   } = useTranslation();
@@ -48,8 +48,8 @@ const App = () => {
   analytics && reportWebVitals(sendToGoogleAnalytics);
 
   const theme = useMemo(() => {
-    return createTheme(getThemeTokens(colorMode), [colorMode]);
-  }, [colorMode]);
+    return createTheme(getThemeTokens(colorMode, fontSize), [colorMode]);
+  }, [colorMode, fontSize]);
 
   return (
     <StyledEngineProvider injectFirst>
@@ -99,13 +99,13 @@ const emotionCache = createCache({
   ),
 });
 
-const getThemeTokens = (mode: PaletteMode) => ({
+const getThemeTokens = (mode: PaletteMode, fontSize: number) => ({
   typography: {
     fontFamily: "'Chiron Hei HK WS'",
     h6: {
-      fontSize: "1.2rem",
       fontWeight: 700,
     },
+    fontSize,
   },
   palette: {
     mode,

diff --git a/src/AppContext.tsx b/src/AppContext.tsx
@@ -80,6 +80,10 @@ export interface AppState {
    * Show recently searched
    */
   isRecentSearchShown: boolean;
+  /**
+   * Font size
+   */
+  fontSize: number;
 }
 
 interface AppContextValue
@@ -112,6 +116,7 @@ interface AppContextValue
   toggleAnnotateScheduled: () => void;
   toggleIsRecentSearchShown: () => void;
   changeLanguage: (lang: Language) => void;
+  setFontSize: (fontSize: number) => void;
   importAppState: (appState: AppState) => void;
   workbox?: Workbox;
 }
@@ -213,6 +218,7 @@ export const AppContextProvider = ({
         JSON.parse(localStorage.getItem("refreshInterval")) ?? 30000,
       annotateScheduled:
         JSON.parse(localStorage.getItem("annotateScheduled")) ?? false,
+      fontSize: JSON.parse(localStorage.getItem("fontSize")) ?? 14,
     };
   };
   const { i18n } = useTranslation();
@@ -499,6 +505,14 @@ export const AppContextProvider = ({
     [i18n]
   );
 
+  const setFontSize = useCallback((fontSize: number) => {
+    setStateRaw(
+      produce((state: State) => {
+        state.fontSize = fontSize;
+      })
+    );
+  }, []);
+
   const colorMode = useMemo(() => {
     if (state._colorMode === "light" || state._colorMode === "dark") {
       return state._colorMode;
@@ -595,6 +609,10 @@ export const AppContextProvider = ({
     localStorage.setItem("lang", i18n.language);
   }, [i18n.language]);
 
+  useEffect(() => {
+    localStorage.setItem("fontSize", JSON.stringify(state.fontSize));
+  }, [state.fontSize]);
+
   const contextValue = useMemo(() => {
     return {
       ...dbContext,
@@ -621,6 +639,7 @@ export const AppContextProvider = ({
       toggleAnnotateScheduled,
       toggleIsRecentSearchShown,
       changeLanguage,
+      setFontSize,
       importAppState,
       workbox,
     };
@@ -649,6 +668,7 @@ export const AppContextProvider = ({
     toggleAnnotateScheduled,
     toggleIsRecentSearchShown,
     changeLanguage,
+    setFontSize,
     importAppState,
     workbox,
   ]);

diff --git a/src/components/route-board/RouteTerminus.tsx b/src/components/route-board/RouteTerminus.tsx
@@ -35,7 +35,7 @@ const fromToWrapperSx: SxProps<Theme> = {
   whiteSpace: "nowrap",
   overflowX: "hidden",
   "& > span": {
-    fontSize: "0.95rem",
+    fontSize: "0.95em",
     mr: 0.5,
   },
 };

diff --git a/src/components/route-board/SwipeableRoutesBoard.tsx b/src/components/route-board/SwipeableRoutesBoard.tsx
@@ -82,6 +82,20 @@ const SwipeableRoutesBoard = ({
     isRecentSearchShown,
   ]);
 
+  const itemHeight = useMemo(() => {
+    const baseFontSize = parseInt(getComputedStyle(document.body).fontSize, 10);
+    if (baseFontSize <= 18) {
+      return 64;
+    } else if (baseFontSize <= 22) {
+      return 78;
+    } else if (baseFontSize <= 26) {
+      return 92;
+    } else if (baseFontSize <= 30) {
+      return 98;
+    }
+    return 110;
+  }, []);
+
   const ListRenderer = useCallback(
     ({ key, index }) => (
       <React.Fragment key={key}>
@@ -91,7 +105,7 @@ const SwipeableRoutesBoard = ({
               <FixedSizeList
                 height={height * 0.98}
                 itemCount={coItemDataList[index].routeList.length}
-                itemSize={64}
+                itemSize={itemHeight}
                 width={width}
                 itemData={coItemDataList[index]}
               >
@@ -120,7 +134,7 @@ const SwipeableRoutesBoard = ({
         )}
       </React.Fragment>
     ),
-    [coItemDataList, searchRoute, t]
+    [itemHeight, coItemDataList, searchRoute, t]
   );
 
   const availableBoardTab = useMemo(
@@ -187,7 +201,7 @@ const noResultSx: SxProps<Theme> = {
   alignItems: "center",
   justifyContent: "center",
   [`& .MuiSvgIcon-root`]: {
-    fontSize: "4rem",
+    fontSize: "4em",
     mr: 2,
   },
 };
diff --git a/src/components/settings/FontSizeSlider.tsx b/src/components/settings/FontSizeSlider.tsx
@@ -0,0 +1,40 @@
+import { ListItemText, Slider, Typography } from "@mui/material";
+import { useContext, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import AppContext from "../../AppContext";
+
+const FontSizeSlider = () => {
+  const { fontSize: _fontSize, setFontSize: setAppFontSize } =
+    useContext(AppContext);
+  const { t } = useTranslation();
+  const [fontSize, setFontSize] = useState<number>(_fontSize);
+  const value = useRef<number>(fontSize);
+
+  useEffect(() => {
+    return () => {
+      setAppFontSize(value.current);
+    };
+  }, [setAppFontSize]);
+
+  return (
+    <ListItemText
+      primary={<Typography sx={{ fontSize }}>{t("字體大小")}</Typography>}
+      secondary={
+        <Slider
+          step={2}
+          min={10}
+          max={26}
+          value={fontSize}
+          valueLabelDisplay="auto"
+          size="small"
+          onChange={(_, v: number) => {
+            setFontSize(v);
+            value.current = v;
+          }}
+        />
+      }
+    />
+  );
+};
+
+export default FontSizeSlider;
diff --git a/src/components/settings/OptionsList.tsx b/src/components/settings/OptionsList.tsx
@@ -9,6 +9,7 @@ import {
   SxProps,
   Theme,
   Slider,
+  ListItem,
 } from "@mui/material";
 import {
   SwipeUpOutlined as SwipeUpIcon,
@@ -30,11 +31,13 @@ import {
   PushPin as PinIcon,
   Update as UpdateIcon,
   UpdateDisabled as UpdateDisabledIcon,
+  FormatSize as FormatSizeIcon,
 } from "@mui/icons-material";
 import { ETA_FORMAT_STR } from "../../constants";
 import AppContext from "../../AppContext";
 import { vibrate } from "../../utils";
 import { useTranslation } from "react-i18next";
+import FontSizeSlider from "./FontSizeSlider";
 
 interface OptionsListProps {
   goToTab: (tab: string) => void;
@@ -150,6 +153,14 @@ const OptionsList = ({ goToTab }: OptionsListProps) => {
         </ListItemAvatar>
         <ListItemText primary={t("外觀")} secondary={t(`color-${colorMode}`)} />
       </ListItemButton>
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>
+            <FormatSizeIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <FontSizeSlider />
+      </ListItem>
       <ListItemButton
         onClick={() => {
           vibrate(vibrateDuration);

diff --git a/src/pages/DataImport.tsx b/src/pages/DataImport.tsx
@@ -116,6 +116,7 @@ const DataImport = () => {
       refreshInterval: obj.refreshInterval ?? 30,
       annotateScheduled: obj.annotateScheduled ?? true,
       isRecentSearchShown: obj.isRecentSearchShown ?? true,
+      fontSize: obj.fontSize ?? 16,
     });
 
     navigate("/");