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

migrate ReaderNavbar to Mui 5 (#84)

Browse Source 
* migrate ReaderNavbar to Mui 5

* cleanup, show loading text when loading.
This commit is contained in:
Aria Moradi
2021-12-01 03:03:52 +03:30
committed by GitHub
parent a3fe748c90
commit c214406546
2 changed files with 121 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
src/components/navbar/ReaderNavBar.tsx
View File

@@ -11,8 +11,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import makeStyles from '@mui/styles/makeStyles'; import React, { useEffect, useState } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import { useHistory, Link } from 'react-router-dom'; import { useHistory, Link } from 'react-router-dom';
import Slide from '@mui/material/Slide'; import Slide from '@mui/material/Slide';
@@ -27,113 +26,88 @@ import ListItemText from '@mui/material/ListItemText';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'; import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
import Collapse from '@mui/material/Collapse'; import Collapse from '@mui/material/Collapse';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import NavBarContext from 'components/context/NavbarContext'; import { styled } from '@mui/system';
const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({ const Root = styled('div')(({ theme }) => ({
// main container and root div need to change classes... top: 0,
AppMainContainer: { left: 0,
display: 'none', width: '300px',
}, minWidth: '300px',
AppRootElment: { height: '100vh',
overflowY: 'auto',
backgroundColor: theme.palette.background.default,
'& header': {
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
display: 'flex', display: 'flex',
}, alignItems: 'center',
minHeight: '64px',
paddingLeft: '24px',
paddingRight: '24px',
root: { transition: 'left 2s ease',
position: settings.staticNav ? 'sticky' : 'fixed',
top: 0,
left: 0,
width: '300px',
minWidth: '300px',
height: '100vh',
overflowY: 'auto',
backgroundColor: theme.palette.background.default,
'& header': { '& button': {
backgroundColor: flexGrow: 0,
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100], flexShrink: 0,
display: 'flex',
alignItems: 'center',
minHeight: '64px',
paddingLeft: '24px',
paddingRight: '24px',
transition: 'left 2s ease',
'& button': {
flexGrow: 0,
flexShrink: 0,
},
'& button:nth-child(1)': {
marginRight: '16px',
},
'& button:nth-child(3)': {
marginRight: '-12px',
},
'& h1': {
fontSize: '1.25rem',
flexGrow: 1,
},
}, },
'& hr': {
margin: '0 16px', '& button:nth-child(1)': {
height: '1px', marginRight: '16px',
border: '0', },
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
'& h1': {
fontSize: '1.25rem',
flexGrow: 1,
}, },
}, },
'& hr': {
navigation: {
margin: '0 16px', margin: '0 16px',
height: '1px',
'& > span:nth-child(1)': { border: '0',
textAlign: 'center', backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
display: 'block',
marginTop: '16px',
},
'& $navigationChapters': {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateAreas: '"prev next"',
gridColumnGap: '5px',
margin: '10px 0',
'& a': {
flexGrow: 1,
textDecoration: 'none',
'& button': {
width: '100%',
padding: '5px 8px',
textTransform: 'none',
},
},
},
}, },
navigationChapters: {}, // dummy rule }));
settingsCollapsseHeader: { const Navigation = styled('div')({
'& span': { margin: '0 16px',
fontWeight: 'bold', '& > span:nth-child(1)': {
textAlign: 'center',
display: 'block',
marginTop: '16px',
},
});
const ChapterNavigation = styled('div')({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateAreas: '"prev next"',
gridColumnGap: '5px',
margin: '10px 0',
'& a': {
flexGrow: 1,
textDecoration: 'none',
'& button': {
width: '100%',
padding: '5px 8px',
textTransform: 'none',
}, },
}, },
});
openDrawerButton: { const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
position: 'fixed', position: 'fixed',
top: 0 + 20, top: 0 + 20,
left: 10 + 20, left: 10 + 20,
height: '40px', height: '40px',
width: '40px', width: '40px',
borderRadius: 5, borderRadius: 5,
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white', backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
'&:hover': {
'&:hover': { backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
},
}, },
})); }));
@@ -154,9 +128,6 @@ interface IProps {
} }
export default function ReaderNavBar(props: IProps) { export default function ReaderNavBar(props: IProps) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { title } = useContext(NavBarContext);
const history = useHistory(); const history = useHistory();
const { const {
@@ -168,8 +139,6 @@ export default function ReaderNavBar(props: IProps) {
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true); const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
const classes = useStyles(settings)();
const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value }); const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });
const handleScroll = () => { const handleScroll = () => {
@@ -184,15 +153,16 @@ export default function ReaderNavBar(props: IProps) {
useEffect(() => { useEffect(() => {
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
const rootEl = document.querySelector('#root')!; const rootEl:HTMLDivElement = document.querySelector('#root')!;
const mainContainer = document.querySelector('#appMainContainer')!; const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!;
rootEl.classList.add(classes.AppRootElment); // main container and root div need to change styles...
mainContainer.classList.add(classes.AppMainContainer); rootEl.style.display = 'flex';
mainContainer.style.display = 'none';
return () => { return () => {
rootEl.classList.remove(classes.AppRootElment); rootEl.style.display = 'block';
mainContainer.classList.remove(classes.AppMainContainer); mainContainer.style.display = 'block';
window.removeEventListener('scroll', handleScroll); window.removeEventListener('scroll', handleScroll);
}; };
}, [handleScroll]);// handleScroll changes on every render }, [handleScroll]);// handleScroll changes on every render
@@ -207,20 +177,25 @@ export default function ReaderNavBar(props: IProps) {
mountOnEnter mountOnEnter
unmountOnExit unmountOnExit
> >
<div className={classes.root}> <Root sx={{
position: settings.staticNav ? 'sticky' : 'fixed',
}}
>
<header> <header>
<IconButton {!settings.staticNav
edge="start" && (
color="inherit" <IconButton
aria-label="menu" edge="start"
disableRipple color="inherit"
onClick={() => setDrawerOpen(false)} aria-label="menu"
size="large" disableRipple
> onClick={() => setDrawerOpen(false)}
<KeyboardArrowLeftIcon /> size="large"
</IconButton> >
<KeyboardArrowLeftIcon />
</IconButton>
)}
<Typography variant="h1"> <Typography variant="h1">
{/* {title} */}
{chapter.name} {chapter.name}
</Typography> </Typography>
<IconButton <IconButton
@@ -230,11 +205,19 @@ export default function ReaderNavBar(props: IProps) {
disableRipple disableRipple
onClick={() => history.goBack()} onClick={() => history.goBack()}
size="large" size="large"
sx={{ mr: -1 }}
> >
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</header> </header>
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}> <ListItem
ContainerComponent="div"
sx={{
'& span': {
fontWeight: 'bold',
},
}}
>
<ListItemText primary="Reader Settings" /> <ListItemText primary="Reader Settings" />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton <IconButton
@@ -286,64 +269,57 @@ export default function ReaderNavBar(props: IProps) {
<ListItem> <ListItem>
<ListItemText primary="Reader Type" /> <ListItemText primary="Reader Type" />
<Select <Select
variant="standard"
value={settings.readerType} value={settings.readerType}
onChange={(e) => setSettingValue('readerType', e.target.value)} onChange={(e) => setSettingValue('readerType', e.target.value)}
sx={{ p: 0 }}
> >
<MenuItem value="SingleLTR"> <MenuItem value="SingleLTR">
Single Page (LTR) Single Page (LTR)
</MenuItem> </MenuItem>
<MenuItem value="SingleRTL"> <MenuItem value="SingleRTL">
Single Page (RTL) Single Page (RTL)
</MenuItem> </MenuItem>
{/* <MenuItem value="SingleVertical"> {/* <MenuItem value="SingleVertical">
Vertical(WIP) Vertical(WIP)
</MenuItem> */}
</MenuItem> */}
<MenuItem value="DoubleLTR"> <MenuItem value="DoubleLTR">
Double Page (LTR) Double Page (LTR)
</MenuItem> </MenuItem>
<MenuItem value="DoubleRTL"> <MenuItem value="DoubleRTL">
Double Page (RTL) Double Page (RTL)
</MenuItem> </MenuItem>
<MenuItem value="Webtoon"> <MenuItem value="Webtoon">
Webtoon Webtoon
</MenuItem> </MenuItem>
<MenuItem value="ContinuesVertical"> <MenuItem value="ContinuesVertical">
Continues Vertical Continues Vertical
</MenuItem> </MenuItem>
<MenuItem value="ContinuesHorizontalLTR"> <MenuItem value="ContinuesHorizontalLTR">
Horizontal (LTR) Horizontal (LTR)
</MenuItem> </MenuItem>
<MenuItem value="ContinuesHorizontalRTL"> <MenuItem value="ContinuesHorizontalRTL">
Horizontal (RTL) Horizontal (RTL)
</MenuItem> </MenuItem>
</Select> </Select>
</ListItem> </ListItem>
</List> </List>
</Collapse> </Collapse>
<hr /> <hr />
<div className={classes.navigation}> <Navigation>
<span> <span>
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`} {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
</span> </span>
<div className={classes.navigationChapters}> <ChapterNavigation>
{chapter.index > 1 {chapter.index > 1
&& ( && (
<Link <Link
replace replace
style={{ gridArea: 'prev' }}
to={`/manga/${manga.id}/chapter/${chapter.index - 1}`} to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
> >
<Button <Button
variant="outlined" variant="outlined"
sx={{ gridArea: 'prev' }}
startIcon={<KeyboardArrowLeftIcon />} startIcon={<KeyboardArrowLeftIcon />}
> >
Prev. Chapter Prev. Chapter
@@ -365,14 +341,13 @@ export default function ReaderNavBar(props: IProps) {
</Button> </Button>
</Link> </Link>
)} )}
</div> </ChapterNavigation>
</div> </Navigation>
</div> </Root>
</Slide> </Slide>
<Zoom in={!drawerOpen}> <Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<IconButton <OpenDrawerButton
className={classes.openDrawerButton}
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
@@ -382,7 +357,7 @@ export default function ReaderNavBar(props: IProps) {
size="large" size="large"
> >
<KeyboardArrowRightIcon /> <KeyboardArrowRightIcon />
</IconButton> </OpenDrawerButton>
</Fade> </Fade>
</Zoom> </Zoom>
</> </>

7
src/screens/Reader.tsx
View File

@@ -58,7 +58,12 @@ const getReaderComponent = (readerType: ReaderType) => {
}; };
const range = (n:number) => Array.from({ length: n }, (value, key) => key); const range = (n:number) => Array.from({ length: n }, (value, key) => key);
const initialChapter = () => ({ pageCount: -1, index: -1, chapterCount: 0 }); const initialChapter = () => ({
pageCount: -1,
index: -1,
chapterCount: 0,
name: 'Loading...',
});
export default function Reader() { export default function Reader() {
const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings); const [settings, setSettings] = useLocalStorage<IReaderSettings>('readerSettings', defaultReaderSettings);