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

make the whole chapter card into a button (#73)

Browse Source 
* whole chapter card is a button

* return to anchor
This commit is contained in:
Aria Moradi
2021-11-14 00:07:43 +03:30
committed by GitHub
parent 63d9a64542
commit 416dd227a2
1 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/components/ChapterCard.tsx
View File

@@ -7,15 +7,16 @@
import React from 'react'; import React from 'react';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
import { Link } from 'react-router-dom';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent'; import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton'; import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert'; import MoreVertIcon from '@mui/icons-material/MoreVert';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { Link } from 'react-router-dom';
import Menu from '@mui/material/Menu'; import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem'; import MenuItem from '@mui/material/MenuItem';
import BookmarkIcon from '@mui/icons-material/Bookmark'; import BookmarkIcon from '@mui/icons-material/Bookmark';
import client from 'util/client'; import client from 'util/client';
interface IProps{ interface IProps{
@@ -26,6 +27,7 @@ interface IProps{
export default function ChapterCard(props: IProps) { export default function ChapterCard(props: IProps) {
const theme = useTheme(); const theme = useTheme();
const { chapter, triggerChaptersUpdate, downloadStatusString } = props; const { chapter, triggerChaptersUpdate, downloadStatusString } = props;
const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10); const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toISOString().slice(0, 10);
@@ -33,6 +35,10 @@ export default function ChapterCard(props: IProps) {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => { const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
// prevent parent tags from getting the event
event.stopPropagation();
event.preventDefault();
setAnchorEl(event.currentTarget); setAnchorEl(event.currentTarget);
}; };
@@ -63,33 +69,37 @@ export default function ChapterCard(props: IProps) {
}; };
const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0'; const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
return ( return (
<> <>
<li> <li>
<Card sx={{ <Card
margin: '10px', sx={{
':hover': { margin: '10px',
backgroundColor: 'action.hover', ':hover': {
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', backgroundColor: 'action.hover',
}, transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
':active': { cursor: 'pointer',
backgroundColor: 'action.selected', },
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',
> },
<CardContent sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: 2,
}} }}
>
<Link
to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
style={{
textDecoration: 'none',
color: chapter.read ? readChapterColor : theme.palette.text.primary,
}}
> >
<Link <CardContent
to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`} sx={{
style={{ display: 'flex',
textDecoration: 'none', justifyContent: 'space-between',
color: chapter.read ? readChapterColor : theme.palette.text.primary, alignItems: 'center',
padding: 2,
}} }}
> >
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
@@ -108,33 +118,33 @@ export default function ChapterCard(props: IProps) {
</Typography> </Typography>
</div> </div>
</div> </div>
</Link>
<IconButton aria-label="more" onClick={handleClick} size="large"> <IconButton aria-label="more" onClick={handleClick} size="large">
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
<Menu </CardContent>
anchorEl={anchorEl} </Link>
keepMounted <Menu
open={Boolean(anchorEl)} anchorEl={anchorEl}
onClose={handleClose} keepMounted
> open={Boolean(anchorEl)}
{downloadStatusString.endsWith('Downloaded') onClose={handleClose}
>
{downloadStatusString.endsWith('Downloaded')
&& <MenuItem onClick={deleteChapter}>Delete</MenuItem>} && <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
{downloadStatusString.length === 0 {downloadStatusString.length === 0
&& <MenuItem onClick={downloadChapter}>Download</MenuItem> } && <MenuItem onClick={downloadChapter}>Download</MenuItem> }
<MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}> <MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
{chapter.bookmarked && 'Remove bookmark'} {chapter.bookmarked && 'Remove bookmark'}
{!chapter.bookmarked && 'Bookmark'} {!chapter.bookmarked && 'Bookmark'}
</MenuItem> </MenuItem>
<MenuItem onClick={() => sendChange('read', !chapter.read)}> <MenuItem onClick={() => sendChange('read', !chapter.read)}>
{`Mark as ${chapter.read ? 'unread' : 'read'}`} {`Mark as ${chapter.read ? 'unread' : 'read'}`}
</MenuItem> </MenuItem>
<MenuItem onClick={() => sendChange('markPrevRead', true)}> <MenuItem onClick={() => sendChange('markPrevRead', true)}>
Mark previous as Read Mark previous as Read
</MenuItem> </MenuItem>
</Menu> </Menu>
</CardContent>
</Card> </Card>
</li> </li>
</> </>