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

Make reader settings dialog transparent on some changes

Browse Source 
- width change
- custom filter change
This commit is contained in:
schroda
2025-04-25 02:50:25 +02:00
parent 112c700fb7
commit 37127893b4
6 changed files with 118 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/modules/reader/components/settings/ReaderSettings.tsx
View File

@@ -15,6 +15,7 @@ import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
import { ReaderSettingsTabs } from '@/modules/reader/components/settings/ReaderSettingsTabs.tsx';
import { ReaderSettingTab } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { useDisableAllHotkeysWhileMounted } from '@/modules/hotkeys/Hotkeys.utils.ts';
import { applyStyles } from '@/modules/core/utils/ApplyStyles.ts';
export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
const { manga } = useReaderStateMangaContext();
@@ -23,6 +24,7 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
useDisableAllHotkeysWhileMounted(isOpen);
const [activeTab, setActiveTab] = useState(0);
const [isTransparent, setIsTransparent] = useState(false);
if (!manga) {
return null;
@@ -39,6 +41,11 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
fullWidth
onClose={close}
hideBackdrop={activeTab === ReaderSettingTab.FILTER}
sx={{
...applyStyles(isTransparent, {
opacity: 0.75,
}),
}}
>
<DialogContent sx={{ p: 0 }}>
<ReaderSettingsTabs
@@ -47,6 +54,7 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
settings={settings}
updateSetting={(...args) => ReaderService.updateSetting(manga, ...args)}
deleteSetting={(...args) => ReaderService.deleteSetting(manga, ...args)}
setTransparent={setIsTransparent}
/>
</DialogContent>
</Dialog>

4
src/modules/reader/components/settings/ReaderSettingsTabs.tsx
View File

@@ -35,6 +35,7 @@ const BaseReaderSettingsTabs = ({
deleteSetting,
setShowPreview,
mode: overlayMode,
setTransparent,
}: Pick<TReaderTapZoneContext, 'setShowPreview'> &
Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'mode'> & {
activeTab: number;
@@ -43,6 +44,7 @@ const BaseReaderSettingsTabs = ({
updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
areDefaultSettings?: boolean;
deleteSetting: (setting: keyof IReaderSettings) => void;
setTransparent?: (transparent: boolean) => void;
}) => {
const { t } = useTranslation();
const isTouchDevice = MediaQuery.useIsTouchDevice();
@@ -103,6 +105,7 @@ const BaseReaderSettingsTabs = ({
isDefaultable={!areDefaultSettings}
onDefault={(...args) => deleteSetting?.(...args)}
isSeriesMode
setTransparent={setTransparent}
/>
</TabPanel>
);
@@ -137,6 +140,7 @@ const BaseReaderSettingsTabs = ({
updateSetting={(...args) => updateSetting(...args)}
isDefaultable
onDefault={(...args) => deleteSetting?.(...args)}
setTransparent={setTransparent}
/>
</TabPanel>
);

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

@@ -22,102 +22,105 @@ export const ReaderFilterSettings = ({
settings: { customFilter },
updateSetting,
onDefault,
}: ReaderSettingsTypeProps) => (
<Stack sx={{ gap: 2 }}>
<ReaderSettingBrightness
brightness={customFilter.brightness}
updateSetting={(key, value, commit) =>
updateSetting(
'customFilter',
{
setTransparent,
}: ReaderSettingsTypeProps) => {
const update = (value: any, commit?: boolean) => {
updateSetting('customFilter', value, commit);
setTransparent?.(commit === undefined ? false : !commit);
};
return (
<Stack sx={{ gap: 2 }}>
<ReaderSettingBrightness
brightness={customFilter.brightness}
updateSetting={(key, value, commit) =>
update(
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingContrast
contrast={customFilter.contrast}
updateSetting={(key, value, commit) =>
update(
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingSaturate
saturate={customFilter.saturate}
updateSetting={(key, value, commit) =>
update(
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingHue
hue={customFilter.hue}
updateSetting={(key, value, commit) =>
update(
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingRGBA
rgba={customFilter.rgba}
updateSetting={(key, value, commit) =>
update(
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingSepia
sepia={customFilter.sepia}
updateSetting={(value) =>
update({
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingContrast
contrast={customFilter.contrast}
updateSetting={(key, value, commit) =>
updateSetting(
'customFilter',
{
sepia: value,
})
}
/>
<ReaderSettingGrayscale
grayscale={customFilter.grayscale}
updateSetting={(value) =>
update({
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingSaturate
saturate={customFilter.saturate}
updateSetting={(key, value, commit) =>
updateSetting(
'customFilter',
{
grayscale: value,
})
}
/>
<ReaderSettingInvert
invert={customFilter.invert}
updateSetting={(value) =>
update({
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingHue
hue={customFilter.hue}
updateSetting={(key, value, commit) =>
updateSetting(
'customFilter',
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingRGBA
rgba={customFilter.rgba}
updateSetting={(key, value, commit) =>
updateSetting(
'customFilter',
{
...customFilter,
[key]: value,
},
commit,
)
}
/>
<ReaderSettingSepia
sepia={customFilter.sepia}
updateSetting={(value) =>
updateSetting('customFilter', {
...customFilter,
sepia: value,
})
}
/>
<ReaderSettingGrayscale
grayscale={customFilter.grayscale}
updateSetting={(value) =>
updateSetting('customFilter', {
...customFilter,
grayscale: value,
})
}
/>
<ReaderSettingInvert
invert={customFilter.invert}
updateSetting={(value) =>
updateSetting('customFilter', {
...customFilter,
invert: value,
})
}
/>
<Stack sx={{ alignItems: 'end' }}>
<ResetButton onClick={() => onDefault?.('customFilter')} variant="outlined" />
invert: value,
})
}
/>
<Stack sx={{ alignItems: 'end' }}>
<ResetButton onClick={() => onDefault?.('customFilter')} variant="outlined" />
</Stack>
</Stack>
</Stack>
);
);
};

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

@@ -30,6 +30,7 @@ export const ReaderLayoutSettings = ({
isDefaultable,
onDefault,
isSeriesMode,
setTransparent,
}: ReaderSettingsTypeProps & {
setShowPreview: TReaderTapZoneContext['setShowPreview'];
isSeriesMode?: boolean;
@@ -104,6 +105,7 @@ export const ReaderLayoutSettings = ({
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readerWidth')}
updateSetting={(...args) => updateSetting(...args)}
setTransparent={setTransparent}
/>
{isSeriesMode && (
<>
@@ -112,6 +114,7 @@ export const ReaderLayoutSettings = ({
profiles={[settings.readingMode.value]}
updateSetting={updateSetting}
isSeriesMode={isSeriesMode}
setTransparent={setTransparent}
/>
</>
)}

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

@@ -23,9 +23,11 @@ export const ReaderSettingWidth = ({
isDefaultable,
onDefault,
updateSetting,
setTransparent,
}: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
setTransparent?: (transparent: boolean) => void;
}) => {
const { t } = useTranslation();
@@ -55,9 +57,11 @@ export const ReaderSettingWidth = ({
min: 10,
max: 100,
onChange: (_, value) => {
setTransparent?.(true);
updateSetting('readerWidth', { ...readerWidth, value: value as number }, false);
},
onChangeCommitted: (_, value) => {
setTransparent?.(false);
updateSetting('readerWidth', { ...readerWidth, value: value as number }, true);
},
},