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

in library badge to manga in sources (#156)

Browse Source 
* add the in library badge to manga in sources

* other layouts done
This commit is contained in:
robo
2022-03-11 15:54:45 +00:00
committed by GitHub
parent 33c9defdd9
commit 841b945ca5
4 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/MangaCard.tsx
View File

@@ -75,7 +75,8 @@ interface IProps {
const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => { const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref) => {
const { const {
manga: { manga: {
id, title, thumbnailUrl, downloadCount, unreadCount: unread, // eslint-disable-next-line @typescript-eslint/no-unused-vars
id, title, thumbnailUrl, downloadCount, unreadCount: unread, inLibrary,
}, },
gridLayout, gridLayout,
} = props; } = props;
@@ -110,6 +111,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
> >
<BadgeContainer> <BadgeContainer>
{inLibrary && (
<Typography
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
>
In library
</Typography>
)}
{ showUnreadBadge && unread! > 0 && ( { showUnreadBadge && unread! > 0 && (
<Typography <Typography
sx={{ backgroundColor: 'primary.dark' }} sx={{ backgroundColor: 'primary.dark' }}
@@ -129,11 +137,18 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
<SpinnerImage <SpinnerImage
alt={title} alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`} src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
imgStyle={{ imgStyle={inLibrary
height: '100%', ? {
width: '100%', height: '100%',
objectFit: 'cover', width: '100%',
}} objectFit: 'cover',
filter: 'brightness(0.4)',
}
: {
height: '100%',
width: '100%',
objectFit: 'cover',
}}
spinnerStyle={{ spinnerStyle={{
display: 'grid', display: 'grid',
placeItems: 'center', placeItems: 'center',
@@ -189,13 +204,22 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
> >
<Avatar <Avatar
variant="rounded" variant="rounded"
sx={{ sx={inLibrary
width: 56, ? {
height: 56, width: 56,
flex: '0 0 auto', height: 56,
marginRight: 2, flex: '0 0 auto',
imageRendering: 'pixelated', marginRight: 2,
}} imageRendering: 'pixelated',
filter: 'brightness(0.4)',
}
: {
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 2,
imageRendering: 'pixelated',
}}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`} src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
/> />
<Box <Box
@@ -211,6 +235,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
</Typography> </Typography>
</Box> </Box>
<BadgeContainer sx={{ position: 'relative' }}> <BadgeContainer sx={{ position: 'relative' }}>
{inLibrary && (
<Typography
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
>
In library
</Typography>
)}
{ showUnreadBadge && unread! > 0 && ( { showUnreadBadge && unread! > 0 && (
<Typography <Typography
sx={{ backgroundColor: 'primary.dark' }} sx={{ backgroundColor: 'primary.dark' }}

7
src/components/library/LibraryMangaGrid.tsx
View File

@@ -84,12 +84,17 @@ export default function LibraryMangaGrid(props: IMangaGridProps) {
const { active, query } = useLibraryOptions(); const { active, query } = useLibraryOptions();
const filteredManga = filterManga(mangas); const filteredManga = filterManga(mangas);
const sortedManga = sortManga(filteredManga); const sortedManga = sortManga(filteredManga);
const DoneManga = sortedManga.map((ele) => {
// eslint-disable-next-line no-param-reassign
ele.inLibrary = undefined;
return ele;
});
const showFilteredOutMessage = (active || query) const showFilteredOutMessage = (active || query)
&& filteredManga.length === 0 && mangas.length > 0; && filteredManga.length === 0 && mangas.length > 0;
return ( return (
<MangaGrid <MangaGrid
mangas={sortedManga} mangas={DoneManga}
isLoading={isLoading} isLoading={isLoading}
hasNextPage={hasNextPage} hasNextPage={hasNextPage}
lastPageNum={lastPageNum} lastPageNum={lastPageNum}

1
src/screens/SourceMangas.tsx
View File

@@ -175,6 +175,7 @@ export default function SourceMangas(props: { popular: boolean }) {
title: it.title, title: it.title,
thumbnailUrl: it.thumbnailUrl, thumbnailUrl: it.thumbnailUrl,
id: it.id, id: it.id,
inLibrary: it.inLibrary,
}))]); }))]);
setHasNextPage(data.hasNextPage); setHasNextPage(data.hasNextPage);
setFetched(true); setFetched(true);

1
src/typings.d.ts vendored
View File

@@ -59,6 +59,7 @@ interface IMangaCard {
thumbnailUrl: string thumbnailUrl: string
unreadCount?: number unreadCount?: number
downloadCount?: number downloadCount?: number
inLibrary?: boolean
} }
interface IManga { interface IManga {