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

Make active reading mode default settings editable in reader

Browse Source
This commit is contained in:
schroda
2024-12-30 14:52:09 +01:00
parent 6bf3e297ef
commit 6ca6864035
5 changed files with 127 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx
View File

@@ -7,6 +7,9 @@
*/
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import { useTranslation } from 'react-i18next';
import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
import { ReaderSettingReadingDirection } from '@/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx';
import { ReaderSettingTapZoneLayout } from '@/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx';
@@ -18,6 +21,7 @@ import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layou
import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
import { TReaderTapZoneContext } from '@/modules/reader/types/TapZoneLayout.types.ts';
import { ReaderDefaultLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderDefaultLayoutSettings.tsx';
export const ReaderLayoutSettings = ({
setShowPreview,
@@ -25,73 +29,92 @@ export const ReaderLayoutSettings = ({
updateSetting,
isDefaultable,
onDefault,
isSeriesMode,
}: ReaderSettingsTypeProps & {
setShowPreview: TReaderTapZoneContext['setShowPreview'];
}) => (
<Stack sx={{ gap: 2 }}>
<DefaultSettingFootnote areDefaultSettings={!isDefaultable} />
{isDefaultable && (
<ReaderSettingReadingMode
isSeriesMode?: boolean;
}) => {
const { t } = useTranslation();
return (
<Stack sx={{ gap: 2 }}>
<DefaultSettingFootnote areDefaultSettings={!isDefaultable} />
{isSeriesMode && (
<>
<Typography>{t('reader.settings.source_series')}</Typography>
<ReaderSettingReadingMode
readingMode={settings.readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readingMode')}
/>
</>
)}
<ReaderSettingPageGap
pageGap={settings.pageGap}
readingMode={settings.readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readingMode')}
onDefault={() => onDefault?.('pageGap')}
updateSetting={(...args) => updateSetting('pageGap', ...args)}
/>
)}
<ReaderSettingPageGap
pageGap={settings.pageGap}
readingMode={settings.readingMode}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('pageGap')}
updateSetting={(...args) => updateSetting('pageGap', ...args)}
/>
<ReaderSettingReadingDirection
readingDirection={settings.readingDirection}
setReadingDirection={(value) => updateSetting('readingDirection', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readingDirection')}
/>
<ReaderSettingTapZoneLayout
tapZoneLayout={settings.tapZoneLayout}
setTapZoneLayout={(value) => {
setShowPreview(true);
updateSetting('tapZoneLayout', value);
}}
isDefaultable={isDefaultable}
onDefault={() => {
setShowPreview(true);
onDefault?.('tapZoneLayout');
}}
/>
<ReaderSettingTapZoneInvertMode
tapZoneInvertMode={settings.tapZoneInvertMode}
setTapZoneInvertMode={(value) => {
setShowPreview(true);
updateSetting('tapZoneInvertMode', value);
}}
isDefaultable={isDefaultable}
onDefault={() => {
setShowPreview(true);
onDefault?.('tapZoneInvertMode');
}}
/>
<ReaderSettingPageScaleMode
pageScaleMode={settings.pageScaleMode}
setPageScaleMode={(value) => updateSetting('pageScaleMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('pageScaleMode')}
/>
<ReaderSettingStretchPage
pageScaleMode={settings.pageScaleMode.value}
shouldStretchPage={settings.shouldStretchPage.value}
setShouldStretchPage={(value) => updateSetting('shouldStretchPage', value)}
/>
<ReaderSettingWidth
readerWidth={settings.readerWidth.value}
pageScaleMode={settings.pageScaleMode.value}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readerWidth')}
updateSetting={(...args) => updateSetting(...args)}
/>
</Stack>
);
<ReaderSettingReadingDirection
readingDirection={settings.readingDirection}
setReadingDirection={(value) => updateSetting('readingDirection', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readingDirection')}
/>
<ReaderSettingTapZoneLayout
tapZoneLayout={settings.tapZoneLayout}
setTapZoneLayout={(value) => {
setShowPreview(true);
updateSetting('tapZoneLayout', value);
}}
isDefaultable={isDefaultable}
onDefault={() => {
setShowPreview(true);
onDefault?.('tapZoneLayout');
}}
/>
<ReaderSettingTapZoneInvertMode
tapZoneInvertMode={settings.tapZoneInvertMode}
setTapZoneInvertMode={(value) => {
setShowPreview(true);
updateSetting('tapZoneInvertMode', value);
}}
isDefaultable={isDefaultable}
onDefault={() => {
setShowPreview(true);
onDefault?.('tapZoneInvertMode');
}}
/>
<ReaderSettingPageScaleMode
pageScaleMode={settings.pageScaleMode}
setPageScaleMode={(value) => updateSetting('pageScaleMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('pageScaleMode')}
/>
<ReaderSettingStretchPage
pageScaleMode={settings.pageScaleMode.value}
shouldStretchPage={settings.shouldStretchPage.value}
setShouldStretchPage={(value) => updateSetting('shouldStretchPage', value)}
/>
<ReaderSettingWidth
readerWidth={settings.readerWidth.value}
pageScaleMode={settings.pageScaleMode.value}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readerWidth')}
updateSetting={(...args) => updateSetting(...args)}
/>
{isSeriesMode && (
<>
<Divider />
<ReaderDefaultLayoutSettings
profiles={[settings.readingMode.value]}
updateSetting={updateSetting}
isSeriesMode={isSeriesMode}
/>
</>
)}
</Stack>
);
};