Use custom themes
This commit is contained in:
schroda
185
src/screens/settings/appearance/theme/ThemePreview.tsx
Normal file
185
src/screens/settings/appearance/theme/ThemePreview.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
/*
|
||||
* 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 { useTranslation } from 'react-i18next';
|
||||
import { useContext, useMemo } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import { styled, ThemeProvider } from '@mui/material/styles';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardActionArea from '@mui/material/CardActionArea';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
|
||||
import { ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
|
||||
import { AppTheme } from '@/lib/ui/AppThemes.ts';
|
||||
import { createTheme } from '@/theme.ts';
|
||||
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
|
||||
|
||||
const ThemePreviewBadge = styled(Box)(({ theme }) => ({
|
||||
width: '15px',
|
||||
height: '20px',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
}));
|
||||
|
||||
export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: () => void }) => {
|
||||
const { getName } = theme;
|
||||
|
||||
const { t } = useTranslation();
|
||||
const { themeMode, setAppTheme, appTheme, pureBlackMode } = useContext(ThemeModeContext);
|
||||
|
||||
const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${theme.id}` });
|
||||
|
||||
const isSelected = theme.id === appTheme;
|
||||
|
||||
const muiTheme = useMemo(() => createTheme(themeMode, theme, pureBlackMode), [theme, themeMode, pureBlackMode]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack
|
||||
sx={{
|
||||
m: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minWidth: '150px',
|
||||
maxWidth: '150px',
|
||||
gap: 1,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<ThemeProvider theme={muiTheme}>
|
||||
<Card
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '225px',
|
||||
outline: '4px solid',
|
||||
outlineColor: isSelected
|
||||
? muiTheme.palette.primary.light
|
||||
: muiTheme.palette.background.paper,
|
||||
borderRadius: 1,
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<CardActionArea
|
||||
sx={{ height: '100%', backgroundColor: 'background.default' }}
|
||||
onClick={() => setAppTheme(theme.id)}
|
||||
>
|
||||
<Stack sx={{ height: '100%' }}>
|
||||
<Stack sx={{ height: '100%', gap: 2, p: 1 }}>
|
||||
<Stack
|
||||
sx={{
|
||||
maxHeight: '20px',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '65%',
|
||||
height: '20px',
|
||||
backgroundColor: 'primary.dark',
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
<Stack sx={{ height: '100%', alignItems: 'center', gap: 1 }}>
|
||||
{isSelected && (
|
||||
<CheckCircleIcon
|
||||
sx={{
|
||||
visibility: isSelected ? 'visible' : 'hidden',
|
||||
color: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!isSelected && theme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onDelete();
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
>
|
||||
<Tooltip title={t('global.button.delete')}>
|
||||
<DeleteIcon />
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
{theme.isCustom && (
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
popupState.open();
|
||||
}}
|
||||
component="div"
|
||||
size="small"
|
||||
>
|
||||
<Tooltip title={t('global.button.edit')}>
|
||||
<EditIcon />
|
||||
</Tooltip>
|
||||
</IconButton>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{
|
||||
flexDirection: 'row',
|
||||
width: '55%',
|
||||
height: '65%',
|
||||
backgroundColor: 'background.paper',
|
||||
borderRadius: 1,
|
||||
p: 1,
|
||||
}}
|
||||
>
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
|
||||
<ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack
|
||||
sx={{
|
||||
height: '80px',
|
||||
backgroundColor: muiTheme.palette.background.paper,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'row',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'primary.main',
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 0.75,
|
||||
height: '20px',
|
||||
borderRadius: 1,
|
||||
backgroundColor: 'primary.light',
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</ThemeProvider>
|
||||
<Typography>{getName()}</Typography>
|
||||
</Stack>
|
||||
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={theme} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user