From 1e57533337c613d1b3fba59a573afcb48cf5cb94 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Fri, 13 Dec 2024 01:52:28 +0100 Subject: [PATCH] Highlight active settings in reader settings --- public/locales/en.json | 2 ++ src/modules/core/Core.types.ts | 1 + .../core/components/buttons/ButtonSelect.tsx | 35 ++++++++++++------- .../layout/ReaderSettingPageScaleMode.tsx | 1 + .../layout/ReaderSettingReadingDirection.tsx | 1 + .../layout/ReaderSettingReadingMode.tsx | 1 + .../layout/ReaderSettingTapZoneInvertMode.tsx | 5 ++- .../layout/ReaderSettingTapZoneLayout.tsx | 1 + .../layout/profiles/ReaderSettingProfile.tsx | 5 ++- 9 files changed, 38 insertions(+), 14 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 67b49c2a..f5172fdc 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -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", diff --git a/src/modules/core/Core.types.ts b/src/modules/core/Core.types.ts index c1910ef0..d589d5a6 100644 --- a/src/modules/core/Core.types.ts +++ b/src/modules/core/Core.types.ts @@ -35,6 +35,7 @@ export interface MultiValueButtonBaseProps { tooltip?: string; defaultText?: string; value: Value; + defaultValue?: Value; values: Value[]; setValue: (value: Value) => void; valueToDisplayData: ValueToDisplayData; diff --git a/src/modules/core/components/buttons/ButtonSelect.tsx b/src/modules/core/components/buttons/ButtonSelect.tsx index aa71c4b4..46b371d2 100644 --- a/src/modules/core/components/buttons/ButtonSelect.tsx +++ b/src/modules/core/components/buttons/ButtonSelect.tsx @@ -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, values, + defaultValue, setValue, valueToDisplayData, isDefaultable, @@ -28,18 +30,27 @@ export const ButtonSelect = ({ {t('global.label.default')} )} - {values.map((displayValue) => ( - - ))} + {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 ( + + + + ); + })} ); }; diff --git a/src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx b/src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx index 089d3840..aa6e4ddb 100644 --- a/src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx +++ b/src/modules/reader/components/settings/layout/ReaderSettingPageScaleMode.tsx @@ -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} diff --git a/src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx b/src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx index e9e96fc6..6d08fd60 100644 --- a/src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx +++ b/src/modules/reader/components/settings/layout/ReaderSettingReadingDirection.tsx @@ -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} diff --git a/src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx b/src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx index d603e460..e4274a5c 100644 --- a/src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx +++ b/src/modules/reader/components/settings/layout/ReaderSettingReadingMode.tsx @@ -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} diff --git a/src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx b/src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx index 135d0148..f00be618 100644 --- a/src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx +++ b/src/modules/reader/components/settings/layout/ReaderSettingTapZoneInvertMode.tsx @@ -89,11 +89,14 @@ export const ReaderSettingTapZoneInvertMode = ({ }) => { const { t } = useTranslation(); + const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value); + return ( setTapZoneInvertMode(TAP_ZONES_INVERT_OPTION_TO_SETTING[value])} valueToDisplayData={VALUE_TO_DISPLAY_DATA} diff --git a/src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx b/src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx index a7d01359..7d3524e3 100644 --- a/src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx +++ b/src/modules/reader/components/settings/layout/ReaderSettingTapZoneLayout.tsx @@ -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} diff --git a/src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx b/src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx index 6f92fe3d..9661120b 100644 --- a/src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx +++ b/src/modules/reader/components/settings/layout/profiles/ReaderSettingProfile.tsx @@ -26,11 +26,14 @@ export const ReaderSettingProfile = ({ }) => { const { t } = useTranslation(); + const validReaderProfile = getValidReaderProfile(defaultProfile.value, profiles); + return (