Adjust missed styling for rtl direction

Suwayomi · Apr 26, 2024 · 741489a · 741489a
1 parent 1626771
commit 741489a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 12 deletions.
diff --git a/src/components/menu/NestedMenuItem.tsx b/src/components/menu/NestedMenuItem.tsx
@@ -29,12 +29,14 @@ import {
     Ref,
 } from 'react';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import Box from '@mui/material/Box';
 
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { isMobile } from 'react-device-detect';
 import { IconMenuItem } from '@/components/menu/IconMenuItem.tsx';
+import { getOptionForDirection } from '@/theme.ts';
 
 export type NestedMenuItemProps = Omit<MuiMenuItemProps, 'button'> & {
     parentMenuOpen: boolean;
@@ -57,7 +59,7 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
         parentMenuOpen,
         label,
         renderLabel,
-        RightIcon = ChevronRightIcon,
+        RightIcon = getOptionForDirection(ChevronRightIcon, ChevronLeftIcon),
         LeftIcon,
         children,
         className,
@@ -191,11 +193,11 @@ const NestedMenuItem = forwardRef<HTMLLIElement | null, NestedMenuItemProps>((pr
                 style={{ pointerEvents: 'none' }}
                 anchorEl={menuItemRef.current}
                 anchorOrigin={{
-                    horizontal: 'right',
+                    horizontal: getOptionForDirection('right', 'left'),
                     vertical: 'top',
                 }}
                 transformOrigin={{
-                    horizontal: 'left',
+                    horizontal: getOptionForDirection('left', 'right'),
                     vertical: 'top',
                 }}
                 open={open}

diff --git a/src/components/navbar/DefaultNavBar.tsx b/src/components/navbar/DefaultNavBar.tsx
@@ -26,11 +26,13 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useLocation } from 'react-router-dom';
 import { createPortal } from 'react-dom';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { NavbarItem } from '@/typings';
 import { NavBarContext } from '@/components/context/NavbarContext';
 import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
 import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
 import { useBackButton } from '@/util/useBackButton.ts';
+import { getOptionForDirection } from '@/theme.ts';
 
 const navbarItems: Array<NavbarItem> = [
     {
@@ -107,7 +109,7 @@ export function DefaultNavBar() {
                             size="large"
                             onClick={handleBack}
                         >
-                            <ArrowBack />
+                            {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                         </IconButton>
                     )}
                     <Typography

diff --git 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, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Collapse from '@mui/material/Collapse';
@@ -32,6 +32,7 @@ import { ReaderSettingsOptions } from '@/components/reader/ReaderSettingsOptions
 import { useBackButton } from '@/util/useBackButton.ts';
 import { useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 import { Select } from '@/components/atoms/Select.tsx';
+import { getOptionForDirection } from '@/theme.ts';
 
 const Root = styled('div')({
     zIndex: 10,
@@ -132,7 +133,6 @@ interface IProps {
 
 export function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
-    const theme = useTheme();
 
     const navigate = useNavigate();
     const location = useLocation<{
@@ -201,7 +201,14 @@ export function ReaderNavBar(props: IProps) {
 
     return (
         <Root>
-            <Slide direction="right" in={drawerOpen} timeout={200} appear={false} mountOnEnter unmountOnExit>
+            <Slide
+                direction={getOptionForDirection('right', 'left')}
+                in={drawerOpen}
+                timeout={200}
+                appear={false}
+                mountOnEnter
+                unmountOnExit
+            >
                 <NavContainer
                     sx={{
                         position: 'fixed',
@@ -218,7 +225,7 @@ export function ReaderNavBar(props: IProps) {
                                     onClick={() => updateDrawer(false)}
                                     size="large"
                                 >
-                                    <KeyboardArrowLeftIcon />
+                                    {getOptionForDirection(<KeyboardArrowLeftIcon />, <KeyboardArrowRightIcon />)}
                                 </IconButton>
                             </Tooltip>
                         )}
@@ -310,7 +317,7 @@ export function ReaderNavBar(props: IProps) {
                                     disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
                                     onClick={() => openNextChapter(ChapterOffset.PREV)}
                                 >
-                                    {theme.direction === 'ltr' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
+                                    {getOptionForDirection(<KeyboardArrowLeftIcon />, <KeyboardArrowRightIcon />)}
                                 </IconButton>
                             </Tooltip>
                             <FormControl
@@ -350,7 +357,7 @@ export function ReaderNavBar(props: IProps) {
                                     }
                                     onClick={() => openNextChapter(ChapterOffset.NEXT)}
                                 >
-                                    {theme.direction === 'ltr' ? <KeyboardArrowRightIcon /> : <KeyboardArrowLeftIcon />}
+                                    {getOptionForDirection(<KeyboardArrowRightIcon />, <KeyboardArrowLeftIcon />)}
                                 </IconButton>
                             </Tooltip>
                         </ChapterNavigation>
@@ -368,7 +375,7 @@ export function ReaderNavBar(props: IProps) {
                             onClick={() => updateDrawer(true)}
                             size="large"
                         >
-                            <KeyboardArrowRightIcon />
+                            {getOptionForDirection(<KeyboardArrowRightIcon />, <KeyboardArrowLeftIcon />)}
                         </OpenDrawerButton>
                     </Tooltip>
                 </Fade>

diff --git a/src/components/tracker/TrackerSearch.tsx b/src/components/tracker/TrackerSearch.tsx
@@ -13,6 +13,7 @@ import Stack from '@mui/material/Stack';
 import { useEffect, useMemo, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -23,6 +24,7 @@ import { SearchTextField } from '@/components/atoms/SearchTextField.tsx';
 import { makeToast } from '@/components/util/Toast.tsx';
 import { TrackerMangaCard } from '@/components/tracker/TrackerMangaCard.tsx';
 import { DIALOG_PADDING } from '@/components/tracker/constants.ts';
+import { getOptionForDirection } from '@/theme.ts';
 
 export const TrackerSearch = ({
     mangaId,
@@ -87,7 +89,7 @@ export const TrackerSearch = ({
             <DialogTitle sx={{ padding: DIALOG_PADDING }}>
                 <Stack direction="row" gap="10px" alignItems="center">
                     <IconButton onClick={closeSearchMode}>
-                        <ArrowBack />
+                        {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
                     </IconButton>
                     <SearchTextField
                         sx={{ width: '100%' }}

diff --git a/src/theme.ts b/src/theme.ts
@@ -67,3 +67,6 @@ export const createTheme = (dark?: boolean, direction: Direction = 'ltr') => {
 
     return suwayomiTheme;
 };
+
+export const getOptionForDirection = <T>(ltrOption: T, rtlOption: T): T =>
+    (theme?.direction ?? 'ltr') === 'ltr' ? ltrOption : rtlOption;