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

Rename "reader scrollbar state" properties

Browse Source
This commit is contained in:
schroda
2025-08-31 16:38:26 +02:00
parent 4cc5821ead
commit 9bedec7115
10 changed files with 57 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
View File

@@ -50,7 +50,7 @@ const BaseStandardReaderProgressBar = ({
}) => {
const theme = useTheme();
const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const [, setRefreshProgressBarPosition] = useState({});
useResizeObserver(
@@ -61,8 +61,8 @@ const BaseStandardReaderProgressBar = ({
const finalProgressBarPosition = getProgressBarPosition(
progressBarPosition,
progressBarPositionAutoVertical,
scrollbarYSize,
readerNavBarWidth + scrollbarXSize,
scrollbar.ySize,
readerNavBarWidth + scrollbar.xSize,
);
const { isBottom, isLeft, isRight, isVertical, isHorizontal } =
getProgressBarPositionInfo(finalProgressBarPosition);
@@ -111,20 +111,20 @@ const BaseStandardReaderProgressBar = ({
...applyStyles(isHorizontal, {
minHeight: '100px',
...applyStyles(theme.direction === 'ltr', {
left: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize,
right: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize,
left: readerDirection === 'ltr' ? readerNavBarWidth : scrollbar.ySize,
right: readerDirection === 'rtl' ? readerNavBarWidth : scrollbar.ySize,
}),
...applyStyles(theme.direction === 'rtl', {
left: readerDirection === 'rtl' ? readerNavBarWidth : scrollbarYSize,
right: readerDirection === 'ltr' ? readerNavBarWidth : scrollbarYSize,
left: readerDirection === 'rtl' ? readerNavBarWidth : scrollbar.ySize,
right: readerDirection === 'ltr' ? readerNavBarWidth : scrollbar.ySize,
}),
}),
...applyStyles(isVertical, {
minWidth: '100px',
bottom: `${scrollbarXSize}px`,
bottom: `${scrollbar.xSize}px`,
}),
...applyStyles(isBottom, {
bottom: `${scrollbarXSize}px`,
bottom: `${scrollbar.xSize}px`,
}),
...applyStyles(isLeft, {
...applyStyles(theme.direction === 'ltr', {
@@ -132,14 +132,14 @@ const BaseStandardReaderProgressBar = ({
right: readerDirection === 'rtl' ? readerNavBarWidth : 'unset',
}),
...applyStyles(theme.direction === 'rtl', {
right: readerDirection === 'rtl' ? scrollbarYSize : 'unset',
left: readerDirection === 'ltr' ? scrollbarYSize : 'unset',
right: readerDirection === 'rtl' ? scrollbar.ySize : 'unset',
left: readerDirection === 'ltr' ? scrollbar.ySize : 'unset',
}),
}),
...applyStyles(isRight, {
...applyStyles(theme.direction === 'ltr', {
right: readerDirection === 'ltr' ? scrollbarYSize : 'unset',
left: readerDirection === 'rtl' ? scrollbarYSize : 'unset',
right: readerDirection === 'ltr' ? scrollbar.ySize : 'unset',
left: readerDirection === 'rtl' ? scrollbar.ySize : 'unset',
}),
...applyStyles(theme.direction === 'rtl', {
left: readerDirection === 'rtl' ? readerNavBarWidth : 'unset',

6
src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
View File

@@ -38,7 +38,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { useReaderStore } from '@/features/reader/ReaderStore.ts';
import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
[ProgressBarPosition.BOTTOM]: 'up',
@@ -71,7 +71,7 @@ const BaseMobileReaderProgressBar = ({
bottomOffset?: number;
}) => {
const openChapter = ReaderControls.useOpenChapter();
const scrollbarXSize = useReaderStore((state) => state.scrollbar.scrollbarXSize);
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const [, setRefreshProgressBarPosition] = useState({});
useResizeObserver(
@@ -84,7 +84,7 @@ const BaseMobileReaderProgressBar = ({
progressBarPositionAutoVertical,
// scrollbar x size is already included in the top/bottom offset due to the progress bar being placed in the reader mobile bottom bar
topOffset + bottomOffset,
scrollbarXSize,
scrollbar.xSize,
);
const { isLeft, isRight, isVertical, isHorizontal } = getProgressBarPositionInfo(finalProgressBarPosition);