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

Fix reader mobile progress bar page "point" styling

Browse Source 
The points representing a page were only visible on read pages (page < current page) and for all next pages it was basically invisible
This commit is contained in:
schroda
2024-12-23 02:19:50 +01:00
parent 64b0dc2646
commit b51d8e5f66
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/modules/reader/components/overlay/progress-bar/variants/MobileReaderProgressBar.tsx
View File

@@ -18,7 +18,7 @@ import { ReaderProgressBarSlot } from '@/modules/reader/components/overlay/progr
import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx'; import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx'; import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
import { ReaderService } from '@/modules/reader/services/ReaderService.ts'; import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx'; import { getNextIndexFromPage, getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts'; import { getOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts'; import { ProgressBarPosition, ReaderResumeMode, ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx'; import { ReaderProgressBarDirectionWrapper } from '@/modules/reader/components/overlay/progress-bar/ReaderProgressBarDirectionWrapper.tsx';
@@ -27,6 +27,7 @@ import { useReaderOverlayContext } from '@/modules/reader/contexts/ReaderOverlay
import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx'; import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts'; import { TReaderOverlayContext } from '@/modules/reader/types/ReaderOverlay.types.ts';
import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts'; import { TReaderProgressBarContext } from '@/modules/reader/types/ReaderProgressBar.types.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
const BaseMobileReaderProgressBar = ({ const BaseMobileReaderProgressBar = ({
previousChapter, previousChapter,
@@ -74,9 +75,9 @@ const BaseMobileReaderProgressBar = ({
<ReaderProgressBar <ReaderProgressBar
progressBarPosition={ProgressBarPosition.BOTTOM} progressBarPosition={ProgressBarPosition.BOTTOM}
{...pagesState} {...pagesState}
createProgressBarSlot={({ name }) => ( createProgressBarSlot={(page) => (
<ReaderProgressBarSlot <ReaderProgressBarSlot
pageName={name} pageName={page.name}
progressBarPosition={ProgressBarPosition.BOTTOM} progressBarPosition={ProgressBarPosition.BOTTOM}
slotProps={{ slotProps={{
box: { box: {
@@ -99,6 +100,9 @@ const BaseMobileReaderProgressBar = ({
height: '2px', height: '2px',
borderRadius: 100, borderRadius: 100,
backgroundColor: 'background.paper', backgroundColor: 'background.paper',
...applyStyles(getNextIndexFromPage(page) > currentPageIndex, {
backgroundColor: 'primary.main',
}),
zIndex: 1, zIndex: 1,
}} }}
/> />