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

Adjust "MobileReaderProgressBar" active dragging styling

Browse Source
This commit is contained in:
schroda
2024-12-28 04:06:03 +01:00
parent 3185449816
commit aee42d7bb1
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,7 +73,7 @@ const PROGRESS_BAR_SLOT_PROPS: ComponentProps<typeof ReaderProgressBar>['slotPro
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
zIndex: 1, zIndex: 1,
pointer: 'default', cursor: 'inherit',
}, },
}, },
progressBarPageTexts: { progressBarPageTexts: {
@@ -86,12 +86,13 @@ const BaseMobileReaderProgressBar = ({
nextChapter, nextChapter,
isVisible, isVisible,
setIsMaximized, setIsMaximized,
isDragging,
currentPageIndex, currentPageIndex,
pages, pages,
direction, direction,
}: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> & }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
Pick<TReaderOverlayContext, 'isVisible'> & Pick<TReaderOverlayContext, 'isVisible'> &
Pick<TReaderProgressBarContext, 'setIsMaximized'> & Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & { Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> & {
direction: ReturnType<typeof ReaderService.useGetThemeDirection>; direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => { }) => {
@@ -114,11 +115,12 @@ const BaseMobileReaderProgressBar = ({
height: '75%', height: '75%',
backgroundColor: 'primary.main', backgroundColor: 'primary.main',
borderRadius: 100, borderRadius: 100,
cursor: isDragging ? 'grabbing' : 'grab',
}} }}
/> />
), ),
}), }),
[currentPagesIndex, pages.length], [currentPagesIndex, pages.length, isDragging],
); );
useLayoutEffect(() => { useLayoutEffect(() => {
@@ -191,5 +193,14 @@ export const MobileReaderProgressBar = withPropsFrom(
userReaderStatePagesContext, userReaderStatePagesContext,
() => ({ direction: ReaderService.useGetThemeDirection() }), () => ({ direction: ReaderService.useGetThemeDirection() }),
], ],
['previousChapter', 'nextChapter', 'isVisible', 'setIsMaximized', 'currentPageIndex', 'pages', 'direction'], [
'previousChapter',
'nextChapter',
'isVisible',
'setIsMaximized',
'isDragging',
'currentPageIndex',
'pages',
'direction',
],
); );