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

Use AwaitableComponent for "CreateThemeDialog"

Browse Source
This commit is contained in:
schroda
2026-01-02 22:19:32 +01:00
parent fd856c5cbd
commit bc06d88db0
3 changed files with 201 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/features/theme/components/CreateThemeButton.tsx
View File

@@ -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>
);
};