ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix reader desktop nav bar page/chapter select rtl styling

Browse Source
This commit is contained in:
schroda
2026-07-10 23:42:49 +02:00
parent ba9c69b693
commit 54616caf7a
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
View File

@@ -26,6 +26,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import type { ReaderStateChapters } from '@/features/reader/Reader.types.ts'; import type { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx'; import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts'; import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
import { useTheme } from '@mui/material/styles';
const BaseReaderNavBarDesktopChapterNavigation = ({ const BaseReaderNavBarDesktopChapterNavigation = ({
currentChapterId, currentChapterId,
@@ -43,6 +44,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>; readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => { }) => {
const { t } = useLingui(); const { t } = useLingui();
const theme = useTheme();
const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' }); const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
@@ -60,7 +62,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
}} }}
disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)} disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
/> />
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}> <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
<InputLabel id="reader-nav-bar-desktop-chapter-select">{t`Chapter`}</InputLabel> <InputLabel id="reader-nav-bar-desktop-chapter-select">{t`Chapter`}</InputLabel>
<Select <Select
{...bindTrigger(popupState)} {...bindTrigger(popupState)}

4
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -19,9 +19,11 @@ import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx'; import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { useTheme } from '@mui/material/styles';
const BaseReaderNavBarDesktopPageNavigation = () => { const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useLingui(); const { t } = useLingui();
const theme = useTheme();
const getOptionForDirection = useGetOptionForDirection(); const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderPagesStore('currentPageIndex', 'pages'); const { currentPageIndex, pages } = useReaderPagesStore('currentPageIndex', 'pages');
const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value); const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
@@ -41,7 +43,7 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
)} )}
onClick={() => ReaderControls.openPage('previous', undefined, false)} onClick={() => ReaderControls.openPage('previous', undefined, false)}
/> />
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}> <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
<InputLabel id="reader-nav-bar-desktop-page-select">{t`Page`}</InputLabel> <InputLabel id="reader-nav-bar-desktop-page-select">{t`Page`}</InputLabel>
<Select <Select
labelId="reader-nav-bar-desktop-page-select" labelId="reader-nav-bar-desktop-page-select"