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

Handle long theme names

Browse Source
This commit is contained in:
schroda
2024-09-09 22:31:29 +02:00
parent e828e0f801
commit 418af05943
4 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/atoms/TypographyMaxLines.tsx
View File

@@ -21,4 +21,5 @@ export const TypographyMaxLines = styled(Typography, {
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
overflowWrap: 'break-word',
})) as React.FC<TypographyProps & { lines?: number }>; })) as React.FC<TypographyProps & { lines?: number }>;

14
src/screens/settings/appearance/theme/CreateThemeButton.tsx
View File

@@ -7,12 +7,13 @@
*/ */
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import AddCircleIcon from '@mui/icons-material/AddCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle';
import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks'; import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
import Tooltip from '@mui/material/Tooltip';
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx'; import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
export const CreateThemeButton = () => { export const CreateThemeButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -21,11 +22,10 @@ export const CreateThemeButton = () => {
return ( return (
<> <>
<Stack sx={{ alignItems: 'center', gap: 1 }}> <Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
<Button <Button
sx={{ sx={{
minWidth: '150px', width: '100%',
maxWidth: '150px',
height: '225px', height: '225px',
}} }}
variant="contained" variant="contained"
@@ -34,7 +34,11 @@ export const CreateThemeButton = () => {
> >
<AddCircleIcon /> <AddCircleIcon />
</Button> </Button>
<Typography>{t('settings.appearance.theme.create.title')}</Typography> <Tooltip title={t('settings.appearance.theme.create.title')} placement="top">
<TypographyMaxLines sx={{ maxWidth: '100%' }}>
{t('settings.appearance.theme.create.title')}
</TypographyMaxLines>
</Tooltip>
</Stack> </Stack>
{popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />} {popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
</> </>

4
src/screens/settings/appearance/theme/ThemeList.tsx
View File

@@ -60,7 +60,9 @@ export const ThemeList = () => {
} }
return ( return (
<Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 2 }}> <Stack
sx={{ flexDirection: 'row', flexWrap: 'no-wrap', alignItems: 'start', overflowX: 'auto', gap: 1, mx: 2 }}
>
<CreateThemeButton /> <CreateThemeButton />
{allThemes.map((theme) => ( {allThemes.map((theme) => (
<ThemePreview <ThemePreview

6
src/screens/settings/appearance/theme/ThemePreview.tsx
View File

@@ -9,7 +9,6 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useContext, useMemo } from 'react'; import { useContext, useMemo } from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack'; import Stack from '@mui/material/Stack';
import { styled, ThemeProvider } from '@mui/material/styles'; import { styled, ThemeProvider } from '@mui/material/styles';
import CheckCircleIcon from '@mui/icons-material/CheckCircle'; import CheckCircleIcon from '@mui/icons-material/CheckCircle';
@@ -25,6 +24,7 @@ import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/lib/ui/AppThemes.ts
import { createTheme } from '@/theme.ts'; import { createTheme } from '@/theme.ts';
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx'; import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
import { makeToast } from '@/components/util/Toast'; import { makeToast } from '@/components/util/Toast';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
const ThemePreviewBadge = styled(Box)(() => ({ const ThemePreviewBadge = styled(Box)(() => ({
width: '15px', width: '15px',
@@ -208,7 +208,9 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
</CardActionArea> </CardActionArea>
</Card> </Card>
</ThemeProvider> </ThemeProvider>
<Typography>{getName()}</Typography> <Tooltip title={getName()} placement="top">
<TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
</Tooltip>
</Stack> </Stack>
<ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={theme} /> <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={theme} />
</> </>