Refactor/download queue and cleanup visuals overall (#202)
* Move context providers and configuration providers to separate component, extract theme to separate file * Use custom palette color instead of direct colors * Replace different clicable things with CardActionArea to get transition and links * Refactor DownloadQueue, update layout, unify all the download progress indicators * Unify active filter indicator * Use divider instead of hr * Fix background color in extensions light theme * Fix thumbnail overlay in library screen list view * Don't show download button on downloaded updates
This commit is contained in:
Valter Martinek
@@ -37,16 +37,11 @@ const MangaTitle = styled(Typography)({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
padding: '0.5em',
|
||||
color: 'white',
|
||||
fontSize: '1.05rem',
|
||||
textShadow: '0px 0px 3px #000000',
|
||||
});
|
||||
|
||||
const BadgeContainer = styled('div')({
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 5,
|
||||
height: 'fit-content',
|
||||
borderRadius: '5px',
|
||||
overflow: 'hidden',
|
||||
@@ -94,10 +89,9 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
|
||||
|
||||
if (gridLayout !== 2) {
|
||||
const colomns = Math.round(dimensions / ItemWidth);
|
||||
const cols = Math.ceil(dimensions / ItemWidth);
|
||||
return (
|
||||
// @ts-ignore gridsize type isnt allowed to be a decimal but it works fine
|
||||
<Grid item xs={12 / colomns} sm={12 / colomns} md={12 / colomns} lg={12 / colomns}>
|
||||
<Grid item columns={cols} xs={1}>
|
||||
<Link to={mangaLinkTo} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -107,7 +101,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
// force standard aspect ratio of manga covers
|
||||
// force standard aspect ratio of manga covers
|
||||
aspectRatio: '225/350',
|
||||
display: 'flex',
|
||||
}}
|
||||
@@ -120,7 +114,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
}}
|
||||
>
|
||||
|
||||
<BadgeContainer>
|
||||
<BadgeContainer
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 5,
|
||||
}}
|
||||
>
|
||||
{inLibraryIndicator && inLibrary && (
|
||||
<Typography
|
||||
sx={{ backgroundColor: 'primary.dark', zIndex: '1' }}
|
||||
@@ -173,7 +173,12 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
{(gridLayout === 1) ? (
|
||||
<></>
|
||||
) : (
|
||||
<MangaTitle>
|
||||
<MangaTitle
|
||||
sx={{
|
||||
color: 'white',
|
||||
textShadow: '0px 0px 3px #000000',
|
||||
}}
|
||||
>
|
||||
{truncateText(title, 61)}
|
||||
</MangaTitle>
|
||||
)}
|
||||
@@ -183,6 +188,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
<MangaTitle
|
||||
sx={{
|
||||
position: 'relative',
|
||||
color: 'text.primary',
|
||||
}}
|
||||
>
|
||||
{truncateText(title, 61)}
|
||||
@@ -193,83 +199,82 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Grid item xs={12} sm={12} md={12} lg={12}>
|
||||
<Link to={mangaLinkTo} style={{ textDecoration: 'none', color: 'unset' }}>
|
||||
<CardContent sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
'&:hover': {
|
||||
backgroundColor: 'action.hover',
|
||||
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',
|
||||
}}
|
||||
<Grid item xs={12}>
|
||||
<Card>
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={mangaLinkTo}
|
||||
>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
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
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexGrow: 1,
|
||||
width: 'min-content',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5" component="h2">
|
||||
{truncateText(title, 61)}
|
||||
</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' }}
|
||||
>
|
||||
{unread}
|
||||
</Typography>
|
||||
)}
|
||||
{ showDownloadBadge && downloadCount! > 0 && (
|
||||
<Typography sx={{
|
||||
backgroundColor: 'success.dark',
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={inLibraryIndicator && 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
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexGrow: 1,
|
||||
width: 'min-content',
|
||||
}}
|
||||
>
|
||||
{downloadCount}
|
||||
>
|
||||
<Typography variant="h5" component="h2">
|
||||
{truncateText(title, 61)}
|
||||
</Typography>
|
||||
)}
|
||||
</BadgeContainer>
|
||||
</CardContent>
|
||||
</Link>
|
||||
</Box>
|
||||
<BadgeContainer>
|
||||
{inLibraryIndicator && inLibrary && (
|
||||
<Typography
|
||||
sx={{ backgroundColor: 'primary.dark' }}
|
||||
>
|
||||
In library
|
||||
</Typography>
|
||||
)}
|
||||
{ showUnreadBadge && unread! > 0 && (
|
||||
<Typography
|
||||
sx={{ backgroundColor: 'primary.dark' }}
|
||||
>
|
||||
{unread}
|
||||
</Typography>
|
||||
)}
|
||||
{ showDownloadBadge && downloadCount! > 0 && (
|
||||
<Typography sx={{
|
||||
backgroundColor: 'success.dark',
|
||||
}}
|
||||
>
|
||||
{downloadCount}
|
||||
</Typography>
|
||||
)}
|
||||
</BadgeContainer>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -5,16 +5,17 @@
|
||||
* 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 { CardActionArea } from '@mui/material';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import Button from '@mui/material/Button';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import { langCodeToName } from 'util/language';
|
||||
import { Box, styled } from '@mui/system';
|
||||
import React from 'react';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { langCodeToName } from 'util/language';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
|
||||
const MobileWidthButtons = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@@ -38,7 +39,7 @@ interface IProps {
|
||||
source: ISource
|
||||
}
|
||||
|
||||
export default function SourceCard(props: IProps) {
|
||||
const SourceCard: React.FC<IProps> = (props: IProps) => {
|
||||
const {
|
||||
source: {
|
||||
id, name, lang, iconUrl, supportsLatest, isNsfw,
|
||||
@@ -61,82 +62,83 @@ export default function SourceCard(props: IProps) {
|
||||
<Card
|
||||
sx={{
|
||||
margin: '10px',
|
||||
'&:hover': {
|
||||
backgroundColor: 'action.hover',
|
||||
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',
|
||||
},
|
||||
}}
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/popular/`)}
|
||||
>
|
||||
<CardContent sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={`/sources/${id}/popular/`}
|
||||
>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt={name}
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
mr: 2,
|
||||
}}
|
||||
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{name}
|
||||
</Typography>
|
||||
{id !== '0' && (
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{langCodeToName(lang)}
|
||||
{isNsfw && (
|
||||
<Typography variant="caption" display="inline" gutterBottom color="red">
|
||||
{' 18+'}
|
||||
</Typography>
|
||||
)}
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
alt={name}
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
flex: '0 0 auto',
|
||||
mr: 2,
|
||||
}}
|
||||
src={`${serverAddress}${iconUrl}?useCache=${useCache}`}
|
||||
/>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
||||
<Typography variant="h5" component="h2">
|
||||
{name}
|
||||
</Typography>
|
||||
)}
|
||||
{id !== '0' && (
|
||||
<Typography variant="caption" display="block" gutterBottom>
|
||||
{langCodeToName(lang)}
|
||||
{isNsfw && (
|
||||
<Typography variant="caption" display="inline" gutterBottom color="red">
|
||||
{' 18+'}
|
||||
</Typography>
|
||||
)}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<>
|
||||
<MobileWidthButtons>
|
||||
{supportsLatest && (
|
||||
<>
|
||||
<MobileWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
</MobileWidthButtons>
|
||||
<WiderWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
component={Link}
|
||||
to={`/sources/${id}/latest/`}
|
||||
variant="outlined"
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
component={Link}
|
||||
to={`/sources/${id}/popular/`}
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
Browse
|
||||
</Button>
|
||||
)}
|
||||
</MobileWidthButtons>
|
||||
<WiderWidthButtons>
|
||||
{supportsLatest && (
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e) => redirectTo(e, `/sources/${id}/latest/`)}
|
||||
>
|
||||
Latest
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={(e: any) => redirectTo(e, `/sources/${id}/popular/`)}
|
||||
>
|
||||
Browse
|
||||
</Button>
|
||||
</WiderWidthButtons>
|
||||
</>
|
||||
</CardContent>
|
||||
</WiderWidthButtons>
|
||||
</>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default SourceCard;
|
||||
|
||||
66
src/components/context/AppContext.tsx
Normal file
66
src/components/context/AppContext.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
/*
|
||||
* 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 {
|
||||
StyledEngineProvider, ThemeProvider,
|
||||
} from '@mui/material/styles';
|
||||
import LibraryOptionsContextProvider from 'components/library/LibraryOptionsProvider';
|
||||
import NavBarContextProvider from 'components/navbar/NavBarContextProvider';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
BrowserRouter as Router, Route,
|
||||
} from 'react-router-dom';
|
||||
import { SWRConfig } from 'swr';
|
||||
import createTheme from 'theme';
|
||||
import { QueryParamProvider } from 'use-query-params';
|
||||
import { fetcher } from 'util/client';
|
||||
import useLocalStorage from 'util/useLocalStorage';
|
||||
import DarkTheme from './DarkTheme';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const AppContext: React.FC<Props> = ({ children }) => {
|
||||
const [darkTheme, setDarkTheme] = useLocalStorage<boolean>(
|
||||
'darkTheme',
|
||||
true,
|
||||
);
|
||||
|
||||
const darkThemeContext = useMemo(() => ({
|
||||
darkTheme,
|
||||
setDarkTheme,
|
||||
}), [darkTheme]);
|
||||
|
||||
const theme = useMemo(
|
||||
() => createTheme(darkTheme),
|
||||
[darkTheme],
|
||||
);
|
||||
|
||||
return (
|
||||
<SWRConfig value={{ fetcher }}>
|
||||
<Router>
|
||||
<StyledEngineProvider injectFirst>
|
||||
<ThemeProvider theme={theme}>
|
||||
<DarkTheme.Provider value={darkThemeContext}>
|
||||
<QueryParamProvider ReactRouterRoute={Route}>
|
||||
<LibraryOptionsContextProvider>
|
||||
<NavBarContextProvider>
|
||||
{children}
|
||||
</NavBarContextProvider>
|
||||
</LibraryOptionsContextProvider>
|
||||
</QueryParamProvider>
|
||||
</DarkTheme.Provider>
|
||||
</ThemeProvider>
|
||||
</StyledEngineProvider>
|
||||
</Router>
|
||||
</SWRConfig>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppContext;
|
||||
@@ -16,8 +16,7 @@ import Download from '@mui/icons-material/Download';
|
||||
import MoreVertIcon from '@mui/icons-material/MoreVert';
|
||||
import RemoveDone from '@mui/icons-material/RemoveDone';
|
||||
import {
|
||||
LinearProgress,
|
||||
Checkbox, ListItemIcon, ListItemText, Stack,
|
||||
CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack,
|
||||
} from '@mui/material';
|
||||
import Card from '@mui/material/Card';
|
||||
import CardContent from '@mui/material/CardContent';
|
||||
@@ -26,6 +25,7 @@ import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import client from 'util/client';
|
||||
@@ -107,21 +107,12 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
|
||||
sx={{
|
||||
position: 'relative',
|
||||
margin: 1,
|
||||
':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
|
||||
<CardActionArea
|
||||
component={Link}
|
||||
to={{ pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`, state: { backLink: BACK } }}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
|
||||
}}
|
||||
onClick={handleClick}
|
||||
@@ -148,10 +139,11 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
|
||||
<Typography variant="caption">
|
||||
{dateStr}
|
||||
{isDownloaded && ' • Downloaded'}
|
||||
{dc && ` • Downloading (${(dc.progress * 100).toFixed(2)}%)`}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
{dc && <DownloadStateIndicator download={dc} />}
|
||||
|
||||
{selected === null ? (
|
||||
<IconButton aria-label="more" onClick={handleMenuClick} size="large">
|
||||
<MoreVertIcon />
|
||||
@@ -160,17 +152,7 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
|
||||
<Checkbox checked={selected} />
|
||||
)}
|
||||
</CardContent>
|
||||
</Link>
|
||||
{dc != null && (
|
||||
<LinearProgress
|
||||
sx={{
|
||||
position: 'absolute', bottom: 0, width: '100%', opacity: 0.5,
|
||||
}}
|
||||
variant="determinate"
|
||||
value={dc.progress * 100}
|
||||
color="inherit"
|
||||
/>
|
||||
)}
|
||||
</CardActionArea>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import FilterList from '@mui/icons-material/FilterList';
|
||||
import { Badge, IconButton } from '@mui/material';
|
||||
import { IconButton } from '@mui/material';
|
||||
import * as React from 'react';
|
||||
import ChapterOptions from './ChapterOptions';
|
||||
import { isFilterActive } from './util';
|
||||
@@ -23,9 +23,7 @@ const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
|
||||
return (
|
||||
<>
|
||||
<IconButton onClick={() => setOpen(true)}>
|
||||
<Badge color="primary" variant="dot" invisible={!isFiltered}>
|
||||
<FilterList />
|
||||
</Badge>
|
||||
<FilterList color={isFiltered ? 'warning' : undefined} />
|
||||
</IconButton>
|
||||
<ChapterOptions
|
||||
open={open}
|
||||
|
||||
53
src/components/molecules/DownloadStateIndicator.tsx
Normal file
53
src/components/molecules/DownloadStateIndicator.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
/*
|
||||
* 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 { CircularProgress } from '@mui/material';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { Box } from '@mui/system';
|
||||
import React from 'react';
|
||||
|
||||
interface DownloadStateIndicatorProps {
|
||||
download: IDownloadChapter
|
||||
}
|
||||
|
||||
const DownloadStateIndicator: React.FC<DownloadStateIndicatorProps> = ({ download }) => (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
width: '50px',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{download.progress !== 0 && (
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={download.progress * 100}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" component="div" color="text.secondary">
|
||||
{download.progress !== 0 && `${Math.round(download.progress * 100)}%`}
|
||||
{download.progress === 0 && download.state}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
export default DownloadStateIndicator;
|
||||
@@ -25,7 +25,6 @@ import SettingsIcon from '@mui/icons-material/Settings';
|
||||
import ArrowBack from '@mui/icons-material/ArrowBack';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import NavBarContext from 'components/context/NavbarContext';
|
||||
import DarkTheme from 'components/context/DarkTheme';
|
||||
import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
|
||||
import { Box } from '@mui/system';
|
||||
import { createPortal } from 'react-dom';
|
||||
@@ -82,7 +81,6 @@ const navbarItems: Array<NavbarItem> = [
|
||||
export default function DefaultNavBar() {
|
||||
const { title, action, override } = useContext(NavBarContext);
|
||||
const backTo = useBackTo();
|
||||
const { darkTheme } = useContext(DarkTheme);
|
||||
|
||||
const theme = useTheme();
|
||||
const history = useHistory();
|
||||
@@ -109,7 +107,7 @@ export default function DefaultNavBar() {
|
||||
|
||||
return (
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<AppBar position="fixed" color={darkTheme ? 'default' : 'primary'}>
|
||||
<AppBar position="fixed" color="default">
|
||||
<Toolbar>
|
||||
{!isMainRoute && (
|
||||
<IconButton
|
||||
|
||||
@@ -17,7 +17,7 @@ import { useHistory, Link } from 'react-router-dom';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Fade from '@mui/material/Fade';
|
||||
import Zoom from '@mui/material/Zoom';
|
||||
import { Switch } from '@mui/material';
|
||||
import { Divider, Switch } from '@mui/material';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
@@ -39,8 +39,7 @@ const Root = styled('div')(({ theme }) => ({
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
'& header': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
backgroundColor: theme.palette.action.hover,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minHeight: '64px',
|
||||
@@ -63,12 +62,6 @@ const Root = styled('div')(({ theme }) => ({
|
||||
flexGrow: 1,
|
||||
},
|
||||
},
|
||||
'& hr': {
|
||||
margin: '0 16px',
|
||||
height: '1px',
|
||||
border: '0',
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
},
|
||||
}));
|
||||
|
||||
const Navigation = styled('div')({
|
||||
@@ -106,9 +99,9 @@ const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
borderRadius: 5,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
|
||||
backgroundColor: theme.palette.custom.main,
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
|
||||
backgroundColor: theme.palette.custom.light,
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -313,7 +306,7 @@ export default function ReaderNavBar(props: IProps) {
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
<hr />
|
||||
<Divider sx={{ my: 1, mx: 2 }} />
|
||||
<Navigation>
|
||||
<span>
|
||||
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
|
||||
@@ -357,7 +350,6 @@ export default function ReaderNavBar(props: IProps) {
|
||||
<Fade in={!hideOpenButton}>
|
||||
<OpenDrawerButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
disableRipple
|
||||
disableFocusRipple
|
||||
|
||||
@@ -14,7 +14,7 @@ import { useTheme } from '@mui/material/styles';
|
||||
const SideNavBarContainer = styled('div')(({ theme }) => ({
|
||||
height: '100vh',
|
||||
width: theme.spacing(8),
|
||||
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
|
||||
backgroundColor: theme.palette.custom,
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
|
||||
@@ -16,7 +16,7 @@ const BottomNavContainer = styled('div')(({ theme }) => ({
|
||||
left: 0,
|
||||
height: theme.spacing(7),
|
||||
width: '100vw',
|
||||
backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
|
||||
backgroundColor: theme.palette.custom.light,
|
||||
position: 'fixed',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
|
||||
Reference in New Issue
Block a user