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

1
src/screens/SourceMangas.tsx
View File

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

1
src/typings.d.ts vendored
View File

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