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

List layout (#154)

Browse Source 
* source layouts

* list layout

Co-authored-by: Aria Moradi <aria.moradi007@gmail.com>
This commit is contained in:
robo
2022-03-06 21:03:15 +00:00
committed by GitHub
parent 70b84b810f
commit 33c9defdd9
3 changed files with 156 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/components/MangaCard.tsx
View File

@@ -10,7 +10,7 @@ import Card from '@mui/material/Card';
import CardActionArea from '@mui/material/CardActionArea'; import CardActionArea from '@mui/material/CardActionArea';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Grid } from '@mui/material'; import { Avatar, CardContent, Grid } from '@mui/material';
import useLocalStorage from 'util/useLocalStorage'; import useLocalStorage from 'util/useLocalStorage';
import SpinnerImage from 'components/util/SpinnerImage'; import SpinnerImage from 'components/util/SpinnerImage';
import { Box, styled } from '@mui/system'; import { Box, styled } from '@mui/system';
@@ -84,85 +84,150 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
const [serverAddress] = useLocalStorage<String>('serverBaseURL', ''); const [serverAddress] = useLocalStorage<String>('serverBaseURL', '');
const [useCache] = useLocalStorage<boolean>('useCache', true); const [useCache] = useLocalStorage<boolean>('useCache', true);
return ( if (gridLayout !== 2) {
<Grid item xs={6} sm={4} md={3} lg={2}> return (
<Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}> <Grid item xs={6} sm={4} md={3} lg={2}>
<Box <Link to={`/manga/${id}/`} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
sx={{ <Box
display: 'flex',
flexDirection: 'column',
}}
>
<Card
sx={{ sx={{
// force standard aspect ratio of manga covers
aspectRatio: '225/350',
display: 'flex', display: 'flex',
flexDirection: 'column',
}} }}
ref={ref}
> >
<CardActionArea <Card
sx={{ sx={{
position: 'relative', // force standard aspect ratio of manga covers
height: '100%', aspectRatio: '225/350',
display: 'flex',
}} }}
ref={ref}
> >
<CardActionArea
<BadgeContainer> sx={{
{ showUnreadBadge && unread! > 0 && ( position: 'relative',
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
<SpinnerImage
alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
imgStyle={{
height: '100%', height: '100%',
width: '100%',
objectFit: 'cover',
}} }}
spinnerStyle={{ >
display: 'grid',
placeItems: 'center', <BadgeContainer>
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
<SpinnerImage
alt={title}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
imgStyle={{
height: '100%',
width: '100%',
objectFit: 'cover',
}}
spinnerStyle={{
display: 'grid',
placeItems: 'center',
}}
/>
{(gridLayout === 1) ? (<></>) : (
<>
<BottomGradient />
<BottomGradientDoubledDown />
</>
)}
{(gridLayout === 1) ? (
<></>
) : (
<MangaTitle>
{truncateText(title, 61)}
</MangaTitle>
)}
</CardActionArea>
</Card>
{(gridLayout === 1) ? (
<MangaTitle
sx={{
position: 'relative',
}} }}
/> >
{(gridLayout === 1) ? (<></>) : ( {truncateText(title, 61)}
<> </MangaTitle>
<BottomGradient /> ) : (<></>)}
<BottomGradientDoubledDown /> </Box>
</> </Link>
)} </Grid>
{(gridLayout === 1) ? ( );
<></> }
) : ( return (
<MangaTitle> <Grid item xs={12} sm={12} md={12} lg={12}>
{truncateText(title, 61)} <Link to={`/manga/${id}/`} style={{ textDecoration: 'none', color: 'unset' }}>
</MangaTitle> <CardContent sx={{
)} display: 'flex',
</CardActionArea> justifyContent: 'space-between',
</Card> alignItems: 'center',
{(gridLayout === 1) ? ( padding: 2,
<MangaTitle '&:hover': {
sx={{ backgroundColor: 'action.hover',
position: 'relative', transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}} },
> '&:active': {
backgroundColor: 'action.selected',
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
},
position: 'relative',
}}
>
<Avatar
variant="rounded"
sx={{
width: 56,
height: 56,
flex: '0 0 auto',
marginRight: 2,
imageRendering: 'pixelated',
}}
src={`${serverAddress}${thumbnailUrl}?useCache=${useCache}`}
/>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
width: 'min-content',
}}
>
<Typography variant="h5" component="h2">
{truncateText(title, 61)} {truncateText(title, 61)}
</MangaTitle> </Typography>
) : (<></>)} </Box>
</Box> <BadgeContainer sx={{ position: 'relative' }}>
{ showUnreadBadge && unread! > 0 && (
<Typography
sx={{ backgroundColor: 'primary.dark' }}
>
{unread}
</Typography>
)}
{ showDownloadBadge && downloadCount! > 0 && (
<Typography sx={{
backgroundColor: 'success.dark',
}}
>
{downloadCount}
</Typography>
)}
</BadgeContainer>
</CardContent>
</Link> </Link>
</Grid> </Grid>
); );

10
src/components/library/LibraryOptions.tsx
View File

@@ -146,6 +146,16 @@ function dispalyTab(currentTab: number) {
/> />
)} )}
/> />
<FormControlLabel
label="list"
control={(
<Radio
name="2"
checked={options.gridLayout === 2}
onChange={setGridContextOptions}
/>
)}
/>
BADGES BADGES
<FormControlLabel <FormControlLabel
label="Unread Badges" label="Unread Badges"

13
src/components/source/GridLayouts.tsx
View File

@@ -76,7 +76,18 @@ export default function SourceGridLayout() {
/> />
)} )}
/> />
</MenuItem>
<MenuItem onClick={handleClose}>
<FormControlLabel
label="List"
control={(
<Radio
name="2"
checked={options.SourcegridLayout === 2}
onChange={setGridContextOptions}
/>
)}
/>
</MenuItem> </MenuItem>
</Menu> </Menu>