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

Show page number with standard desktop progress bar

Browse Source
This commit is contained in:
schroda
2026-07-15 14:28:15 +02:00
parent d2304e6880
commit 79ac2c3d27
3 changed files with 16 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/features/reader/overlay/components/ReaderPageNumber.tsx
View File

@@ -31,11 +31,15 @@ const BaseReaderPageNumber = ({
Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const scrollbar = useReaderScrollbarStore((state) => state);
const { currentPageIndex, pages, totalPages } = useReaderPagesStore('currentPageIndex', 'pages', 'totalPages');
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
readingDirection: state.readingDirection.value,
shouldShowPageNumber: state.shouldShowPageNumber,
progressBarType: state.progressBarType,
}));
const { readingDirection, shouldShowPageNumber, progressBarType, progressBarSize } = useReaderSettingsStore(
(state) => ({
readingDirection: state.readingDirection.value,
shouldShowPageNumber: state.shouldShowPageNumber,
progressBarType: state.progressBarType,
progressBarSize: state.progressBarSize,
}),
);
const progressBarSizeInset = isDesktop && progressBarType === ProgressBarType.STANDARD ? progressBarSize : 0;
const safeAreaInset = useReaderSettingsStore((state) => state.safeAreaInset);
const isMaximized = useReaderProgressBarStore('isMaximized');
@@ -55,14 +59,6 @@ const BaseReaderPageNumber = ({
return null;
}
if (isDesktop && progressBarType === ProgressBarType.STANDARD) {
return null;
}
if (isMaximized && progressBarType === ProgressBarType.HIDDEN) {
return null;
}
return (
<Stack
sx={{
@@ -70,7 +66,7 @@ const BaseReaderPageNumber = ({
left: readerNavBarWidth,
right: 0,
bottom: (theme) =>
`calc(${theme.spacing(1)} + max(${scrollbar.xSize}px, ${safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : '0px'}))`,
`calc(${theme.spacing(1)} + ${progressBarSizeInset}px + max(${scrollbar.xSize}px, ${safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : '0px'}))`,
alignItems: 'center',
transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
}}

13
src/features/reader/settings/general/ReaderGeneralSettings.tsx
View File

@@ -12,7 +12,6 @@ import { ReaderSettingProgressBarType } from '@/features/reader/overlay/progress
import { ReaderSettingProgressBarSize } from '@/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarSize.tsx';
import { ReaderSettingProgressBarPosition } from '@/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx';
import type { IReaderSettings, ReaderSettingsTypeProps } from '@/features/reader/Reader.types.ts';
import { ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.types.ts';
import { ReaderSettingOverlayMode } from '@/features/reader/overlay/settings/ReaderSettingOverlayMode.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { ReaderSettingBackgroundColor } from '@/features/reader/settings/general/components/ReaderSettingBackgroundColor.tsx';
@@ -53,13 +52,11 @@ export const ReaderGeneralSettings = ({
progressBarPositionAutoVertical={settings.progressBarPositionAutoVertical}
updateSetting={updateSetting}
/>
{(settings.progressBarType === ProgressBarType.HIDDEN || overlayMode === ReaderOverlayMode.MOBILE) && (
<CheckboxInput
label={t`Show page number`}
checked={settings.shouldShowPageNumber}
onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
/>
)}
<CheckboxInput
label={t`Show page number`}
checked={settings.shouldShowPageNumber}
onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
/>
<ReaderSettingSafeAreaInset
safeAreaInset={settings.safeAreaInset}
updateSetting={(value) => updateSetting('safeAreaInset', value)}