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

Remove custom profiles

Browse Source 
Instead of "custom profiles" each "reading mode" acts as a profile and has its own settings
This commit is contained in:
schroda
2024-12-16 15:22:21 +01:00
parent e95cc232a2
commit 74f78e40d4
19 changed files with 86 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,7 +31,6 @@ const READER_HOTKEY_TO_TITLE: Record<ReaderHotkey, TranslationKey> = {
[ReaderHotkey.CYCLE_SCALE_TYPE]: 'reader.settings.hotkey.scale_type',
[ReaderHotkey.STRETCH_IMAGE]: 'reader.settings.hotkey.stretch_image',
[ReaderHotkey.OFFSET_SPREAD_PAGES]: 'reader.settings.hotkey.offset_spread_pages',
[ReaderHotkey.CYCLE_PROFILES]: 'reader.settings.hotkey.profiles',
};
export const ReaderSettingHotkey = ({

54
src/modules/reader/components/settings/layout/ReaderDefaultLayoutSettings.tsx
View File

@@ -8,53 +8,37 @@
import Stack from '@mui/material/Stack';
import { ComponentProps } from 'react';
import { useTranslation } from 'react-i18next';
import { ReaderLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx';
import { ReaderSettingProfiles } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfiles.tsx';
import { ReaderSettingReadingModesDefaultProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingReadingModesDefaultProfile.tsx';
import { ReaderSettingProfileSettings } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfileSettings.tsx';
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import {
READING_MODE_VALUE_TO_DISPLAY_DATA,
READING_MODE_VALUES,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { ReaderSettingReadingMode } from '@/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx';
export const ReaderDefaultLayoutSettings = (
props: Omit<ComponentProps<typeof ReaderLayoutSettings>, 'setShowPreview'>,
) => {
const { settings, updateSetting } = props;
const { t } = useTranslation();
return (
<Stack sx={{ gap: 2, pb: 2 }}>
<Stack sx={{ gap: 2 }}>
<ReaderSettingProfiles
profiles={settings.profiles}
updateSetting={(profiles, removedProfiles) => {
if (removedProfiles.length) {
updateSetting(
'readingModesDefaultProfile',
Object.fromEntries(
Object.entries(settings.readingModesDefaultProfile).map(
([readingMode, profile]) => [
readingMode,
removedProfiles.includes(profile) ? DEFAULT_READER_PROFILE : profile,
],
),
) as IReaderSettings['readingModesDefaultProfile'],
);
}
updateSetting('profiles', profiles);
}}
<Stack sx={{ pt: 2, px: 2 }}>
<ReaderSettingReadingMode
readingMode={settings.readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
/>
<Stack sx={{ px: 2 }}>
<ReaderSettingReadingModesDefaultProfile
profiles={settings.profiles}
readingModesDefaultProfile={settings.readingModesDefaultProfile}
updateSetting={(readingModesDefaultProfile) =>
updateSetting('readingModesDefaultProfile', readingModesDefaultProfile)
}
/>
</Stack>
</Stack>
{settings.profiles.map((profile) => (
<ReaderSettingProfileSettings key={profile} profile={profile} {...props} />
{READING_MODE_VALUES.map((readingMode) => (
<ReaderSettingProfileSettings
key={readingMode}
profile={readingMode}
title={t(READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode].title)}
{...props}
/>
))}
</Stack>
);

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

@@ -18,7 +18,6 @@ import { ReaderSettingStretchPage } from '@/modules/reader/components/settings/l
import { ReaderSettingsTypeProps } from '@/modules/reader/types/Reader.types.ts';
import { ReaderSettingPageGap } from '@/modules/reader/components/settings/layout/ReaderSettingPageGap.tsx';
import { ReaderSettingWidth } from '@/modules/reader/components/settings/layout/ReaderSettingWidth.tsx';
import { ReaderSettingProfile } from '@/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx';
import { DefaultSettingFootnote } from '@/modules/reader/components/settings/DefaultSettingFootnote.tsx';
export const ReaderLayoutSettings = ({
@@ -33,20 +32,13 @@ export const ReaderLayoutSettings = ({
<Stack sx={{ gap: 2 }}>
<DefaultSettingFootnote />
{isDefaultable && (
<ReaderSettingProfile
defaultProfile={settings.defaultProfile}
profiles={settings.profiles}
updateSetting={(value) => updateSetting('defaultProfile', value)}
<ReaderSettingReadingMode
readingMode={settings.readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('defaultProfile')}
onDefault={() => onDefault?.('readingMode')}
/>
)}
<ReaderSettingReadingMode
readingMode={settings.readingMode}
setReadingMode={(value) => updateSetting('readingMode', value)}
isDefaultable={isDefaultable}
onDefault={() => onDefault?.('readingMode')}
/>
<ReaderSettingPageGap
pageGap={settings.pageGap}
readingMode={settings.readingMode}

42
src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx
View File

@@ -1,42 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
import {
createProfileValueToDisplayData,
getValidReaderProfile,
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
export const ReaderSettingProfile = ({
defaultProfile,
profiles,
updateSetting,
...buttonSelectInputProps
}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (profile: string) => void;
}) => {
const { t } = useTranslation();
const validReaderProfile = getValidReaderProfile(defaultProfile.value, profiles);
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('global.label.profile_one')}
value={defaultProfile.isDefault ? undefined : validReaderProfile}
defaultValue={defaultProfile.isDefault ? validReaderProfile : undefined}
values={profiles}
setValue={updateSetting}
valueToDisplayData={createProfileValueToDisplayData(profiles)}
/>
);
};

24
src/modules/reader/components/settings/layout/profiles/ReaderSettingProfileSettings.tsx
View File

@@ -8,30 +8,40 @@
import Stack from '@mui/material/Stack';
import ListSubheader from '@mui/material/ListSubheader';
import { ComponentProps } from 'react';
import { useTranslation } from 'react-i18next';
import { ComponentProps, useMemo } from 'react';
import { ReaderLayoutSettings } from '@/modules/reader/components/settings/layout/ReaderLayoutSettings.tsx';
import { useDefaultReaderSettingsWithDefaultFlag } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { ReadingMode } from '@/modules/reader/types/Reader.types.ts';
export const ReaderSettingProfileSettings = ({
profile,
title,
updateSetting,
...props
}: Pick<ComponentProps<typeof ReaderLayoutSettings>, 'updateSetting'> & { profile: string }) => {
const { t } = useTranslation();
}: Pick<ComponentProps<typeof ReaderLayoutSettings>, 'updateSetting'> & { profile: ReadingMode; title: string }) => {
const { settings } = useDefaultReaderSettingsWithDefaultFlag(profile);
const adjustedSettings = useMemo(
() => ({
...settings,
readingMode: {
value: profile,
isDefault: true,
},
}),
[settings, profile],
);
return (
<Stack sx={{ gap: 2 }}>
<ListSubheader component="div" id={`${profile}-settings`}>
{profile === DEFAULT_READER_PROFILE ? t('global.label.standard') : profile}
{title}
</ListSubheader>
<Stack sx={{ px: 2 }}>
<ReaderLayoutSettings
{...props}
setShowPreview={() => {}}
settings={settings}
settings={adjustedSettings}
updateSetting={(setting, value, commit) => updateSetting(setting, value, commit, true, profile)}
/>
</Stack>

53
src/modules/reader/components/settings/layout/profiles/ReaderSettingProfiles.tsx
View File

@@ -1,53 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderSettingProfiles = ({
profiles,
updateSetting,
}: Pick<IReaderSettings, 'profiles'> & {
updateSetting: (profiles: IReaderSettings['profiles'], removedProfiles: string[]) => void;
}) => {
const { t } = useTranslation();
return (
<MutableListSetting
settingName={t('global.label.profile_other')}
description={t('reader.settings.profiles.description')}
handleChange={(profileList, removedProfiles) =>
updateSetting(
[
...new Set(
[DEFAULT_READER_PROFILE, ...profileList].filter(
(device) => device !== t('global.label.standard'),
),
),
],
removedProfiles,
)
}
valueInfos={profiles.map((profile) => [
profile === DEFAULT_READER_PROFILE ? t('global.label.standard') : profile,
{ mutable: false, deletable: profile !== DEFAULT_READER_PROFILE },
])}
addItemButtonTitle={t('global.button.create')}
validateItem={(profileToValidate, tmpProfiles) =>
profileToValidate.length <= 16 &&
!!profileToValidate.match(/^[a-zA-Z0-9\-_]+$/g) &&
![...profiles, ...(tmpProfiles ?? [])]
.map((profile) => profile.toLowerCase())
.includes(profileToValidate.toLowerCase())
}
placeholder={t('reader.settings.profiles.placeholder')}
/>
);
};

50
src/modules/reader/components/settings/layout/profiles/ReaderSettingReadingModesDefaultProfile.tsx
View File

@@ -1,50 +0,0 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Typography from '@mui/material/Typography';
import {
READING_MODE_VALUE_TO_DISPLAY_DATA,
READING_MODE_VALUES,
} from '@/modules/reader/constants/ReaderSettings.constants.tsx';
import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
import { ButtonSelectInput } from '@/modules/core/components/inputs/ButtonSelectInput.tsx';
import { createProfileValueToDisplayData } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
export const ReaderSettingReadingModesDefaultProfile = ({
profiles,
readingModesDefaultProfile,
updateSetting,
}: Pick<IReaderSettings, 'profiles' | 'readingModesDefaultProfile'> & {
updateSetting: (readingModesDefaultProfile: IReaderSettings['readingModesDefaultProfile']) => void;
}) => {
const { t } = useTranslation();
return (
<Stack sx={{ gap: 2 }}>
<Typography>Reading mode default profile</Typography>
{READING_MODE_VALUES.map((readingMode) => (
<Stack key={readingMode} sx={{ gap: 1 }}>
<ButtonSelectInput
label={t(READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode].title)}
value={readingModesDefaultProfile[readingMode]}
values={profiles}
setValue={(profile) =>
updateSetting({
...readingModesDefaultProfile,
[readingMode]: profile,
})
}
valueToDisplayData={createProfileValueToDisplayData(profiles)}
/>
</Stack>
))}
</Stack>
);
};