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

Add tooltips to reader desktop quick settings

Browse Source
This commit is contained in:
schroda
2024-12-09 16:24:32 +01:00
parent 9c5382ebd7
commit 2cd5a970cc
6 changed files with 84 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,6 +32,7 @@ type DisplayData = DisplayDataTranslationKey | DisplayDataString;
export type ValueToDisplayData<Value extends string | number> = Record<Value, DisplayData>;
export interface MultiValueButtonBaseProps<Value extends string | number> {
tooltip?: string;
value: Value;
values: Value[];
setValue: (value: Value) => void;

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

@@ -9,10 +9,12 @@
import { useTranslation } from 'react-i18next';
import { ReactNode, useMemo } from 'react';
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';
export const ValueRotationButton = <Value extends string | number>({
tooltip,
value,
values,
setValue,
@@ -32,40 +34,40 @@ export const ValueRotationButton = <Value extends string | number>({
return values.indexOf(value);
}, [value, values]);
if (isDefault) {
return (
<Button
onClick={() => setValue(values[0])}
sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
variant="contained"
startIcon={defaultIcon}
size="large"
>
{t('global.label.default')}
</Button>
);
}
return (
<Button
onClick={() => {
const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
<Tooltip title={tooltip}>
{isDefault ? (
<Button
onClick={() => setValue(values[0])}
sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
variant="contained"
startIcon={defaultIcon}
size="large"
>
{t('global.label.default')}
</Button>
) : (
<Button
onClick={() => {
const nextValue = getNextRotationValue(indexOfValue, values, isDefaultable);
if (nextValue === undefined) {
onDefault?.();
return;
}
if (nextValue === undefined) {
onDefault?.();
return;
}
setValue(nextValue);
}}
sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
variant="contained"
startIcon={valueToDisplayData[value].icon}
size="large"
>
{valueToDisplayData[value].isTitleString
? valueToDisplayData[value].title
: t(valueToDisplayData[value].title)}
</Button>
setValue(nextValue);
}}
sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
variant="contained"
startIcon={valueToDisplayData[value].icon}
size="large"
>
{valueToDisplayData[value].isTitleString
? valueToDisplayData[value].title
: t(valueToDisplayData[value].title)}
</Button>
)}
</Tooltip>
);
};

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

@@ -42,6 +42,7 @@ export const ReaderNavBarDesktopPageScale = ({
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
<ValueRotationButton
{...buttonSelectInputProps}
tooltip={t('reader.settings.page_scale.title')}
value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
values={READER_PAGE_SCALE_MODE_VALUES}
setValue={(value) => updateSetting('pageScaleMode', value)}

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

@@ -7,6 +7,7 @@
*/
import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import { useTranslation } from 'react-i18next';
import { IReaderSettingsWithDefaultFlag } from '@/modules/reader/types/Reader.types.ts';
import { MultiValueButtonDefaultableProps } from '@/modules/core/Core.types.ts';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
@@ -23,13 +24,18 @@ export const ReaderNavBarDesktopProfile = ({
}: Pick<IReaderSettingsWithDefaultFlag, 'defaultProfile' | 'profiles'> &
Pick<MultiValueButtonDefaultableProps<string>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (profile: string) => void;
}) => (
<ValueRotationButton
{...buttonSelectInputProps}
value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
values={profiles}
setValue={updateSetting}
valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
defaultIcon={<ManageAccountsIcon />}
/>
);
}) => {
const { t } = useTranslation();
return (
<ValueRotationButton
{...buttonSelectInputProps}
tooltip={t('global.label.profile_one')}
value={defaultProfile.isDefault ? undefined : getValidReaderProfile(defaultProfile.value, profiles)}
values={profiles}
setValue={updateSetting}
valueToDisplayData={createProfileValueToDisplayData(profiles, true)}
defaultIcon={<ManageAccountsIcon />}
/>
);
};

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

@@ -6,6 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
import {
@@ -21,13 +22,18 @@ export const ReaderNavBarDesktopReadingDirection = ({
}: Pick<IReaderSettingsWithDefaultFlag, 'readingDirection'> &
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
setReadingDirection: (readingDirection: ReadingDirection) => void;
}) => (
<ValueRotationButton
{...buttonSelectInputProps}
value={readingDirection.isDefault ? undefined : readingDirection.value}
values={READING_DIRECTION_VALUES}
setValue={setReadingDirection}
valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
/>
);
}) => {
const { t } = useTranslation();
return (
<ValueRotationButton
{...buttonSelectInputProps}
tooltip={t('reader.settings.label.reading_direction')}
value={readingDirection.isDefault ? undefined : readingDirection.value}
values={READING_DIRECTION_VALUES}
setValue={setReadingDirection}
valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
/>
);
};

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

@@ -6,6 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
import {
@@ -21,13 +22,18 @@ export const ReaderNavBarDesktopReadingMode = ({
}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode'> &
Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
setReadingMode: (mode: ReadingMode) => void;
}) => (
<ValueRotationButton
{...buttonSelectInputProps}
value={readingMode.isDefault ? undefined : readingMode.value}
values={READING_MODE_VALUES}
setValue={setReadingMode}
valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
/>
);
}) => {
const { t } = useTranslation();
return (
<ValueRotationButton
{...buttonSelectInputProps}
tooltip={t('reader.settings.label.reading_mode')}
value={readingMode.isDefault ? undefined : readingMode.value}
values={READING_MODE_VALUES}
setValue={setReadingMode}
valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
/>
);
};