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

Add option to reset image filters to default

Browse Source
This commit is contained in:
schroda
2024-12-17 16:48:03 +01:00
parent 8ca0c58ee0
commit f72977c7ce
10 changed files with 70 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/modules/core/components/buttons/ResetButton.tsx
View File

@@ -9,12 +9,28 @@
import Button, { ButtonProps } from '@mui/material/Button';
import { useTranslation } from 'react-i18next';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import Tooltip from '@mui/material/Tooltip';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
export const ResetButton = (props: ButtonProps) => {
type PropsIconButton = { asIconButton: true } & IconButtonProps;
type PropsButton = { asIconButton?: false } & ButtonProps;
type Props = PropsIconButton | PropsButton;
export const ResetButton = ({ asIconButton, ...props }: Props) => {
const { t } = useTranslation();
if (asIconButton) {
return (
<Button startIcon={<RestartAltIcon />} {...props}>
<Tooltip title={t('global.button.reset')}>
<IconButton color="inherit" {...props}>
<RestartAltIcon />
</IconButton>
</Tooltip>
);
}
return (
<Button startIcon={<RestartAltIcon />} {...(props as ButtonProps)}>
{t('global.button.reset')}
</Button>
);

2
src/modules/core/components/inputs/SliderInput.tsx
View File

@@ -36,6 +36,6 @@ export const SliderInput = ({
</Typography>
</Stack>
<Slider {...slotProps?.slider} sx={{ flexBasis: '75%', ...slotProps?.slider?.sx }} />
{onDefault && <ResetButton onClick={onDefault} variant="outlined" />}
{onDefault && <ResetButton asIconButton onClick={onDefault} />}
</Stack>
);

8
src/modules/reader/components/settings/filters/ReaderFilterSettings.tsx
View File

@@ -16,6 +16,8 @@ import { ReaderSettingSepia } from '@/modules/reader/components/settings/filters
import { ReaderSettingGrayscale } from '@/modules/reader/components/settings/filters/ReaderSettingGrayscale.tsx';
import { ReaderSettingInvert } from '@/modules/reader/components/settings/filters/ReaderSettingInvert.tsx';
import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderFilterSettings = ({ settings: { customFilter }, updateSetting }: ReaderSettingsTypeProps) => (
<Stack sx={{ gap: 2 }}>
@@ -111,5 +113,11 @@ export const ReaderFilterSettings = ({ settings: { customFilter }, updateSetting
})
}
/>
<Stack sx={{ alignItems: 'end' }}>
<ResetButton
onClick={() => updateSetting('customFilter', DEFAULT_READER_SETTINGS.customFilter)}
variant="outlined"
/>
</Stack>
</Stack>
);

7
src/modules/reader/components/settings/filters/ReaderSettingBrightness.tsx
View File

@@ -37,6 +37,13 @@ export const ReaderSettingBrightness = ({
<SliderInput
label={t('reader.settings.custom_filter.brightness')}
value={brightness.value}
onDefault={() =>
updateSetting(
'brightness',
{ ...brightness, value: DEFAULT_READER_SETTINGS.customFilter.brightness.value },
true,
)
}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.customFilter.brightness.value,

7
src/modules/reader/components/settings/filters/ReaderSettingContrast.tsx
View File

@@ -36,6 +36,13 @@ export const ReaderSettingContrast = ({
<SliderInput
label={t('reader.settings.custom_filter.contrast')}
value={contrast.value}
onDefault={() =>
updateSetting(
'contrast',
{ ...contrast, value: DEFAULT_READER_SETTINGS.customFilter.contrast.value },
true,
)
}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.customFilter.contrast.value,

3
src/modules/reader/components/settings/filters/ReaderSettingHue.tsx
View File

@@ -36,6 +36,9 @@ export const ReaderSettingHue = ({
<SliderInput
label={t('reader.settings.custom_filter.hue')}
value={hue.value}
onDefault={() =>
updateSetting('hue', { ...hue, value: DEFAULT_READER_SETTINGS.customFilter.hue.value }, true)
}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.customFilter.hue.value,

13
src/modules/reader/components/settings/filters/ReaderSettingRGBA.tsx
View File

@@ -57,6 +57,19 @@ export const ReaderSettingRGBA = ({
key={key}
label={t(RGBA_TYPE_TO_TRANSLATION_KEY[key as RGBAType])}
value={value}
onDefault={() =>
updateSetting(
'rgba',
{
...rgba,
value: {
...rgba.value,
[key]: DEFAULT_READER_SETTINGS.customFilter.rgba.value[key as RGBAType],
},
},
true,
)
}
slotProps={{
slider: {
value,

7
src/modules/reader/components/settings/filters/ReaderSettingSaturate.tsx
View File

@@ -36,6 +36,13 @@ export const ReaderSettingSaturate = ({
<SliderInput
label={t('reader.settings.custom_filter.saturate')}
value={saturate.value}
onDefault={() =>
updateSetting(
'saturate',
{ ...saturate, value: DEFAULT_READER_SETTINGS.customFilter.saturate.value },
true,
)
}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.customFilter.saturate.value,

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

@@ -32,7 +32,10 @@ export const ReaderHotkeysSettings = ({ settings, updateSetting }: ReaderSetting
/>
))}
<Stack sx={{ alignItems: 'end' }}>
<ResetButton onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)} />
<ResetButton
onClick={() => updateSetting('hotkeys', DEFAULT_READER_SETTINGS.hotkeys)}
variant="outlined"
/>
</Stack>
</Stack>
);

8
src/modules/reader/components/settings/hotkeys/ReaderSettingHotkey.tsx
View File

@@ -9,7 +9,6 @@
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import AddIcon from '@mui/icons-material/Add';
import RestartAltIcon from '@mui/icons-material/RestartAlt';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import { bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
@@ -19,6 +18,7 @@ import { DEFAULT_READER_SETTINGS } from '@/modules/reader/constants/ReaderSettin
import { TranslationKey } from '@/Base.types.ts';
import { RecordHotkey } from '@/modules/reader/components/settings/hotkeys/RecordHotkey.tsx';
import { Hotkey } from '@/modules/reader/components/settings/hotkeys/Hotkey.tsx';
import { ResetButton } from '@/modules/core/components/buttons/ResetButton.tsx';
const READER_HOTKEY_TO_TITLE: Record<ReaderHotkey, TranslationKey> = {
[ReaderHotkey.PREVIOUS_PAGE]: 'reader.settings.hotkey.previous_page',
@@ -62,11 +62,7 @@ export const ReaderSettingHotkey = ({
<AddIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('global.button.reset')}>
<IconButton onClick={() => updateSetting(DEFAULT_READER_SETTINGS.hotkeys[hotkey])} color="inherit">
<RestartAltIcon />
</IconButton>
</Tooltip>
<ResetButton asIconButton onClick={() => updateSetting(DEFAULT_READER_SETTINGS.hotkeys[hotkey])} />
</Stack>
{popupState.isOpen && (
<RecordHotkey