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

Make reader setting slider inputs resettable to default

Browse Source
This commit is contained in:
schroda
2024-12-16 21:59:30 +01:00
parent f51446995a
commit b9ea7abe65
6 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/modules/reader/components/settings/hotkeys/ReaderHotkeysSettings.tsx
View File

@@ -9,11 +9,10 @@
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
import { ReaderSettingHotkey } from '@/modules/reader/components/settings/hotkeys/ReaderSettingHotkey.tsx';
import { DEFAULT_READER_SETTINGS, READER_HOTKEYS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSettingsTypeProps) => {
const { t } = useTranslation();
@@ -33,13 +32,7 @@ export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSetting
/>
))}
<Stack sx={{ alignItems: 'end' }}>
<Button
variant="contained"
startIcon={<RestartAltIcon />}
onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)}
>
{t('global.button.reset')}
</Button>
<ResetButton onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)} />
</Stack>
</Stack>
);

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

@@ -42,6 +42,8 @@ export const ReaderLayoutSettings = ({
<ReaderSettingPageGap
pageGap={settings.pageGap}
readingMode={settings.readingMode}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('pageGap')}
updateSetting={(...args) => updateSetting('pageGap', ...args)}
/>
<ReaderSettingReadingDirection
@@ -88,6 +90,8 @@ export const ReaderLayoutSettings = ({
<ReaderSettingWidth
readerWidth={settings.readerWidth.value}
pageScaleMode={settings.pageScaleMode.value}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readerWidth')}
updateSetting={(...args) => updateSetting(...args)}
/>
</Stack>

12
src/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx
View File

@@ -7,18 +7,21 @@
*/
import { useTranslation } from 'react-i18next';
import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { isContinuousReadingMode } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
export const ReaderSettingPageGap = ({
pageGap,
readingMode,
onDefault,
updateSetting,
}: Pick<IReaderSettingsWithDefaultFlag, 'pageGap' | 'readingMode'> & {
updateSetting: (gap: number, commit: boolean) => void;
}) => {
}: Pick<IReaderSettingsWithDefaultFlag, 'pageGap' | 'readingMode'> &
Pick<MultiValueButtonDefaultableProps<IReaderSettings['pageGap']>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (gap: number, commit: boolean) => void;
}) => {
const { t } = useTranslation();
const isChangeable = readingMode.value !== ReadingMode.WEBTOON && isContinuousReadingMode(readingMode.value);
@@ -30,6 +33,7 @@ export const ReaderSettingPageGap = ({
<SliderInput
label={t('reader.settings.label.page_gap')}
value={t('global.value', { value: pageGap.value, unit: t('global.unit.px') })}
onDefault={onDefault}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.readerWidth.value,

23
src/modules/reader/components/settings/layout/ReaderSettingWidth.tsx
View File

@@ -14,14 +14,18 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { SliderInput } from '@/modules/core/components/inputs/SliderInput.tsx';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { isReaderWidthEditable } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
export const ReaderSettingWidth = ({
readerWidth,
pageScaleMode,
onDefault,
updateSetting,
}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> & {
updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
}) => {
}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
}) => {
const { t } = useTranslation();
if (!isReaderWidthEditable(pageScaleMode)) {
@@ -30,11 +34,14 @@ export const ReaderSettingWidth = ({
return (
<Stack>
<CheckboxInput
label={t('reader.settings.label.limit_reader_width')}
checked={readerWidth.enabled}
onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
/>
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<CheckboxInput
label={t('reader.settings.label.limit_reader_width')}
checked={readerWidth.enabled}
onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
/>
{onDefault && <ResetButton onClick={onDefault} variant="outlined" />}
</Stack>
{readerWidth.enabled && (
<SliderInput
label={t('reader.settings.label.reader_width')}