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

Highlight active settings in reader settings

Browse Source
This commit is contained in:
schroda
2024-12-13 01:52:28 +01:00
parent 66b3757b12
commit 1e57533337
9 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/en.json
View File

@@ -395,6 +395,7 @@
"label": {
"advanced": "Advanced",
"are_you_sure": "Are you sure?",
"footnote": "{{text}}*",
"auto": "Auto",
"both": "Both",
"bottom": "Bottom",
@@ -836,6 +837,7 @@
}
},
"settings": {
"active_setting": "Active setting",
"background_color": "Background color",
"custom_filter": {
"brightness": "Custom brightness",

1
src/modules/core/Core.types.ts
View File

@@ -35,6 +35,7 @@ export interface MultiValueButtonBaseProps<Value extends string | number> {
tooltip?: string;
defaultText?: string;
value: Value;
defaultValue?: Value;
values: Value[];
setValue: (value: Value) => void;
valueToDisplayData: ValueToDisplayData<Value>;

35
src/modules/core/components/buttons/ButtonSelect.tsx
View File

@@ -9,11 +9,13 @@
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
export const ButtonSelect = <Value extends string | number>({
value,
values,
defaultValue,
setValue,
valueToDisplayData,
isDefaultable,
@@ -28,18 +30,27 @@ export const ButtonSelect = <Value extends string | number>({
{t('global.label.default')}
</Button>
)}
{values.map((displayValue) => (
<Button
key={displayValue}
onClick={() => setValue(displayValue)}
variant={displayValue === value ? 'contained' : 'outlined'}
startIcon={valueToDisplayData[displayValue].icon}
>
{valueToDisplayData[displayValue].isTitleString
? valueToDisplayData[displayValue].title
: t(valueToDisplayData[displayValue].title)}
</Button>
))}
{values.map((displayValue) => {
const isDefault = value === undefined && displayValue === defaultValue;
const text = valueToDisplayData[displayValue].isTitleString
? valueToDisplayData[displayValue].title
: t(valueToDisplayData[displayValue].title);
const defaultValueText = t('global.label.footnote', { text });
const finalText = isDefault ? defaultValueText : text;
return (
<Tooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
<Button
onClick={() => setValue(displayValue)}
variant={displayValue === value ? 'contained' : 'outlined'}
startIcon={valueToDisplayData[displayValue].icon}
>
{finalText}
</Button>
</Tooltip>
);
})}
</Stack>
);
};

1
src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx
View File

@@ -34,6 +34,7 @@ export const ReaderSettingPageScaleMode = ({
{...buttonSelectInputProps}
label={t('reader.settings.page_scale.title')}
value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
values={READER_PAGE_SCALE_MODE_VALUES}
setValue={setPageScaleMode}
valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}

1
src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx
View File

@@ -41,6 +41,7 @@ export const ReaderSettingReadingDirection = ({
{...buttonSelectInputProps}
label={t('reader.settings.label.reading_direction')}
value={readingDirection.isDefault ? undefined : readingDirection.value}
defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
values={READING_DIRECTION_VALUES}
setValue={setReadingDirection}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}

1
src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx
View File

@@ -30,6 +30,7 @@ export const ReaderSettingReadingMode = ({
{...buttonSelectInputProps}
label={t('reader.settings.label.reading_mode')}
value={readingMode.isDefault ? undefined : readingMode.value}
defaultValue={readingMode.isDefault ? readingMode.value : undefined}
values={READING_MODE_VALUES}
setValue={setReadingMode}
valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}

5
src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx
View File

@@ -89,11 +89,14 @@ export const ReaderSettingTapZoneInvertMode = ({
}) => {
const { t } = useTranslation();
const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.tap_zones.invert')}
value={tapZoneInvertMode.isDefault ? undefined : convertTapZoneInvertModeToOption(tapZoneInvertMode.value)}
value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}
defaultValue={tapZoneInvertMode.isDefault ? tapZonesInvertOption : undefined}
values={TAP_ZONES_INVERT_OPTION_VALUES}
setValue={(value) => setTapZoneInvertMode(TAP_ZONES_INVERT_OPTION_TO_SETTING[value])}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}

1
src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx
View File

@@ -52,6 +52,7 @@ export const ReaderSettingTapZoneLayout = ({
{...buttonSelectInputProps}
label={t('reader.settings.tap_zones.title')}
value={tapZoneLayout.isDefault ? undefined : tapZoneLayout.value}
defaultValue={tapZoneLayout.isDefault ? tapZoneLayout.value : undefined}
values={READER_TAP_ZONE_LAYOUT_VALUES}
setValue={setTapZoneLayout}
valueToDisplayData={VALUE_TO_DISPLAY_DATA}

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

@@ -26,11 +26,14 @@ export const ReaderSettingProfile = ({
}) => {
const { t } = useTranslation();
const validReaderProfile = getValidReaderProfile(defaultProfile.value, profiles);
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('global.label.profile_one')}
value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
value={defaultProfile.isDefault ? undefined : validReaderProfile}
defaultValue={defaultProfile.isDefault ? validReaderProfile : undefined}
values={profiles}
setValue={updateSetting}
valueToDisplayData={createProfileValueToDisplayData(profiles)}