Display active profile for default value
In case the profile was not set and the default value got used, there was no indication of the active profile.
This commit is contained in:
@@ -901,6 +901,7 @@
|
|||||||
"width": "Fit width"
|
"width": "Fit width"
|
||||||
},
|
},
|
||||||
"profiles": {
|
"profiles": {
|
||||||
|
"default_value": "$t(global.label.default) ({{profile}})",
|
||||||
"description": "Profiles are used to define the default reader settings which then can be used for series and reading modes",
|
"description": "Profiles are used to define the default reader settings which then can be used for series and reading modes",
|
||||||
"placeholder": "Comics | length: 16, chars: letters, numbers, -, _"
|
"placeholder": "Comics | length: 16, chars: letters, numbers, -, _"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export type ValueToDisplayData<Value extends string | number> = Record<Value, Di
|
|||||||
|
|
||||||
export interface MultiValueButtonBaseProps<Value extends string | number> {
|
export interface MultiValueButtonBaseProps<Value extends string | number> {
|
||||||
tooltip?: string;
|
tooltip?: string;
|
||||||
|
defaultText?: string;
|
||||||
value: Value;
|
value: Value;
|
||||||
values: Value[];
|
values: Value[];
|
||||||
setValue: (value: Value) => void;
|
setValue: (value: Value) => void;
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.u
|
|||||||
|
|
||||||
export const ValueRotationButton = <Value extends string | number>({
|
export const ValueRotationButton = <Value extends string | number>({
|
||||||
tooltip,
|
tooltip,
|
||||||
|
defaultText,
|
||||||
value,
|
value,
|
||||||
values,
|
values,
|
||||||
setValue,
|
setValue,
|
||||||
@@ -44,7 +45,7 @@ export const ValueRotationButton = <Value extends string | number>({
|
|||||||
startIcon={defaultIcon}
|
startIcon={defaultIcon}
|
||||||
size="large"
|
size="large"
|
||||||
>
|
>
|
||||||
{t('global.label.default')}
|
{defaultText ?? t('global.label.default')}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -13,24 +13,33 @@ import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
|
|||||||
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
|
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
|
||||||
import {
|
import {
|
||||||
createProfileValueToDisplayData,
|
createProfileValueToDisplayData,
|
||||||
|
getReaderProfile,
|
||||||
getValidReaderProfile,
|
getValidReaderProfile,
|
||||||
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
||||||
|
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
|
||||||
|
|
||||||
export const ReaderNavBarDesktopProfile = ({
|
export const ReaderNavBarDesktopProfile = ({
|
||||||
defaultProfile,
|
defaultProfile,
|
||||||
profiles,
|
profiles,
|
||||||
|
readingModesDefaultProfile,
|
||||||
|
readingMode,
|
||||||
updateSetting,
|
updateSetting,
|
||||||
...buttonSelectInputProps
|
...buttonSelectInputProps
|
||||||
}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
|
}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles' | 'readingModesDefaultProfile' | 'readingMode'> &
|
||||||
Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
|
Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
|
||||||
updateSetting: (profile: string) => void;
|
updateSetting: (profile: string) => void;
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const activeProfile = getReaderProfile(defaultProfile, profiles, readingModesDefaultProfile, readingMode.value);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ValueRotationButton
|
<ValueRotationButton
|
||||||
{...buttonSelectInputProps}
|
{...buttonSelectInputProps}
|
||||||
tooltip={t('global.label.profile_one')}
|
tooltip={t('global.label.profile_one')}
|
||||||
|
defaultText={t('reader.settings.profiles.default_value', {
|
||||||
|
profile: activeProfile === DEFAULT_READER_PROFILE ? t('global.label.standard') : activeProfile,
|
||||||
|
})}
|
||||||
value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
|
value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
|
||||||
values={profiles}
|
values={profiles}
|
||||||
setValue={updateSetting}
|
setValue={updateSetting}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ export const ReaderNavBarDesktopQuickSettings = ({
|
|||||||
settings: {
|
settings: {
|
||||||
defaultProfile,
|
defaultProfile,
|
||||||
profiles,
|
profiles,
|
||||||
|
readingModesDefaultProfile,
|
||||||
readingMode,
|
readingMode,
|
||||||
shouldOffsetDoubleSpreads,
|
shouldOffsetDoubleSpreads,
|
||||||
pageScaleMode,
|
pageScaleMode,
|
||||||
@@ -40,6 +41,8 @@ export const ReaderNavBarDesktopQuickSettings = ({
|
|||||||
<ReaderNavBarDesktopProfile
|
<ReaderNavBarDesktopProfile
|
||||||
defaultProfile={defaultProfile}
|
defaultProfile={defaultProfile}
|
||||||
profiles={profiles}
|
profiles={profiles}
|
||||||
|
readingModesDefaultProfile={readingModesDefaultProfile}
|
||||||
|
readingMode={readingMode}
|
||||||
updateSetting={(value) => updateSetting('defaultProfile', value)}
|
updateSetting={(value) => updateSetting('defaultProfile', value)}
|
||||||
isDefaultable={isDefaultable}
|
isDefaultable={isDefaultable}
|
||||||
onDefault={() => onDefault?.('defaultProfile')}
|
onDefault={() => onDefault?.('defaultProfile')}
|
||||||
|
|||||||
@@ -37,7 +37,7 @@ import { ReaderViewer } from '@/modules/reader/components/viewer/ReaderViewer.ts
|
|||||||
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
|
||||||
import { READER_BACKGROUND_TO_COLOR } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
|
import { READER_BACKGROUND_TO_COLOR } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
|
||||||
import { createPageData, createPagesData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
import { createPageData, createPagesData } from '@/modules/reader/utils/ReaderPager.utils.tsx';
|
||||||
import { getValidReaderProfile } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
import { getReaderProfile } from '@/modules/reader/utils/ReaderSettings.utils.tsx';
|
||||||
import { ReaderHotkeys } from '@/modules/reader/components/ReaderHotkeys.tsx';
|
import { ReaderHotkeys } from '@/modules/reader/components/ReaderHotkeys.tsx';
|
||||||
import { ReaderResumeMode, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
|
import { ReaderResumeMode, ReaderTransitionPageMode } from '@/modules/reader/types/Reader.types.ts';
|
||||||
import { getInitialReaderPageIndex } from '@/modules/reader/utils/Reader.utils.ts';
|
import { getInitialReaderPageIndex } from '@/modules/reader/utils/Reader.utils.ts';
|
||||||
@@ -194,13 +194,11 @@ export const Reader = () => {
|
|||||||
defaultSettings,
|
defaultSettings,
|
||||||
);
|
);
|
||||||
|
|
||||||
const profile = getValidReaderProfile(
|
const profile = getReaderProfile(
|
||||||
settingsWithDefaultProfileFallback.defaultProfile.isDefault
|
settingsWithDefaultProfileFallback.defaultProfile,
|
||||||
? settingsWithDefaultProfileFallback.readingModesDefaultProfile[
|
|
||||||
settingsWithDefaultProfileFallback.readingMode.value
|
|
||||||
]
|
|
||||||
: settingsWithDefaultProfileFallback.defaultProfile.value,
|
|
||||||
settingsWithDefaultProfileFallback.profiles,
|
settingsWithDefaultProfileFallback.profiles,
|
||||||
|
settingsWithDefaultProfileFallback.readingModesDefaultProfile,
|
||||||
|
settingsWithDefaultProfileFallback.readingMode.value,
|
||||||
);
|
);
|
||||||
|
|
||||||
const profileSettings = getReaderSettings(
|
const profileSettings = getReaderSettings(
|
||||||
|
|||||||
@@ -7,7 +7,12 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
|
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
|
||||||
import { IReaderSettings, ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
|
import {
|
||||||
|
IReaderSettings,
|
||||||
|
IReaderSettingsWithDefaultFlag,
|
||||||
|
ReaderPageScaleMode,
|
||||||
|
ReadingMode,
|
||||||
|
} from '@/modules/reader/types/Reader.types.ts';
|
||||||
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
|
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
|
||||||
import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
|
import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
|
||||||
|
|
||||||
@@ -37,3 +42,14 @@ export const isReaderWidthEditable = (pageScaleMode: IReaderSettings['pageScaleM
|
|||||||
|
|
||||||
export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
|
export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
|
||||||
[ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL].includes(readingMode);
|
[ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL].includes(readingMode);
|
||||||
|
|
||||||
|
export const getReaderProfile = (
|
||||||
|
defaultProfile: IReaderSettingsWithDefaultFlag['defaultProfile'],
|
||||||
|
profiles: IReaderSettings['profiles'],
|
||||||
|
readingModesDefaultProfile: IReaderSettings['readingModesDefaultProfile'],
|
||||||
|
readingMode: IReaderSettings['readingMode'],
|
||||||
|
): string =>
|
||||||
|
getValidReaderProfile(
|
||||||
|
defaultProfile.isDefault ? readingModesDefaultProfile[readingMode] : defaultProfile.value,
|
||||||
|
profiles,
|
||||||
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user