From d1e8b97642b8e169a18e70765c5e46c9c71ea9f7 Mon Sep 17 00:00:00 2001 From: Daniel Ferro Date: Wed, 6 Dec 2023 17:48:53 -0300 Subject: [PATCH 1/2] adding SRM function --- src/components/ChallengeView.tsx | 2 +- src/components/book/BookView.tsx | 13 ++++++++--- src/components/header/Header.tsx | 7 ++++-- src/components/header/SimpleReadSwitch.tsx | 27 ++++++++++++++++++++++ src/localStorage.ts | 3 +++ src/theme/ThemeContext.tsx | 15 ++++++++---- src/theme/theme.tsx | 12 +++++----- 7 files changed, 63 insertions(+), 16 deletions(-) create mode 100644 src/components/header/SimpleReadSwitch.tsx diff --git a/src/components/ChallengeView.tsx b/src/components/ChallengeView.tsx index 23f8f1df..78b797dc 100644 --- a/src/components/ChallengeView.tsx +++ b/src/components/ChallengeView.tsx @@ -75,7 +75,7 @@ const ChallengeView = (props: ChallengeViewProps) => { const solutionParam: string = solution ? `?codigo=${solution}` : "" return <> -
+
} diff --git a/src/components/book/BookView.tsx b/src/components/book/BookView.tsx index a93bc63c..15d53dfb 100644 --- a/src/components/book/BookView.tsx +++ b/src/components/book/BookView.tsx @@ -11,6 +11,7 @@ import { Chapter } from "../../staticData/chapters"; import { Group } from "../../staticData/groups"; import { PBCard } from "../PBCard"; import { useThemeContext } from "../../theme/ThemeContext"; +import { useEffect } from "react"; const Breadcrumb = (book: Book) => { const {t} = useTranslation("books") @@ -31,10 +32,16 @@ export const BookView = () => { const {id} = useParams() const book: Book = getBook(Number(id)) const {t} = useTranslation("books") - const {theme} = useThemeContext() - + const {theme, setSimpleReadModeEnabled} = useThemeContext() + + useEffect(() => { + if ( book.simpleReadMode ) + setSimpleReadModeEnabled(true) + }, [book, setSimpleReadModeEnabled ]) + + return <> -
+
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index af38748d..c4347187 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -4,11 +4,13 @@ import styles from './header.module.css'; import { SessionButton } from "./login/SessionButton"; import { Link } from "react-router-dom"; import { DarkModeSwitch } from "./DarkModeSwitch"; +import { SimpleReadSwitch } from "./SimpleReadSwitch"; import { useThemeContext } from "../../theme/ThemeContext"; type HeaderProps = { CenterComponent?: React.ReactNode, - SubHeader?: React.ReactNode + SubHeader?: React.ReactNode, + ShouldShowSimpleReadSwitch?: boolean } type HeaderTextProps = { @@ -23,7 +25,7 @@ export const HeaderText = (props: HeaderTextProps) => { } -export const Header = ({CenterComponent= <>, SubHeader=<>}: HeaderProps) => { +export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => { const { theme } = useThemeContext() return @@ -32,6 +34,7 @@ export const Header = ({CenterComponent= <>, SubHeader=<>}: HeaderProps) = {CenterComponent}
+ {ShouldShowSimpleReadSwitch && }
diff --git a/src/components/header/SimpleReadSwitch.tsx b/src/components/header/SimpleReadSwitch.tsx new file mode 100644 index 00000000..8dd5fcff --- /dev/null +++ b/src/components/header/SimpleReadSwitch.tsx @@ -0,0 +1,27 @@ +import { Icon } from "@mui/material"; +import { PBSwitch } from "../PBSwitch"; +import { useThemeContext } from "../../theme/ThemeContext"; + +export const SimpleReadSwitch = () => { + const { simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext() + + const iconSx = { + backgroundColor: 'white', + borderRadius: 10, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: 'gray' + } + + const handleToggle = () => { + setSimpleReadModeEnabled(!simpleReadModeEnabled) + } + + return a} + checkedIcon={A} + onChange={handleToggle} + /> +} diff --git a/src/localStorage.ts b/src/localStorage.ts index a95beed3..627ca071 100644 --- a/src/localStorage.ts +++ b/src/localStorage.ts @@ -10,6 +10,7 @@ export namespace LocalStorage { const PB_USER = 'PB_USER' const PB_CREATOR_CHALLENGE = 'PB_CREATOR_CHALLENGE' const PB_USE_NIGHT_THEME = 'PB_USE_NIGHT_THEME' + const PB_USE_SIMPLE_READ = 'PB_USE_SIMPLE_READ' const remove = (key: string) => { localStorage.removeItem(key) } @@ -18,12 +19,14 @@ export namespace LocalStorage { export const getUser = (): User | null => _get(PB_USER) export const getCreatorChallenge = (): SerializedChallenge | null => _get(PB_CREATOR_CHALLENGE) export const getIsDarkMode = (): boolean => _get(PB_USE_NIGHT_THEME) || false + export const getIsSimpleReadMode = (): boolean => _get(PB_USE_SIMPLE_READ) || false export const saveSelectedLocale = (selectedLocale: LanguageCode) => _save(PB_SELECTED_LOCALE, selectedLocale) export const saveImportedChallenge = (importedChallenge: EmberExecutableChallenge) => _save(PB_IMPORTED_CHALLENGE, importedChallenge) export const saveUser = (user: User | null) => _save(PB_USER, user) export const saveCreatorChallenge = (challenge: SerializedChallenge | null) => _save(PB_CREATOR_CHALLENGE, challenge) export const saveDarkMode = (darkMode: boolean) => _save(PB_USE_NIGHT_THEME, darkMode) + export const saveSimpleReadMode = (simpleReadMode: boolean) => _save(PB_USE_SIMPLE_READ, simpleReadMode) const _get = (key: string) => _doSafe(key, (storage: Storage) => { const value = storage.getItem(key) diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index 12a4a083..add3bcdc 100644 --- a/src/theme/ThemeContext.tsx +++ b/src/theme/ThemeContext.tsx @@ -3,37 +3,44 @@ import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo, u import { getDesignTokens } from "./theme"; import { LocalStorage } from "../localStorage"; import { Ember } from "../emberCommunication"; +import { deepmerge } from '@mui/utils'; export type ThemeMode = 'light' | 'dark' type ThemeContextType = { darkModeEnabled: boolean; setDarkModeEnabled: (mode: boolean) => void; + simpleReadModeEnabled: boolean; + setSimpleReadModeEnabled: (mode: boolean) => void; theme: Theme }; export const ThemeContext = createContext({ darkModeEnabled: false, setDarkModeEnabled: () => { }, + simpleReadModeEnabled: false, + setSimpleReadModeEnabled: () => { }, theme: createTheme({}) }); export const ThemeContextProvider: FC = ({ children }) => { const [darkModeEnabled, setDarkModeEnabled] = useState(LocalStorage.getIsDarkMode()); + const [simpleReadModeEnabled, setSimpleReadModeEnabled] = useState(LocalStorage.getIsSimpleReadMode()); const theme = useMemo( - () => createTheme(getDesignTokens(darkModeEnabled)), - [darkModeEnabled] + () => createTheme( deepmerge(getDesignTokens(darkModeEnabled), {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}})), + [darkModeEnabled, simpleReadModeEnabled] ); useEffect(() =>{ LocalStorage.saveDarkMode(darkModeEnabled) + LocalStorage.saveSimpleReadMode(simpleReadModeEnabled) Ember.refreshIframe() - }, [darkModeEnabled]) + }, [darkModeEnabled, simpleReadModeEnabled]) return ( - + {children} ); diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index e361d3c3..02fb0b58 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -2,13 +2,13 @@ import { ThemeOptions } from "@mui/material"; import { deepmerge } from '@mui/utils'; const commonTheme: ThemeOptions = { - shape: { - borderRadius: 10 - }, - typography: { - fontFamily: 'Nunito', + shape: { + borderRadius: 10 + }, + typography: { + fontFamily: 'Nunito' + } } -} const lightTheme: ThemeOptions = { typography: { From 2b396c8210907b28414be84137d0ddba3471bade Mon Sep 17 00:00:00 2001 From: Daniel Ferro Date: Thu, 7 Dec 2023 16:41:23 -0300 Subject: [PATCH 2/2] styling styles --- locales/en-us/others.json | 6 ++++- locales/es-ar/others.json | 6 ++++- locales/pt-br/others.json | 6 ++++- src/components/ChallengeView.tsx | 2 +- src/components/PBSwitch.tsx | 14 +++++++++- src/components/book/BookView.tsx | 2 +- src/components/header/DarkModeSwitch.tsx | 29 ++++++++++----------- src/components/header/Header.tsx | 6 ++--- src/components/header/SimpleReadSwitch.tsx | 30 +++++++++------------- src/staticData/books.ts | 4 +-- src/theme/ThemeContext.tsx | 6 ++--- src/theme/theme.tsx | 3 ++- 12 files changed, 64 insertions(+), 50 deletions(-) diff --git a/locales/en-us/others.json b/locales/en-us/others.json index e01b405f..a22bd83b 100644 --- a/locales/en-us/others.json +++ b/locales/en-us/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Previous challenge", - "nextChallenge": "Next challenge" + "nextChallenge": "Next challenge", + "lightThemeMode": "Light theme mode on", + "darkThemeMode": "Dark theme mode on", + "simpleReadModeOn": "Simple read mode on", + "simpleReadModeOff": "Simple read mode off" } \ No newline at end of file diff --git a/locales/es-ar/others.json b/locales/es-ar/others.json index a79917fe..47c33d85 100644 --- a/locales/es-ar/others.json +++ b/locales/es-ar/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Desafío anterior", - "nextChallenge": "Desafío siguiente" + "nextChallenge": "Desafío siguiente", + "lightThemeMode": "Activar modo claro", + "darkThemeMode": "Activar modo oscuro", + "simpleReadModeOn": "Activar modo de lectura simple", + "simpleReadModeOff": "Desactivar modo de lectura simple" } \ No newline at end of file diff --git a/locales/pt-br/others.json b/locales/pt-br/others.json index ed1a026a..dc0f8c18 100644 --- a/locales/pt-br/others.json +++ b/locales/pt-br/others.json @@ -1,4 +1,8 @@ { "previousChallenge": "Desafio anterior", - "nextChallenge": "Próximo desafio" + "nextChallenge": "Próximo desafio", + "lightThemeMode": "Ativar tema claro", + "darkThemeMode": "Ativar tema escuro", + "simpleReadModeOn": "Ativar o modo de leitura simple", + "simpleReadModeOff": "Desativar o modo de leitura simples" } \ No newline at end of file diff --git a/src/components/ChallengeView.tsx b/src/components/ChallengeView.tsx index 78b797dc..c699c3a2 100644 --- a/src/components/ChallengeView.tsx +++ b/src/components/ChallengeView.tsx @@ -75,7 +75,7 @@ const ChallengeView = (props: ChallengeViewProps) => { const solutionParam: string = solution ? `?codigo=${solution}` : "" return <> -
+
} diff --git a/src/components/PBSwitch.tsx b/src/components/PBSwitch.tsx index feb39ffc..0b0810e9 100644 --- a/src/components/PBSwitch.tsx +++ b/src/components/PBSwitch.tsx @@ -1,4 +1,16 @@ -import { Switch, styled } from "@mui/material"; +import { Switch, Theme, styled } from "@mui/material"; + +export const pbIconStyle = ( theme: Theme ) => { + return { + backgroundColor: theme.palette.background.default, + borderRadius: 10, + padding: '3px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: theme.palette.primary.main + } +} export const PBSwitch = styled(Switch)(() => ({ alignSelf: 'center', diff --git a/src/components/book/BookView.tsx b/src/components/book/BookView.tsx index 15d53dfb..baf140b6 100644 --- a/src/components/book/BookView.tsx +++ b/src/components/book/BookView.tsx @@ -41,7 +41,7 @@ export const BookView = () => { return <> -
+
diff --git a/src/components/header/DarkModeSwitch.tsx b/src/components/header/DarkModeSwitch.tsx index 7db9fb98..e88ad506 100644 --- a/src/components/header/DarkModeSwitch.tsx +++ b/src/components/header/DarkModeSwitch.tsx @@ -1,25 +1,22 @@ +import { Tooltip } from "@mui/material"; import { DarkMode, LightMode } from "@mui/icons-material"; -import { PBSwitch } from "../PBSwitch"; +import { PBSwitch, pbIconStyle } from "../PBSwitch"; +import { useTranslation } from "react-i18next" import { useThemeContext } from "../../theme/ThemeContext"; export const DarkModeSwitch = () => { - const { darkModeEnabled, setDarkModeEnabled} = useThemeContext() - - const iconSx = { - backgroundColor: 'white', - borderRadius: 10, - padding: '3px', - color: 'gray' - } + const { theme, darkModeEnabled, setDarkModeEnabled} = useThemeContext() + const { t } = useTranslation("others") const handleToggle = () => { setDarkModeEnabled(!darkModeEnabled) } - - return } - checkedIcon={} - onChange={handleToggle} - /> + + return + } + checkedIcon={} + onChange={handleToggle}/> + } diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index c4347187..e5fa6921 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -10,7 +10,7 @@ import { useThemeContext } from "../../theme/ThemeContext"; type HeaderProps = { CenterComponent?: React.ReactNode, SubHeader?: React.ReactNode, - ShouldShowSimpleReadSwitch?: boolean + shouldShowSimpleReadSwitch?: boolean } type HeaderTextProps = { @@ -25,7 +25,7 @@ export const HeaderText = (props: HeaderTextProps) => { } -export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpleReadSwitch=true}: HeaderProps) => { +export const Header = ({CenterComponent= <>, SubHeader=<>, shouldShowSimpleReadSwitch=true}: HeaderProps) => { const { theme } = useThemeContext() return @@ -34,7 +34,7 @@ export const Header = ({CenterComponent= <>, SubHeader=<>, ShouldShowSimpl {CenterComponent}
- {ShouldShowSimpleReadSwitch && } + {shouldShowSimpleReadSwitch && }
diff --git a/src/components/header/SimpleReadSwitch.tsx b/src/components/header/SimpleReadSwitch.tsx index 8dd5fcff..2703dbb7 100644 --- a/src/components/header/SimpleReadSwitch.tsx +++ b/src/components/header/SimpleReadSwitch.tsx @@ -1,27 +1,21 @@ -import { Icon } from "@mui/material"; -import { PBSwitch } from "../PBSwitch"; +import { Icon, Tooltip } from "@mui/material"; +import { PBSwitch, pbIconStyle } from "../PBSwitch"; +import { useTranslation } from "react-i18next" import { useThemeContext } from "../../theme/ThemeContext"; export const SimpleReadSwitch = () => { - const { simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext() - - const iconSx = { - backgroundColor: 'white', - borderRadius: 10, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - color: 'gray' - } + const { theme, simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext() + const { t } = useTranslation("others") const handleToggle = () => { setSimpleReadModeEnabled(!simpleReadModeEnabled) } - return a} - checkedIcon={A} - onChange={handleToggle} - /> + return + a} + checkedIcon={A} + onChange={handleToggle}/> + } diff --git a/src/staticData/books.ts b/src/staticData/books.ts index 22ac57f2..5594bd95 100644 --- a/src/staticData/books.ts +++ b/src/staticData/books.ts @@ -55,11 +55,11 @@ const rawBooksData: RawBookData[] = [ { id: 3, chapterIds: ['Parametrización de soluciones'], - simpleReadMode: true + simpleReadMode: false }, { id: 1000, chapterIds: ['1','2','3','4','5'], - simpleReadMode: true + simpleReadMode: false }, ]; diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index add3bcdc..810903e8 100644 --- a/src/theme/ThemeContext.tsx +++ b/src/theme/ThemeContext.tsx @@ -3,7 +3,6 @@ import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo, u import { getDesignTokens } from "./theme"; import { LocalStorage } from "../localStorage"; import { Ember } from "../emberCommunication"; -import { deepmerge } from '@mui/utils'; export type ThemeMode = 'light' | 'dark' @@ -28,8 +27,8 @@ export const ThemeContextProvider: FC = ({ children }) => { const [darkModeEnabled, setDarkModeEnabled] = useState(LocalStorage.getIsDarkMode()); const [simpleReadModeEnabled, setSimpleReadModeEnabled] = useState(LocalStorage.getIsSimpleReadMode()); - const theme = useMemo( - () => createTheme( deepmerge(getDesignTokens(darkModeEnabled), {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}})), + const theme = useMemo( + () => createTheme( getDesignTokens(darkModeEnabled, simpleReadModeEnabled)), [darkModeEnabled, simpleReadModeEnabled] ); @@ -46,7 +45,6 @@ export const ThemeContextProvider: FC = ({ children }) => { ); }; - export const useThemeContext = () => { return useContext(ThemeContext); }; diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index 02fb0b58..8c8fbbb1 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -77,4 +77,5 @@ const darkTheme: ThemeOptions = { } -export const getDesignTokens = (darkModeEnabled: boolean): ThemeOptions => deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme) +export const getDesignTokens = (darkModeEnabled: boolean, simpleReadModeEnabled: boolean): ThemeOptions => + deepmerge( {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}}, deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme)) \ No newline at end of file