Added setting menu with textsize and font selection

2022-03-06 16:50:17 +01:00 · 2022-03-06 16:50:17 +01:00 · 250adfc746
commit 250adfc746
parent 264d9f2494
9 changed files with 205 additions and 19 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,7 @@
      "dependencies": {
        "@fontsource/material-icons": "^4.5.2",
        "@fontsource/material-icons-rounded": "^4.5.2",
+        "@fontsource/opendyslexic": "^4.5.2",
        "@fontsource/vollkorn": "^4.5.4",
        "@fontsource/zen-maru-gothic": "^4.5.5",
        "markdown-to-jsx": "^7.1.6",
@ -199,6 +200,11 @@
      "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
      "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
    },
+    "node_modules/@fontsource/opendyslexic": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
+      "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
+    },
    "node_modules/@fontsource/vollkorn": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
@ -3800,6 +3806,11 @@
      "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz",
      "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w=="
    },
+    "@fontsource/opendyslexic": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz",
+      "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA=="
+    },
    "@fontsource/vollkorn": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
  "dependencies": {
    "@fontsource/material-icons": "^4.5.2",
    "@fontsource/material-icons-rounded": "^4.5.2",
+    "@fontsource/opendyslexic": "^4.5.2",
    "@fontsource/vollkorn": "^4.5.4",
    "@fontsource/zen-maru-gothic": "^4.5.5",
    "markdown-to-jsx": "^7.1.6",
--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -13,6 +13,7 @@ import ReactTooltip from "react-tooltip";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import { ImageQuality } from "./Img";
 import Popup from "./Popup";
+import { useEffect } from "react";

 type AppLayoutProps = {
  subPanel?: React.ReactNode;
@ -91,8 +92,22 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
    ? props.description
    : props.langui.default_description;

+  useEffect(() => {
+    document.getElementsByTagName("html")[0].style.fontSize = `${
+      (appLayout.fontSize || 1) * 100
+    }%`;
+  });
+
  return (
-    <div className={appLayout.darkMode ? "set-theme-dark" : "set-theme-light"}>
+    <div
+      className={`${
+        appLayout.darkMode ? "set-theme-dark" : "set-theme-light"
+      } ${
+        appLayout.dyslexic
+          ? "set-theme-font-dyslexic"
+          : "set-theme-font-standard"
+      }`}
+    >
      <div
        {...handlers}
        className="fixed inset-0 touch-pan-y p-0 m-0 bg-light text-black"
@ -247,6 +262,101 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
          </div>
        </Popup>

+        <Popup
+          state={appLayout.configPanelOpen}
+          setState={appLayout.setConfigPanelOpen}
+        >
+          <h2 className="text-2xl">Settings</h2>
+
+          <h3 className="text-xl mt-4">Theme</h3>
+          <div className="flex flex-row">
+            <Button
+              onClick={() => {
+                appLayout.setDarkMode(false);
+                appLayout.setSelectedThemeMode(true);
+              }}
+              active={
+                appLayout.selectedThemeMode === true &&
+                appLayout.darkMode === false
+              }
+              className="rounded-r-none"
+            >
+              Light
+            </Button>
+            <Button
+              onClick={() => {
+                appLayout.setSelectedThemeMode(false);
+              }}
+              active={appLayout.selectedThemeMode === false}
+              className="rounded-l-none rounded-r-none border-x-0"
+            >
+              Auto
+            </Button>
+            <Button
+              onClick={() => {
+                appLayout.setDarkMode(true);
+                appLayout.setSelectedThemeMode(true);
+              }}
+              active={
+                appLayout.selectedThemeMode === true &&
+                appLayout.darkMode === true
+              }
+              className="rounded-l-none"
+            >
+              Dark
+            </Button>
+          </div>
+
+          <h3 className="text-xl mt-4">Font size</h3>
+          <div className="flex flex-row">
+            <Button
+              className="rounded-r-none"
+              onClick={() =>
+                appLayout.setFontSize(
+                  appLayout.fontSize ? appLayout.fontSize / 1.05 : 1 / 1.05
+                )
+              }
+            >
+              <span className="material-icons">text_decrease</span>
+            </Button>
+            <Button
+              className="rounded-l-none rounded-r-none border-x-0"
+              onClick={() => appLayout.setFontSize(1)}
+            >
+              {((appLayout.fontSize || 1) * 100).toLocaleString(undefined, {
+                maximumFractionDigits: 0,
+              })}
+              %
+            </Button>
+            <Button
+              className="rounded-l-none"
+              onClick={() =>
+                appLayout.setFontSize(
+                  appLayout.fontSize ? appLayout.fontSize * 1.05 : 1 * 1.05
+                )
+              }
+            >
+              <span className="material-icons">text_increase</span>
+            </Button>
+          </div>
+
+          <h3 className="text-xl mt-4">Font</h3>
+          <Button
+            active={appLayout.dyslexic === false}
+            onClick={() => appLayout.setDyslexic(false)}
+            className="font-zenMaruGothic"
+          >
+            Zen Maru Gothic
+          </Button>
+          <Button
+            active={appLayout.dyslexic === true}
+            onClick={() => appLayout.setDyslexic(true)}
+            className="font-openDyslexic"
+          >
+            OpenDyslexic
+          </Button>
+        </Popup>
+
        <ReactTooltip
          id="MainPanelTooltip"
          place="right"
--- a/src/components/Panels/MainPanel.tsx
+++ b/src/components/Panels/MainPanel.tsx
@ -49,16 +49,19 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
            } flex-wrap gap-2`}
          >
            <Button
-              onClick={() => {
-                appLayout.setDarkMode(!appLayout.darkMode);
-                appLayout.setSelectedThemeMode(true);
-              }}
              className={
                appLayout.mainPanelReduced && isDesktop ? "" : "!py-0.5 !px-2.5"
              }
+              onClick={() => {
+                appLayout.setConfigPanelOpen(true);
+              }}
            >
-              <span className="material-icons !text-sm">
-                {appLayout.darkMode ? "dark_mode" : "light_mode"}
+              <span
+                className={`material-icons ${
+                  !(appLayout.mainPanelReduced && isDesktop) && "!text-sm"
+                } `}
+              >
+                settings
              </span>
            </Button>

--- a/src/contexts/AppLayoutContext.tsx
+++ b/src/contexts/AppLayoutContext.tsx
@ -5,13 +5,18 @@ import React, { ReactNode, useContext } from "react";
 export interface AppLayoutState {
  subPanelOpen: boolean | undefined;
  languagePanelOpen: boolean | undefined;
+  configPanelOpen: boolean | undefined;
  mainPanelReduced: boolean | undefined;
  mainPanelOpen: boolean | undefined;
  darkMode: boolean | undefined;
+  selectedThemeMode: boolean | undefined;
+  fontSize: number | undefined;
+  dyslexic: boolean | undefined;
  setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
  setLanguagePanelOpen: React.Dispatch<
    React.SetStateAction<boolean | undefined>
  >;
+  setConfigPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
  setMainPanelReduced: React.Dispatch<
    React.SetStateAction<boolean | undefined>
  >;
@ -20,20 +25,29 @@ export interface AppLayoutState {
  setSelectedThemeMode: React.Dispatch<
    React.SetStateAction<boolean | undefined>
  >;
+  setFontSize: React.Dispatch<React.SetStateAction<number | undefined>>;
+  setDyslexic: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 }

 const initialState: AppLayoutState = {
  subPanelOpen: false,
  languagePanelOpen: false,
+  configPanelOpen: false,
  mainPanelReduced: false,
  mainPanelOpen: false,
  darkMode: false,
+  selectedThemeMode: false,
+  fontSize: 1,
+  dyslexic: false,
  setSubPanelOpen: () => {},
  setLanguagePanelOpen: () => {},
  setMainPanelReduced: () => {},
  setMainPanelOpen: () => {},
  setDarkMode: () => {},
  setSelectedThemeMode: () => {},
+  setConfigPanelOpen: () => {},
+  setFontSize: () => {},
+  setDyslexic: () => {},
 };

 const AppContext = React.createContext<AppLayoutState>(initialState);
@ -57,6 +71,10 @@ export const AppContextProvider = (props: Props) => {
    boolean | undefined
  >("languagePanelOpen", initialState.languagePanelOpen);

+  const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage<
+    boolean | undefined
+  >("configPanelOpen", initialState.configPanelOpen);
+
  const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage<
    boolean | undefined
  >("mainPanelReduced", initialState.mainPanelReduced);
@ -65,9 +83,17 @@ export const AppContextProvider = (props: Props) => {
    boolean | undefined
  >("mainPanelOpen", initialState.mainPanelOpen);

-  const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode(
-    "darkMode",
-    initialState.darkMode
+  const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] =
+    useDarkMode("darkMode", initialState.darkMode);
+
+  const [fontSize, setFontSize] = useStateWithLocalStorage<number | undefined>(
+    "fontSize",
+    initialState.fontSize
+  );
+
+  const [dyslexic, setDyslexic] = useStateWithLocalStorage<boolean | undefined>(
+    "dyslexic",
+    initialState.dyslexic
  );

  return (
@ -75,15 +101,22 @@ export const AppContextProvider = (props: Props) => {
      value={{
        subPanelOpen,
        languagePanelOpen,
+        configPanelOpen,
        mainPanelReduced,
        mainPanelOpen,
        darkMode,
+        selectedThemeMode,
+        fontSize,
+        dyslexic,
        setSubPanelOpen,
        setLanguagePanelOpen,
+        setConfigPanelOpen,
        setMainPanelReduced,
        setMainPanelOpen,
        setDarkMode,
        setSelectedThemeMode,
+        setFontSize,
+        setDyslexic,
      }}
    >
      {props.children}
--- a/src/hooks/useDarkMode.ts
+++ b/src/hooks/useDarkMode.ts
@ -6,6 +6,7 @@ export default function useDarkMode(
  key: string,
  initialValue: boolean | undefined
 ): [
+  boolean | undefined,
  boolean | undefined,
  React.Dispatch<React.SetStateAction<boolean | undefined>>,
  React.Dispatch<React.SetStateAction<boolean | undefined>>
@ -23,5 +24,5 @@ export default function useDarkMode(
    if (selectedThemeMode === false) setDarkMode(prefersDarkMode);
  }, [selectedThemeMode, prefersDarkMode, setDarkMode]);

-  return [darkMode, setDarkMode, setSelectedThemeMode];
+  return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode];
 }
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -2,14 +2,15 @@ import type { AppProps } from "next/app";
 import "tailwind.css";
 import "@fontsource/zen-maru-gothic/500.css";
 import "@fontsource/vollkorn/700.css";
+import "@fontsource/opendyslexic/400.css"
 import "@fontsource/material-icons";

 import { AppContextProvider } from "contexts/AppLayoutContext";

-export default function AccordsLibraryApp(appProps: AppProps) {
+export default function AccordsLibraryApp(props: AppProps) {
  return (
    <AppContextProvider>
-      <appProps.Component {...appProps.pageProps} />
+      <props.Component {...props.pageProps} />
    </AppContextProvider>
  );
 }
--- a/src/tailwind.css
+++ b/src/tailwind.css
@ -78,9 +78,8 @@
  }

  .prose blockquote {
-    @apply border-l-dark
+    @apply border-l-dark;
  }
-
 }

@layer components {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" };
 const breakMobile = { max: "60rem" };
 const breakThin = { max: "25rem" };

+const fontStandard = {
+  body: "Zen Maru Gothic",
+  headers: "Vollkorn",
+  monospace: "monospace",
+};
+const fontDyslexic = {
+  body: "OpenDyslexic",
+  headers: "OpenDyslexic",
+  monospace: "monospace",
+};
+
 /* END CONFIG */

 function withOpacity(variableName) {
@ -41,9 +52,11 @@ module.exports = {
      black: withOpacity("--theme-color-black"),
    },
    fontFamily: {
-      body: ["Zen Maru Gothic"],
-      headers: ["Vollkorn"],
-      monospace: ["monospace"],
+      body: ["var(--theme-font-body)"],
+      headers: ["var(--theme-font-headers)"],
+      monospace: ["var(--theme-font-monospace)"],
+      openDyslexic: ["OpenDyslexic"],
+      zenMaruGothic: ["Zen Maru Gothic"],
    },
    screens: {
      desktop: breakDektop,
@ -61,7 +74,6 @@ module.exports = {
  plugins: [
    require("@tailwindcss/typography"),

-    // Colored Dropshadow
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".set-theme-light": {
@ -85,6 +97,21 @@ module.exports = {
      });
    }),

+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".set-theme-font-standard": {
+          "--theme-font-body": fontStandard.body,
+          "--theme-font-headers": fontStandard.headers,
+          "--theme-font-monospace": fontStandard.monospace,
+        },
+        ".set-theme-font-dyslexic": {
+          "--theme-font-body": fontDyslexic.body,
+          "--theme-font-headers": fontDyslexic.headers,
+          "--theme-font-monospace": fontStandard.monospace,
+        },
+      });
+    }),
+
    plugin(function ({ addVariant, e }) {
      addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {