Structure "reader" in sub-features
This commit is contained in:
schroda
261
src/features/reader/hotkeys/ReaderHotkeys.tsx
Normal file
261
src/features/reader/hotkeys/ReaderHotkeys.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
/*
|
||||
* 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 { useHotkeys as useHotKeysHook, useHotkeysContext } from 'react-hotkeys-hook';
|
||||
import { useEffect } from 'react';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { HOTKEY_SCOPES } from '@/features/hotkeys/Hotkeys.constants.ts';
|
||||
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
|
||||
import { IReaderSettings, ReaderHotkey } from '@/features/reader/Reader.types.ts';
|
||||
import { useReaderOverlayContext } from '@/features/reader/overlay/contexts/ReaderOverlayContext.tsx';
|
||||
import { getNextRotationValue } from '@/features/core/utils/ValueRotationButton.utils.ts';
|
||||
import {
|
||||
AUTO_SCROLL_SPEED,
|
||||
CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION,
|
||||
READER_PAGE_SCALE_MODE_VALUES,
|
||||
READING_DIRECTION_VALUES,
|
||||
READING_MODE_VALUES,
|
||||
} from '@/features/reader/settings/ReaderSettings.constants.tsx';
|
||||
import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
|
||||
import { HotkeyScope } from '@/features/hotkeys/Hotkeys.types.ts';
|
||||
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
|
||||
import { ScrollOffset } from '@/features/core/Core.types.ts';
|
||||
import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
|
||||
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
|
||||
import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/contexts/ReaderAutoScrollContext.tsx';
|
||||
import { useReaderTapZoneContext } from '@/features/reader/tap-zones/contexts/ReaderTapZoneContext.tsx';
|
||||
|
||||
const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
|
||||
const [keys, callback, options, dependencies] = args;
|
||||
return useHotKeysHook(keys, callback, { ...options, ...HOTKEY_SCOPES.reader }, dependencies);
|
||||
};
|
||||
|
||||
const updateSettingCycleThrough = <Setting extends keyof IReaderSettings>(
|
||||
updateSetting: ReturnType<typeof ReaderService.useCreateUpdateSetting>,
|
||||
deleteSetting: ReturnType<typeof ReaderService.useCreateDeleteSetting>,
|
||||
setting: Setting,
|
||||
value: IReaderSettings[Setting],
|
||||
values: IReaderSettings[Setting][],
|
||||
isDefault: boolean,
|
||||
isDefaultable: boolean,
|
||||
) => {
|
||||
if (isDefault) {
|
||||
updateSetting(setting, values[0]);
|
||||
return;
|
||||
}
|
||||
|
||||
const nextValue = getNextRotationValue(values.indexOf(value), values, isDefaultable);
|
||||
|
||||
const isDefaultNextValue = nextValue === undefined;
|
||||
if (isDefaultNextValue) {
|
||||
deleteSetting(setting);
|
||||
return;
|
||||
}
|
||||
|
||||
updateSetting(setting, nextValue);
|
||||
};
|
||||
|
||||
export const ReaderHotkeys = ({
|
||||
scrollElementRef,
|
||||
}: {
|
||||
scrollElementRef: React.MutableRefObject<HTMLElement | null>;
|
||||
}) => {
|
||||
const { direction: themeDirection } = useTheme();
|
||||
const readerThemeDirection = ReaderService.useGetThemeDirection();
|
||||
const { enableScope, disableScope } = useHotkeysContext();
|
||||
const { manga } = useReaderStateMangaContext();
|
||||
const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
|
||||
const {
|
||||
hotkeys,
|
||||
pageScaleMode,
|
||||
shouldStretchPage,
|
||||
shouldOffsetDoubleSpreads,
|
||||
readingMode,
|
||||
readingDirection,
|
||||
autoScroll,
|
||||
scrollAmount,
|
||||
} = ReaderService.useSettings();
|
||||
const automaticScrolling = useReaderAutoScrollContext();
|
||||
const { setShowPreview } = useReaderTapZoneContext();
|
||||
const exitReader = ReaderService.useExit();
|
||||
|
||||
const openChapter = ReaderControls.useOpenChapter();
|
||||
const openPage = ReaderControls.useOpenPage();
|
||||
|
||||
const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
|
||||
const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
|
||||
|
||||
useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]);
|
||||
useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => openPage('next'), [openPage]);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.SCROLL_BACKWARD],
|
||||
() => {
|
||||
if (automaticScrolling.isActive) {
|
||||
automaticScrolling.setDirection(ScrollOffset.BACKWARD);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!scrollElementRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
ReaderControls.scroll(
|
||||
ScrollOffset.BACKWARD,
|
||||
CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
|
||||
readingMode.value,
|
||||
readingDirection.value,
|
||||
themeDirection,
|
||||
scrollElementRef.current,
|
||||
openChapter,
|
||||
setIsOverlayVisible,
|
||||
setShowPreview,
|
||||
scrollAmount,
|
||||
);
|
||||
},
|
||||
{ preventDefault: true },
|
||||
[
|
||||
readingMode.value,
|
||||
readingDirection.value,
|
||||
themeDirection,
|
||||
openChapter,
|
||||
scrollAmount,
|
||||
automaticScrolling.isActive,
|
||||
],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.SCROLL_FORWARD],
|
||||
() => {
|
||||
if (automaticScrolling.isActive) {
|
||||
automaticScrolling.setDirection(ScrollOffset.FORWARD);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!scrollElementRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
ReaderControls.scroll(
|
||||
ScrollOffset.FORWARD,
|
||||
CONTINUOUS_READING_MODE_TO_SCROLL_DIRECTION[readingMode.value],
|
||||
readingMode.value,
|
||||
readingDirection.value,
|
||||
themeDirection,
|
||||
scrollElementRef.current,
|
||||
openChapter,
|
||||
setIsOverlayVisible,
|
||||
setShowPreview,
|
||||
scrollAmount,
|
||||
);
|
||||
},
|
||||
{ preventDefault: true },
|
||||
[
|
||||
readingMode.value,
|
||||
readingDirection.value,
|
||||
themeDirection,
|
||||
openChapter,
|
||||
scrollAmount,
|
||||
automaticScrolling.isActive,
|
||||
],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
|
||||
() => openChapter(getOptionForDirection('previous', 'next', readerThemeDirection)),
|
||||
[openChapter, readerThemeDirection],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.NEXT_CHAPTER],
|
||||
() => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
|
||||
[openChapter, readerThemeDirection],
|
||||
);
|
||||
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsOverlayVisible(!isVisible), [isVisible]);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
|
||||
() => {
|
||||
updateSettingCycleThrough(
|
||||
updateSetting,
|
||||
deleteSetting,
|
||||
'pageScaleMode',
|
||||
pageScaleMode.value,
|
||||
READER_PAGE_SCALE_MODE_VALUES,
|
||||
pageScaleMode.isDefault,
|
||||
true,
|
||||
);
|
||||
},
|
||||
[updateSetting, deleteSetting, pageScaleMode.value, pageScaleMode.isDefault],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.STRETCH_IMAGE],
|
||||
() => updateSetting('shouldStretchPage', !shouldStretchPage.value),
|
||||
[updateSetting, shouldStretchPage.value],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES],
|
||||
() => updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value),
|
||||
[updateSetting, shouldOffsetDoubleSpreads.value],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.CYCLE_READING_MODE],
|
||||
() => {
|
||||
updateSettingCycleThrough(
|
||||
updateSetting,
|
||||
deleteSetting,
|
||||
'readingMode',
|
||||
readingMode.value,
|
||||
READING_MODE_VALUES,
|
||||
readingMode.isDefault,
|
||||
true,
|
||||
);
|
||||
},
|
||||
[updateSetting, deleteSetting, readingMode.value, readingMode.isDefault],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION],
|
||||
() => {
|
||||
updateSettingCycleThrough(
|
||||
updateSetting,
|
||||
deleteSetting,
|
||||
'readingDirection',
|
||||
readingDirection.value,
|
||||
READING_DIRECTION_VALUES,
|
||||
readingDirection.isDefault,
|
||||
true,
|
||||
);
|
||||
},
|
||||
[updateSetting, deleteSetting, readingDirection.value, readingDirection.isDefault],
|
||||
);
|
||||
useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], automaticScrolling.toggleActive, { preventDefault: true }, [
|
||||
automaticScrolling.toggleActive,
|
||||
]);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE],
|
||||
() =>
|
||||
updateSetting('autoScroll', {
|
||||
...autoScroll,
|
||||
value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step),
|
||||
}),
|
||||
[updateSetting, autoScroll.value],
|
||||
);
|
||||
useHotkeys(
|
||||
hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE],
|
||||
() =>
|
||||
updateSetting('autoScroll', {
|
||||
...autoScroll,
|
||||
value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step),
|
||||
}),
|
||||
[updateSetting, autoScroll.value],
|
||||
);
|
||||
useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]);
|
||||
|
||||
useEffect(() => {
|
||||
enableScope(HotkeyScope.READER);
|
||||
|
||||
return () => disableScope(HotkeyScope.READER);
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { ReaderSettingsTypeProps } from '@/features/reader/Reader.types.ts';
|
||||
import { ReaderSettingHotkey } from '@/features/reader/hotkeys/settings/components/ReaderSettingHotkey.tsx';
|
||||
import { READER_HOTKEYS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
|
||||
import { ResetButton } from '@/features/core/components/buttons/ResetButton.tsx';
|
||||
|
||||
export const ReaderHotkeysSettings = ({ settings, updateSetting, onDefault }: ReaderSettingsTypeProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Stack sx={{ gap: 2 }}>
|
||||
<Stack sx={{ alignItems: 'end' }}>
|
||||
<Typography variant="caption">{t('hotkeys.info.delete')}</Typography>
|
||||
</Stack>
|
||||
{READER_HOTKEYS.map((hotkey) => (
|
||||
<ReaderSettingHotkey
|
||||
key={hotkey}
|
||||
hotkey={hotkey}
|
||||
keys={settings.hotkeys[hotkey]}
|
||||
existingKeys={Object.values(settings.hotkeys).flat()}
|
||||
updateSetting={(keys) => updateSetting('hotkeys', { ...settings.hotkeys, [hotkey]: keys })}
|
||||
/>
|
||||
))}
|
||||
<Stack sx={{ alignItems: 'end' }}>
|
||||
<ResetButton onClick={() => onDefault?.('hotkeys')} variant="outlined" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
45
src/features/reader/hotkeys/settings/components/Hotkey.tsx
Normal file
45
src/features/reader/hotkeys/settings/components/Hotkey.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* 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 { Fragment } from 'react';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { Kbd } from '@/features/core/components/texts/Kbd.tsx';
|
||||
|
||||
export const Hotkey = ({ keys, removeKey }: { keys: string[]; removeKey?: (key: string) => void }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
|
||||
{keys.map((key, index) => (
|
||||
<Fragment key={key}>
|
||||
<CustomTooltip title={t('global.button.delete')} hidden={!removeKey}>
|
||||
<Stack
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 0.5,
|
||||
cursor: removeKey ? 'pointer' : undefined,
|
||||
}}
|
||||
onClick={() => removeKey?.(key)}
|
||||
>
|
||||
{key.split('+').map((splitKey, splitIndex, splitKeys) => (
|
||||
<Fragment key={splitKey}>
|
||||
<Kbd>{splitKey}</Kbd>
|
||||
{splitIndex === splitKeys.length - 1 ? '' : '+'}
|
||||
</Fragment>
|
||||
))}
|
||||
</Stack>
|
||||
</CustomTooltip>
|
||||
{index === keys.length - 1 ? '' : ','}
|
||||
</Fragment>
|
||||
))}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
|
||||
import { ReaderHotkey } from '@/features/reader/Reader.types.ts';
|
||||
import { DEFAULT_READER_SETTINGS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
|
||||
import { TranslationKey } from '@/Base.types.ts';
|
||||
import { RecordHotkey } from '@/features/reader/hotkeys/settings/components/RecordHotkey.tsx';
|
||||
import { Hotkey } from '@/features/reader/hotkeys/settings/components/Hotkey.tsx';
|
||||
import { ResetButton } from '@/features/core/components/buttons/ResetButton.tsx';
|
||||
|
||||
const READER_HOTKEY_TO_TITLE: Record<ReaderHotkey, TranslationKey> = {
|
||||
[ReaderHotkey.PREVIOUS_PAGE]: 'reader.settings.hotkey.previous_page',
|
||||
[ReaderHotkey.NEXT_PAGE]: 'reader.settings.hotkey.next_page',
|
||||
[ReaderHotkey.SCROLL_BACKWARD]: 'reader.settings.hotkey.scroll_backward',
|
||||
[ReaderHotkey.SCROLL_FORWARD]: 'reader.settings.hotkey.scroll_forward',
|
||||
[ReaderHotkey.PREVIOUS_CHAPTER]: 'reader.settings.hotkey.previous_chapter',
|
||||
[ReaderHotkey.NEXT_CHAPTER]: 'reader.settings.hotkey.next_chapter',
|
||||
[ReaderHotkey.TOGGLE_MENU]: 'reader.settings.hotkey.menu',
|
||||
[ReaderHotkey.CYCLE_SCALE_TYPE]: 'reader.settings.hotkey.scale_type',
|
||||
[ReaderHotkey.STRETCH_IMAGE]: 'reader.settings.hotkey.stretch_image',
|
||||
[ReaderHotkey.OFFSET_SPREAD_PAGES]: 'reader.settings.hotkey.offset_spread_pages',
|
||||
[ReaderHotkey.CYCLE_READING_MODE]: 'reader.settings.hotkey.reading_mode',
|
||||
[ReaderHotkey.CYCLE_READING_DIRECTION]: 'reader.settings.hotkey.reading_direction',
|
||||
[ReaderHotkey.TOGGLE_AUTO_SCROLL]: 'reader.settings.hotkey.auto_scroll',
|
||||
[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE]: 'reader.settings.hotkey.auto_scroll_speed_increase',
|
||||
[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE]: 'reader.settings.hotkey.auto_scroll_speed_decrease',
|
||||
[ReaderHotkey.EXIT_READER]: 'reader.button.exit',
|
||||
};
|
||||
|
||||
export const ReaderSettingHotkey = ({
|
||||
hotkey,
|
||||
keys,
|
||||
existingKeys,
|
||||
updateSetting,
|
||||
}: {
|
||||
hotkey: ReaderHotkey;
|
||||
keys: string[];
|
||||
existingKeys: string[];
|
||||
updateSetting: (keys: string[]) => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const popupState = usePopupState({ popupId: 'reader-setting-record-hotkey', variant: 'dialog' });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
|
||||
<Typography sx={{ flexGrow: 1 }}>{t(READER_HOTKEY_TO_TITLE[hotkey])}</Typography>
|
||||
<Hotkey
|
||||
keys={keys}
|
||||
removeKey={(keyToRemove) => updateSetting(keys.filter((key) => key !== keyToRemove))}
|
||||
/>
|
||||
<CustomTooltip title={t('global.button.add')}>
|
||||
<IconButton {...bindTrigger(popupState)} color="inherit">
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
</CustomTooltip>
|
||||
<ResetButton asIconButton onClick={() => updateSetting(DEFAULT_READER_SETTINGS.hotkeys[hotkey])} />
|
||||
</Stack>
|
||||
{popupState.isOpen && (
|
||||
<RecordHotkey
|
||||
onClose={popupState.close}
|
||||
onCreate={(recordedKeys) => updateSetting([...keys, ...recordedKeys])}
|
||||
existingKeys={existingKeys}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,91 @@
|
||||
/*
|
||||
* 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 { useEffect } from 'react';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { useRecordHotkeys } from 'react-hotkeys-hook';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import Button from '@mui/material/Button';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Hotkey } from '@/features/reader/hotkeys/settings/components/Hotkey.tsx';
|
||||
|
||||
export const RecordHotkey = ({
|
||||
onClose,
|
||||
onCreate,
|
||||
existingKeys,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
onCreate: (keys: string[]) => void;
|
||||
existingKeys: string[];
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [recordedKeys, { start, stop, resetKeys }] = useRecordHotkeys();
|
||||
const keys = [[...recordedKeys].join('+')];
|
||||
const isExistingKey = keys.some((key) =>
|
||||
existingKeys.map((existingKey) => existingKey.toLowerCase()).includes(key.toLowerCase()),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
start();
|
||||
|
||||
return () => {
|
||||
stop();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog open onClose={onClose} fullWidth>
|
||||
<DialogTitle>{t('hotkeys.create.dialog.title')}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack sx={{ flexDirection: 'row', gap: 1 }}>
|
||||
<Trans
|
||||
i18nKey="hotkeys.create.dialog.label"
|
||||
components={{
|
||||
Keys: recordedKeys.size ? (
|
||||
<Hotkey keys={keys} />
|
||||
) : (
|
||||
<Typography>{t('hotkeys.create.dialog.placeholder')}</Typography>
|
||||
),
|
||||
}}
|
||||
>
|
||||
Recorded keys:
|
||||
</Trans>
|
||||
</Stack>
|
||||
{isExistingKey && <Typography color="error">{t('hotkeys.create.error.exists')}</Typography>}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Stack
|
||||
direction="row"
|
||||
sx={{
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Button onClick={resetKeys}>{t('global.button.reset')}</Button>
|
||||
<Stack direction="row">
|
||||
<Button onClick={onClose}>{t('global.button.cancel')}</Button>
|
||||
<Button
|
||||
disabled={isExistingKey}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
onCreate(keys);
|
||||
}}
|
||||
>
|
||||
{t('global.button.create')}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user