Feature/batch chapter download (#191)
* Add NavbarToolbar component for rendering items in toolbar through portal * Refactor Manga screen, move chapters filtering to toolbar menu, cleanup ChapterOptions * Fix warning * Update layout of ChapterList and add selection for chapters, add batch download, move stuff around * Add space to bookmark icon * Clear actions when leaving source mangas page * Move bookmark icon back inline and align it correctly with text * Fixup MangaDetails buttons to update cache properly so buttons in manga menu are updated * Move chapters filter to ChapterList * Fixup error display overlapping with loaded content when revalidation fails * Fixup spacing around ChapterList title * Only show small progress if manga is loaded so there is not to many spinners * Prevent title wrapping * Add icon buttons to desktop sizes of manga toolbar menu
This commit is contained in:
Valter Martinek
@@ -1,156 +0,0 @@
|
||||
/*
|
||||
* Copyright (C) Contributors to the Suwayomi project
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import React from 'react';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import BookmarkIcon from '@mui/icons-material/Bookmark';
|
||||
|
||||
import client from 'util/client';
|
||||
import { Box } from '@mui/system';
|
||||
|
||||
interface IProps{
|
||||
chapter: IChapter
|
||||
triggerChaptersUpdate: () => void
|
||||
downloadStatusString: string
|
||||
showChapterNumber: boolean
|
||||
}
|
||||
|
||||
export default function ChapterCard(props: IProps) {
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
chapter, triggerChaptersUpdate, downloadStatusString, showChapterNumber,
|
||||
} = props;
|
||||
|
||||
const dateStr = chapter.uploadDate && new Date(chapter.uploadDate).toLocaleDateString();
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
// prevent parent tags from getting the event
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const sendChange = (key: string, value: any) => {
|
||||
handleClose();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append(key, value);
|
||||
if (key === 'read') { formData.append('lastPageRead', '1'); }
|
||||
client.patch(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`, formData)
|
||||
.then(() => triggerChaptersUpdate());
|
||||
};
|
||||
|
||||
const downloadChapter = () => {
|
||||
client.get(`/api/v1/download/${chapter.mangaId}/chapter/${chapter.index}`);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const deleteChapter = () => {
|
||||
client.delete(`/api/v1/manga/${chapter.mangaId}/chapter/${chapter.index}`)
|
||||
.then(() => triggerChaptersUpdate());
|
||||
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const readChapterColor = theme.palette.mode === 'dark' ? '#acacac' : '#b0b0b0';
|
||||
|
||||
return (
|
||||
<>
|
||||
<li>
|
||||
<Card
|
||||
sx={{
|
||||
margin: '10px',
|
||||
':hover': {
|
||||
backgroundColor: 'action.hover',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
':active': {
|
||||
backgroundColor: 'action.selected',
|
||||
transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: chapter.read ? readChapterColor : theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
<span style={{ color: theme.palette.primary.dark }}>
|
||||
{chapter.bookmarked && <BookmarkIcon />}
|
||||
</span>
|
||||
{ showChapterNumber ? `Chapter ${chapter.chapterNumber}` : chapter.name}
|
||||
</Typography>
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{chapter.scanlator}
|
||||
{chapter.scanlator && ' '}
|
||||
{dateStr}
|
||||
{downloadStatusString}
|
||||
</Typography>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<IconButton aria-label="more" onClick={handleClick} size="large">
|
||||
<MoreVertIcon />
|
||||
</IconButton>
|
||||
</CardContent>
|
||||
</Link>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
>
|
||||
{downloadStatusString.endsWith('Downloaded')
|
||||
&& <MenuItem onClick={deleteChapter}>Delete</MenuItem>}
|
||||
{downloadStatusString.length === 0
|
||||
&& <MenuItem onClick={downloadChapter}>Download</MenuItem> }
|
||||
<MenuItem onClick={() => sendChange('bookmarked', !chapter.bookmarked)}>
|
||||
{chapter.bookmarked && 'Remove bookmark'}
|
||||
{!chapter.bookmarked && 'Bookmark'}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => sendChange('read', !chapter.read)}>
|
||||
{`Mark as ${chapter.read ? 'unread' : 'read'}`}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => sendChange('markPrevRead', true)}>
|
||||
Mark previous as Read
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Card>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user