Simplify changing reader desktop quick settings

This commit is contained in:
schroda
2026-06-02 15:00:39 +02:00
parent 2964612da1
commit 78e2a99847
7 changed files with 179 additions and 18 deletions

View File

@@ -10,7 +10,6 @@ import Stack from '@mui/material/Stack';
import FitScreenIcon from '@mui/icons-material/FitScreen';
import { useLingui } from '@lingui/react/macro';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
import type {
IReaderSettings,
IReaderSettingsWithDefaultFlag,
@@ -23,6 +22,7 @@ import {
} from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { CustomIconButton } from '@/base/components/buttons/CustomIconButton.tsx';
import type { SelectButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
import { SelectButton } from '@/base/components/buttons/SelectButton.tsx';
export const ReaderNavBarDesktopPageScale = ({
pageScaleMode,
@@ -40,7 +40,7 @@ export const ReaderNavBarDesktopPageScale = ({
return (
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
<ValueRotationButton
<SelectButton<ReaderPageScaleMode>
{...buttonSelectInputProps}
tooltip={t`Scale type`}
value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
@@ -49,6 +49,7 @@ export const ReaderNavBarDesktopPageScale = ({
setValue={(value) => updateSetting('pageScaleMode', value)}
valueToDisplayData={PAGE_SCALE_VALUE_TO_DISPLAY_DATA}
defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
isCollapsible
/>
{READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
<CustomTooltip title={t`Stretch small pages`}>

View File

@@ -7,7 +7,6 @@
*/
import { useLingui } from '@lingui/react/macro';
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
import type { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
import {
READING_DIRECTION_VALUES,
@@ -15,6 +14,7 @@ import {
} from '@/features/reader/settings/ReaderSettings.constants.tsx';
import type { SelectButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
import { SelectButton } from '@/base/components/buttons/SelectButton.tsx';
export const ReaderNavBarDesktopReadingDirection = ({
readingDirection,
@@ -27,7 +27,7 @@ export const ReaderNavBarDesktopReadingDirection = ({
const { t } = useLingui();
return (
<ValueRotationButton
<SelectButton
{...buttonSelectInputProps}
tooltip={t`Reading direction`}
value={readingDirection.isDefault ? undefined : readingDirection.value}
@@ -36,6 +36,7 @@ export const ReaderNavBarDesktopReadingDirection = ({
setValue={setReadingDirection}
valueToDisplayData={READING_DIRECTION_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_DIRECTION_VALUE_TO_DISPLAY_DATA[readingDirection.value].icon}
isCollapsible
/>
);
};

View File

@@ -7,7 +7,6 @@
*/
import { useLingui } from '@lingui/react/macro';
import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
import type { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
import {
READING_MODE_VALUE_TO_DISPLAY_DATA,
@@ -15,6 +14,7 @@ import {
} from '@/features/reader/settings/ReaderSettings.constants.tsx';
import type { SelectButtonDefaultableProps } from '@/base/components/buttons/SelectButton.tsx';
import { SelectButton } from '@/base/components/buttons/SelectButton.tsx';
export const ReaderNavBarDesktopReadingMode = ({
readingMode,
@@ -27,7 +27,7 @@ export const ReaderNavBarDesktopReadingMode = ({
const { t } = useLingui();
return (
<ValueRotationButton
<SelectButton
{...buttonSelectInputProps}
tooltip={t`Reading mode`}
value={readingMode.isDefault ? undefined : readingMode.value}
@@ -36,6 +36,7 @@ export const ReaderNavBarDesktopReadingMode = ({
setValue={setReadingMode}
valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
defaultIcon={READING_MODE_VALUE_TO_DISPLAY_DATA[readingMode.value].icon}
isCollapsible
/>
);
};