From 1626771e92cb22d8428f2181e52c756b9e1e74c0 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Thu, 25 Apr 2024 14:07:59 +0200 Subject: [PATCH] Apply rtl styling for rtl languages --- package.json | 4 ++ src/components/context/AppContext.tsx | 59 +++++++++++++++++++------- src/components/navbar/ReaderNavBar.tsx | 8 ++-- src/theme.ts | 5 ++- yarn.lock | 22 ++++++++++ 5 files changed, 77 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 50169c07..6228e8a7 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ }, "dependencies": { "@apollo/client": "3.9.11", + "@emotion/cache": "^11.11.0", "@emotion/react": "11.11.4", "@emotion/styled": "11.11.5", "@fontsource/roboto": "5.0.12", @@ -53,6 +54,8 @@ "react-i18next": "14.1.0", "react-router-dom": "6.22.3", "react-virtuoso": "4.7.8", + "stylis": "^4.3.2", + "stylis-plugin-rtl": "^2.1.1", "use-long-press": "3.2.0", "use-query-params": "2.2.1" }, @@ -66,6 +69,7 @@ "@types/react": "18.2.78", "@types/react-beautiful-dnd": "13.1.8", "@types/react-dom": "18.2.25", + "@types/stylis": "^4.2.5", "@types/yargs": "17.0.32", "@typescript-eslint/eslint-plugin": "7.6.0", "@typescript-eslint/parser": "7.6.0", diff --git a/src/components/context/AppContext.tsx b/src/components/context/AppContext.tsx index 9e596618..028ea669 100644 --- a/src/components/context/AppContext.tsx +++ b/src/components/context/AppContext.tsx @@ -6,11 +6,16 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'; -import React, { useMemo } from 'react'; +import { Direction, StyledEngineProvider, ThemeProvider } from '@mui/material/styles'; +import React, { useMemo, useRef } from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import { QueryParamProvider } from 'use-query-params'; import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; +import { useTranslation } from 'react-i18next'; +import { CacheProvider, EmotionCache } from '@emotion/react'; +import createCache from '@emotion/cache'; +import { prefixer } from 'stylis'; +import rtlPlugin from 'stylis-plugin-rtl'; import { createTheme } from '@/theme'; import { useLocalStorage } from '@/util/useStorage.tsx'; import { DarkTheme } from '@/components/context/DarkTheme'; @@ -22,7 +27,27 @@ interface Props { children: React.ReactNode; } +const directionToCache: Record = { + ltr: createCache({ + key: 'muiltr', + }), + rtl: createCache({ + key: 'muirtl', + stylisPlugins: [prefixer, rtlPlugin], + }), +}; + export const AppContext: React.FC = ({ children }) => { + const directionRef = useRef('ltr'); + const { i18n } = useTranslation(); + + const currentDirection = i18n.dir(); + + if (directionRef.current !== currentDirection) { + document.dir = currentDirection; + directionRef.current = currentDirection; + } + const [darkTheme, setDarkTheme] = useLocalStorage('darkTheme', true); const [activeDevice, setActiveDeviceContext] = useLocalStorage('activeDevice', DEFAULT_DEVICE); @@ -39,26 +64,28 @@ export const AppContext: React.FC = ({ children }) => { [activeDevice], ); - const theme = useMemo(() => createTheme(darkTheme), [darkTheme]); + const theme = useMemo(() => createTheme(darkTheme, currentDirection), [darkTheme, currentDirection]); setActiveDevice(activeDevice); return ( - - - - - - - {children} - - - - - - + + + + + + + + {children} + + + + + + + ); diff --git a/src/components/navbar/ReaderNavBar.tsx b/src/components/navbar/ReaderNavBar.tsx index bd49575d..20d41e19 100644 --- a/src/components/navbar/ReaderNavBar.tsx +++ b/src/components/navbar/ReaderNavBar.tsx @@ -22,7 +22,7 @@ import Divider from '@mui/material/Divider'; import FormControl from '@mui/material/FormControl'; import MenuItem from '@mui/material/MenuItem'; import Tooltip from '@mui/material/Tooltip'; -import { styled } from '@mui/material/styles'; +import { styled, useTheme } from '@mui/material/styles'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; import Collapse from '@mui/material/Collapse'; @@ -132,6 +132,8 @@ interface IProps { export function ReaderNavBar(props: IProps) { const { t } = useTranslation(); + const theme = useTheme(); + const navigate = useNavigate(); const location = useLocation<{ prevDrawerOpen?: boolean; @@ -308,7 +310,7 @@ export function ReaderNavBar(props: IProps) { disabled={disableChapterNavButtons || chapter.sourceOrder <= 1} onClick={() => openNextChapter(ChapterOffset.PREV)} > - + {theme.direction === 'ltr' ? : } openNextChapter(ChapterOffset.NEXT)} > - + {theme.direction === 'ltr' ? : } diff --git a/src/theme.ts b/src/theme.ts index 7cdf8ba9..a2a071cf 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -6,7 +6,7 @@ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { createTheme as createMuiTheme, Palette as MuiPalette, Theme } from '@mui/material/styles'; +import { createTheme as createMuiTheme, Direction, Palette as MuiPalette, Theme } from '@mui/material/styles'; declare module '@mui/material/styles/createPalette' { interface Palette { @@ -23,8 +23,9 @@ type DefaultMuiTheme = Omit & { palette: DefaultMuiPalette }; let theme: Theme; export const getCurrentTheme = () => theme; -export const createTheme = (dark?: boolean) => { +export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => { const baseTheme: DefaultMuiTheme = createMuiTheme({ + direction, palette: { mode: dark ? 'dark' : 'light', }, diff --git a/yarn.lock b/yarn.lock index fd55d70c..62ecb538 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2540,6 +2540,11 @@ resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e" integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ== +"@types/stylis@^4.2.5": + version "4.2.5" + resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df" + integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw== + "@types/ws@^8.0.0": version "8.5.10" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787" @@ -3516,6 +3521,11 @@ css-box-model@^1.2.0: dependencies: tiny-invariant "^1.0.6" +cssjanus@^2.0.1: + version "2.1.0" + resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-2.1.0.tgz#6f99070e0b7cc79f826ea48c63c03cb250713af1" + integrity sha512-kAijbny3GmdOi9k+QT6DGIXqFvL96aksNlGr4Rhk9qXDZYWUojU4bRc3IHWxdaLNOqgEZHuXoe5Wl2l7dxLW5g== + csstype@^3.0.2, csstype@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" @@ -6531,11 +6541,23 @@ style-to-object@1.0.6: dependencies: inline-style-parser "0.2.3" +stylis-plugin-rtl@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-2.1.1.tgz#16707809c878494835f77e5d4aadaae3db639b5e" + integrity sha512-q6xIkri6fBufIO/sV55md2CbgS5c6gg9EhSVATtHHCdOnbN/jcI0u3lYhNVeuI65c4lQPo67g8xmq5jrREvzlg== + dependencies: + cssjanus "^2.0.1" + stylis@4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== +stylis@^4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444" + integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"