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

Show active setting in reader desktop nav bar

Browse Source
This commit is contained in:
schroda
2024-12-13 16:38:41 +01:00
parent 33910cc89d
commit feacfe70f1
9 changed files with 57 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/locales/en.json
View File

@@ -395,7 +395,7 @@
"label": {
"advanced": "Advanced",
"are_you_sure": "Are you sure?",
"footnote": "{{text}}*",
"asterisk": "*",
"auto": "Auto",
"both": "Both",
"bottom": "Bottom",
@@ -410,6 +410,7 @@
"display": "Display",
"filter": "Filter",
"finished": "Finished",
"footnote": "{{value}}<0>$t(global.label.asterisk)</0>",
"general": "General",
"github": "GitHub",
"hidden": "Hidden",
@@ -903,7 +904,6 @@
"width": "Fit width"
},
"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",
"placeholder": "Comics | length: 16, chars: letters, numbers, -, _"
},
@@ -1116,6 +1116,7 @@
"title": "Clear server cache"
}
},
"default_value": "{{value}}<0>($t(global.label.default))</0>",
"device": {
"active_device": {
"label": {

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

@@ -33,7 +33,6 @@ export type ValueToDisplayData<Value extends string | number> = Record<Value, Di
export interface MultiValueButtonBaseProps<Value extends string | number> {
tooltip?: string;
defaultText?: string;
value: Value;
defaultValue?: Value;
values: Value[];

34
src/modules/core/components/Superscript.tsx Normal file
View File

@@ -0,0 +1,34 @@
/*
* 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 Typography from '@mui/material/Typography';
import { Trans, useTranslation } from 'react-i18next';
import { TranslationKey } from '@/Base.types.ts';
/**
* Expects a translation key of format "{{value}}<0>superscript</0>"
* @param i18nKey
* @param value
* @constructor
*/
export const Superscript = ({ i18nKey, value }: { i18nKey: TranslationKey; value: string }) => {
const { t } = useTranslation();
return (
<Stack sx={{ flexDirection: 'row', gap: 0.25 }}>
<Trans
t={t}
// the type of "key" causes tsc error: "TS2590: Expression produces a union type that is too complex to represent"
i18nKey={i18nKey as any}
values={{ value }}
components={[<Typography variant="caption" sx={{ fontSize: 'x-small', opacity: 0.75 }} />]}
/>
</Stack>
);
};

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

@@ -11,6 +11,7 @@ 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';
import { Superscript } from '@/modules/core/components/Superscript.tsx';
export const ButtonSelect = <Value extends string | number>({
value,
@@ -36,8 +37,6 @@ export const ButtonSelect = <Value extends string | number>({
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') : ''}>
@@ -46,7 +45,7 @@ export const ButtonSelect = <Value extends string | number>({
variant={displayValue === value ? 'contained' : 'outlined'}
startIcon={valueToDisplayData[displayValue].icon}
>
{finalText}
{isDefault ? <Superscript i18nKey="global.label.footnote" value={text} /> : text}
</Button>
</Tooltip>
);

16
src/modules/core/components/buttons/ValueRotationButton.tsx
View File

@@ -12,11 +12,12 @@ import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { MultiValueButtonProps } from '@/modules/core/Core.types.ts';
import { getNextRotationValue } from '@/modules/core/utils/ValueRotationButton.utils.ts';
import { Superscript } from '@/modules/core/components/Superscript.tsx';
export const ValueRotationButton = <Value extends string | number>({
tooltip,
defaultText,
value,
defaultValue,
values,
setValue,
valueToDisplayData,
@@ -45,7 +46,18 @@ export const ValueRotationButton = <Value extends string | number>({
startIcon={defaultIcon}
size="large"
>
{defaultText ?? t('global.label.default')}
{defaultValue === undefined ? (
t('global.label.default')
) : (
<Superscript
i18nKey="settings.default_value"
value={
valueToDisplayData[defaultValue].isTitleString
? valueToDisplayData[defaultValue].title
: t(valueToDisplayData[defaultValue].title)
}
/>
)}
</Button>
) : (
<Button

1
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
View File

@@ -44,6 +44,7 @@ export const ReaderNavBarDesktopPageScale = ({
{...buttonSelectInputProps}
tooltip={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={(value) => updateSetting('pageScaleMode', value)}
valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}

5
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopProfile.tsx
View File

@@ -16,7 +16,6 @@ import {
getReaderProfile,
getValidReaderProfile,
} from '@/modules/reader/utils/ReaderSettings.utils.tsx';
import { DEFAULT_READER_PROFILE } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
export const ReaderNavBarDesktopProfile = ({
defaultProfile,
@@ -37,10 +36,8 @@ export const ReaderNavBarDesktopProfile = ({
<ValueRotationButton
{...buttonSelectInputProps}
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)}
defaultValue={defaultProfile.isDefault ? activeProfile : undefined}
values={profiles}
setValue={updateSetting}
valueToDisplayData={createProfileValueToDisplayData(profiles, true)}

1
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx
View File

@@ -30,6 +30,7 @@ export const ReaderNavBarDesktopReadingDirection = ({
{...buttonSelectInputProps}
tooltip={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={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}

1
src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx
View File

@@ -30,6 +30,7 @@ export const ReaderNavBarDesktopReadingMode = ({
{...buttonSelectInputProps}
tooltip={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}