Use AwaitableComponent for "CreateThemeDialog"
This commit is contained in:
schroda
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
import AddCircleIcon from '@mui/icons-material/AddCircle';
|
||||
import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
|
||||
import { AwaitableComponent } from 'awaitable-component';
|
||||
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
||||
import { ThemeCreationDialog } from '@/features/theme/components/CreateThemeDialog.tsx';
|
||||
import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
|
||||
@@ -18,29 +18,26 @@ import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.t
|
||||
export const CreateThemeButton = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const popupState = usePopupState({ variant: 'popover', popupId: 'theme-creation-dialog' });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
|
||||
<Button
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '225px',
|
||||
}}
|
||||
variant="contained"
|
||||
size="large"
|
||||
{...bindTrigger(popupState)}
|
||||
>
|
||||
<AddCircleIcon fontSize="large" />
|
||||
</Button>
|
||||
<CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
|
||||
<TypographyMaxLines sx={{ maxWidth: '100%' }}>
|
||||
{t('settings.appearance.theme.create.title')}
|
||||
</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
{popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
|
||||
</>
|
||||
<Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
|
||||
<Button
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '225px',
|
||||
}}
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => {
|
||||
AwaitableComponent.show(ThemeCreationDialog, { mode: 'create' });
|
||||
}}
|
||||
>
|
||||
<AddCircleIcon fontSize="large" />
|
||||
</Button>
|
||||
<CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
|
||||
<TypographyMaxLines sx={{ maxWidth: '100%' }}>
|
||||
{t('settings.appearance.theme.create.title')}
|
||||
</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -11,7 +11,6 @@ import { useState } from 'react';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
import { bindDialog } from 'material-ui-popup-state/hooks';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
@@ -19,6 +18,7 @@ import DialogActions from '@mui/material/DialogActions';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Link from '@mui/material/Link';
|
||||
import { jsonrepair } from 'jsonrepair';
|
||||
import { AwaitableComponentProps } from 'awaitable-component';
|
||||
import { getErrorMessage, jsonSaveParse } from '@/lib/HelperFunctions.ts';
|
||||
import { AppTheme, isThemeNameUnique } from '@/features/theme/services/AppThemes.ts';
|
||||
import {
|
||||
@@ -91,11 +91,13 @@ const dialogModeToTranslationKey: Record<
|
||||
};
|
||||
|
||||
export const ThemeCreationDialog = ({
|
||||
bindDialogProps,
|
||||
mode,
|
||||
appTheme = baseCustomTheme,
|
||||
}: {
|
||||
bindDialogProps: ReturnType<typeof bindDialog>;
|
||||
isVisible,
|
||||
onExitComplete,
|
||||
onSubmit,
|
||||
onDismiss,
|
||||
}: AwaitableComponentProps<void> & {
|
||||
mode: DialogMode;
|
||||
appTheme?: AppTheme;
|
||||
}) => {
|
||||
@@ -117,7 +119,7 @@ export const ThemeCreationDialog = ({
|
||||
const [didThemeChange, setDidThemeChange] = useState(mode === 'create');
|
||||
|
||||
return (
|
||||
<Dialog {...bindDialogProps} fullWidth maxWidth="md">
|
||||
<Dialog open={isVisible} onTransitionExited={onExitComplete} fullWidth maxWidth="md">
|
||||
<DialogTitle>{t(dialogModeToTranslationKey[mode].title)}</DialogTitle>
|
||||
<DialogContent>
|
||||
{loading && <LoadingPlaceholder />}
|
||||
@@ -212,12 +214,12 @@ export const ThemeCreationDialog = ({
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button autoFocus onClick={bindDialogProps.onClose} color="primary">
|
||||
<Button autoFocus onClick={() => onDismiss()} color="primary">
|
||||
{t('global.button.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
disabled={invalidTheme || invalidName || isCreating || !didThemeChange || !theme.id.length}
|
||||
onClick={(e) => {
|
||||
onClick={() => {
|
||||
makeToast(t(dialogModeToTranslationKey[mode].action, { theme: theme.getName() }), 'info');
|
||||
|
||||
setIsCreating(true);
|
||||
@@ -227,7 +229,7 @@ export const ThemeCreationDialog = ({
|
||||
t(dialogModeToTranslationKey[mode].success, { theme: theme.getName() }),
|
||||
'success',
|
||||
);
|
||||
bindDialogProps.onClose(e);
|
||||
onSubmit();
|
||||
})
|
||||
.catch((updateError) =>
|
||||
makeToast(
|
||||
|
||||
@@ -17,7 +17,7 @@ import CardActionArea from '@mui/material/CardActionArea';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
|
||||
import { AwaitableComponent } from 'awaitable-component';
|
||||
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
|
||||
import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
|
||||
import { AppTheme } from '@/features/theme/services/AppThemes.ts';
|
||||
@@ -40,8 +40,6 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
|
||||
const theme = useTheme();
|
||||
const { themeMode, setAppTheme, appTheme: activeAppTheme, shouldUsePureBlackMode } = useAppThemeContext();
|
||||
|
||||
const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${appTheme.id}` });
|
||||
|
||||
const isSelected = appTheme.id === activeAppTheme;
|
||||
|
||||
const muiTheme = useMemo(
|
||||
@@ -50,191 +48,190 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minWidth: '150px',
|
||||
maxWidth: '150px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<ThemeProvider theme={muiTheme}>
|
||||
<Card
|
||||
<Stack
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minWidth: '150px',
|
||||
maxWidth: '150px',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<ThemeProvider theme={muiTheme}>
|
||||
<Card
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '225px',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '225px',
|
||||
position: 'relative',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
border: '4px solid',
|
||||
borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['100'],
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
borderRadius: 1,
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['900'],
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<CardActionArea
|
||||
sx={{
|
||||
height: '100%',
|
||||
backgroundColor: 'background.default',
|
||||
}}
|
||||
onClick={() => {
|
||||
const needToLoadFonts = ThemeFontLoader.hasMissing(appTheme.muiTheme);
|
||||
if (!needToLoadFonts) {
|
||||
setAppTheme(appTheme.id);
|
||||
return;
|
||||
}
|
||||
|
||||
makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
|
||||
ThemeFontLoader.load(appTheme.muiTheme)
|
||||
.then(() => setAppTheme(appTheme.id))
|
||||
.catch((e) =>
|
||||
makeToast(
|
||||
t('settings.appearance.theme.select.fonts.error'),
|
||||
'error',
|
||||
getErrorMessage(e),
|
||||
),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
border: '4px solid',
|
||||
borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['100'],
|
||||
zIndex: 1,
|
||||
pointerEvents: 'none',
|
||||
borderRadius: 1,
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: isSelected
|
||||
? muiTheme.palette.primary.light
|
||||
: muiTheme.palette.grey['900'],
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<CardActionArea
|
||||
sx={{
|
||||
height: '100%',
|
||||
backgroundColor: 'background.default',
|
||||
}}
|
||||
onClick={() => {
|
||||
const needToLoadFonts = ThemeFontLoader.hasMissing(appTheme.muiTheme);
|
||||
if (!needToLoadFonts) {
|
||||
setAppTheme(appTheme.id);
|
||||
return;
|
||||
}
|
||||
|
||||
makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
|
||||
ThemeFontLoader.load(appTheme.muiTheme)
|
||||
.then(() => setAppTheme(appTheme.id))
|
||||
.catch((e) =>
|
||||
makeToast(
|
||||
t('settings.appearance.theme.select.fonts.error'),
|
||||
'error',
|
||||
getErrorMessage(e),
|
||||
),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Stack sx={{ height: '100%', m: 0 }}>
|
||||
<Stack sx={{ height: '100%', gap: 2, p: 2 }}>
|
||||
<Stack
|
||||
sx={{
|
||||
maxHeight: '20px',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '65%',
|
||||
height: '20px',
|
||||
backgroundColor: 'primary.dark',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
<Stack
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
mt: -0.25,
|
||||
}}
|
||||
>
|
||||
{isSelected && (
|
||||
<CheckCircleIcon
|
||||
sx={{
|
||||
visibility: isSelected ? 'visible' : 'hidden',
|
||||
color: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!isSelected && appTheme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
sx={{ mt: -0.5 }}
|
||||
>
|
||||
<CustomTooltip title={t('global.button.delete')}>
|
||||
<DeleteIcon />
|
||||
</CustomTooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
{appTheme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
popupState.open();
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
>
|
||||
<CustomTooltip title={t('global.button.edit')}>
|
||||
<EditIcon />
|
||||
</CustomTooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
width: '55%',
|
||||
height: '65%',
|
||||
backgroundColor: 'background.paper',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
sx={{
|
||||
width: 'max-content',
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack sx={{ height: '100%', m: 0 }}>
|
||||
<Stack sx={{ height: '100%', gap: 2, p: 2 }}>
|
||||
<Stack
|
||||
sx={{
|
||||
height: '25%',
|
||||
backgroundColor: 'background.paper',
|
||||
alignItems: 'center',
|
||||
maxHeight: '20px',
|
||||
flexDirection: 'row',
|
||||
gap: 2,
|
||||
p: 2,
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'primary.main',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
width: '65%',
|
||||
height: '20px',
|
||||
backgroundColor: 'primary.dark',
|
||||
borderRadius: 1,
|
||||
backgroundColor: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
<Stack
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
mt: -0.25,
|
||||
}}
|
||||
>
|
||||
{isSelected && (
|
||||
<CheckCircleIcon
|
||||
sx={{
|
||||
visibility: isSelected ? 'visible' : 'hidden',
|
||||
color: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!isSelected && appTheme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
sx={{ mt: -0.5 }}
|
||||
>
|
||||
<CustomTooltip title={t('global.button.delete')}>
|
||||
<DeleteIcon />
|
||||
</CustomTooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
{appTheme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
AwaitableComponent.show(ThemeCreationDialog, {
|
||||
mode: 'edit',
|
||||
appTheme,
|
||||
});
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
>
|
||||
<CustomTooltip title={t('global.button.edit')}>
|
||||
<EditIcon />
|
||||
</CustomTooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
width: '55%',
|
||||
height: '65%',
|
||||
backgroundColor: 'background.paper',
|
||||
p: 1,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
sx={{
|
||||
width: 'max-content',
|
||||
flexDirection: 'row',
|
||||
overflow: 'hidden',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
>
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
<CustomTooltip title={getName()} placement="top">
|
||||
<TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={appTheme} />
|
||||
</>
|
||||
<Stack
|
||||
sx={{
|
||||
height: '25%',
|
||||
backgroundColor: 'background.paper',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: 2,
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'primary.main',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: '20px',
|
||||
borderRadius: 1,
|
||||
backgroundColor: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
<CustomTooltip title={getName()} placement="top">
|
||||
<TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
|
||||
</CustomTooltip>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user