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

add filter and badge for downloadCount (#62)

Browse Source 
* Added the Download filter and download badge

* Update src/components/library/LibraryMangaGrid.tsx

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>

* - corrected some spelling mistakes

Co-authored-by: Sascha Hahne <ntbm@users.noreply.github.com>
This commit is contained in:
abhijeetChawla
2021-11-07 15:59:48 +05:30
committed by GitHub
parent f816abfdc9
commit 42c5c3042d
5 changed files with 63 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/MangaCard.tsx
View File

@@ -40,17 +40,21 @@ const MangaTitle = styled(Typography)({
textShadow: '0px 0px 3px #000000',
});
const UnreadBadge = styled(Typography)(({ theme }) => ({
const BadgeContainer = styled('div')({
display: 'flex',
position: 'absolute',
top: 2,
left: 2,
backgroundColor: theme.palette.primary.dark,
top: 5,
left: 5,
height: 'fit-content',
borderRadius: '5px',
color: 'white',
padding: '0.1em',
paddingInline: '0.3em',
fontSize: '1.05rem',
}));
overflow: 'hidden',
'& p': {
color: 'white',
padding: '0.1em',
paddingInline: '0.2em',
fontSize: '1.05rem',
},
});
const truncateText = (str: string, maxLength: number) => {
const ending = '...';
@@ -69,7 +73,7 @@ interface IProps {
const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
const {
manga: {
id, title, thumbnailUrl, unreadCount: unread,
id, title, thumbnailUrl, downloadCount, unreadCount: unread,
},
} = props;
@@ -93,12 +97,24 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
height: '100%',
}}
>
{unread! > 0
&& (
<UnreadBadge>
<BadgeContainer>
{unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</UnreadBadge>
) }
</Typography>
)}
{downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
<SpinnerImage
alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
@@ -107,7 +123,6 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
width: '100%',
}}
spinnerStyle={{
minHeight: '400px',
display: 'grid',
placeItems: 'center',
}}