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

Update download queue styling

Browse Source
This commit is contained in:
schroda
2024-08-31 16:36:03 +02:00
parent 95a687ae37
commit 08ccf1c33d
1 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/screens/DownloadQueue.tsx
View File

@@ -23,6 +23,7 @@ import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'; import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import CardContent from '@mui/material/CardContent';
import { requestManager } from '@/lib/requests/RequestManager.ts'; import { requestManager } from '@/lib/requests/RequestManager.ts';
import { StrictModeDroppable } from '@/lib/StrictModeDroppable'; import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
import { makeToast } from '@/components/util/Toast'; import { makeToast } from '@/components/util/Toast';
@@ -54,43 +55,45 @@ const DownloadChapterItem = ({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<Box {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} sx={{ pt: 1, px: 1 }}> <Box {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} sx={{ p: 1, pb: 0 }}>
<Card <Card
sx={{ sx={{
backgroundColor: isDragging ? 'custom.light' : undefined, backgroundColor: isDragging ? 'custom.light' : undefined,
}} }}
> >
<CardActionArea <CardActionArea component={Link} to={`/manga/${item.manga.id}`}>
component={Link} <CardContent
to={`/manga/${item.manga.id}`} sx={{
sx={{ display: 'flex',
display: 'flex', alignItems: 'center',
alignItems: 'center', p: 1.5,
p: 1, }}
}} >
> <IconButton sx={{ pointerEvents: 'none' }}>
<IconButton sx={{ pointerEvents: 'none' }}> <DragHandle />
<DragHandle />
</IconButton>
<Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6">{item.manga.title}</Typography>
<Typography variant="caption" display="block" gutterBottom>
{item.chapter.name}
</Typography>
</Stack>
<DownloadStateIndicator download={item} />
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton> </IconButton>
</Tooltip> <Stack sx={{ flex: 1, ml: 1 }} direction="column">
<Typography variant="h6" component="h3">
{item.manga.title}
</Typography>
<Typography variant="caption" display="block">
{item.chapter.name}
</Typography>
</Stack>
<DownloadStateIndicator download={item} />
<Tooltip title={t('chapter.action.download.delete.label.action')}>
<IconButton
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDelete(item.chapter);
}}
size="large"
>
<DeleteIcon />
</IconButton>
</Tooltip>
</CardContent>
</CardActionArea> </CardActionArea>
</Card> </Card>
</Box> </Box>