Revert "migrate some components to Mui5 new styling system (#72)"
This reverts commit 72ef61e286.
This commit is contained in:
Aria Moradi
@@ -11,6 +11,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { useHistory, Link } from 'react-router-dom';
|
||||
@@ -27,91 +28,112 @@ import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Button from '@mui/material/Button';
|
||||
import NavBarContext from 'components/context/NavbarContext';
|
||||
import { styled } from '@mui/system';
|
||||
|
||||
const Root = styled('div')(({ theme }) => ({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '300px',
|
||||
minWidth: '300px',
|
||||
height: '100vh',
|
||||
overflowY: 'auto',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
'& header': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({
|
||||
// main container and root div need to change classes...
|
||||
AppMainContainer: {
|
||||
display: 'none',
|
||||
},
|
||||
AppRootElment: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
minHeight: '64px',
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px',
|
||||
},
|
||||
|
||||
transition: 'left 2s ease',
|
||||
root: {
|
||||
position: settings.staticNav ? 'sticky' : 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '300px',
|
||||
minWidth: '300px',
|
||||
height: '100vh',
|
||||
overflowY: 'auto',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
|
||||
'& button': {
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
'& header': {
|
||||
backgroundColor:
|
||||
theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
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,
|
||||
},
|
||||
},
|
||||
|
||||
'& button:nth-child(1)': {
|
||||
marginRight: '16px',
|
||||
},
|
||||
|
||||
'& button:nth-child(3)': {
|
||||
marginRight: '-12px',
|
||||
},
|
||||
|
||||
'& h1': {
|
||||
fontSize: '1.25rem',
|
||||
flexGrow: 1,
|
||||
'& hr': {
|
||||
margin: '0 16px',
|
||||
height: '1px',
|
||||
border: '0',
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
},
|
||||
},
|
||||
'& hr': {
|
||||
|
||||
navigation: {
|
||||
margin: '0 16px',
|
||||
height: '1px',
|
||||
border: '0',
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
|
||||
|
||||
'& > span:nth-child(1)': {
|
||||
textAlign: 'center',
|
||||
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
|
||||
|
||||
const Navigation = styled('div')({
|
||||
margin: '0 16px',
|
||||
'& > span:nth-child(1)': {
|
||||
textAlign: 'center',
|
||||
display: 'block',
|
||||
marginTop: '16px',
|
||||
},
|
||||
});
|
||||
|
||||
const ChapterNavigation = styled('div')({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '5px',
|
||||
margin: '10px 0',
|
||||
|
||||
'& a': {
|
||||
flexGrow: 1,
|
||||
textDecoration: 'none',
|
||||
|
||||
'& button': {
|
||||
width: '100%',
|
||||
padding: '5px 8px',
|
||||
textTransform: 'none',
|
||||
settingsCollapsseHeader: {
|
||||
'& span': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const OpenDrawerButton = styled(IconButton)(({ theme }) => ({
|
||||
position: 'fixed',
|
||||
top: 0 + 20,
|
||||
left: 10 + 20,
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
borderRadius: 5,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
|
||||
openDrawerButton: {
|
||||
position: 'fixed',
|
||||
top: 0 + 20,
|
||||
left: 10 + 20,
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
borderRadius: 5,
|
||||
backgroundColor: theme.palette.mode === 'dark' ? 'black' : 'white',
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : theme.palette.grey[100],
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -146,6 +168,8 @@ export default function ReaderNavBar(props: IProps) {
|
||||
const [prevScrollPos, setPrevScrollPos] = useState(0);
|
||||
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(true);
|
||||
|
||||
const classes = useStyles(settings)();
|
||||
|
||||
const setSettingValue = (key: string, value: any) => setSettings({ ...settings, [key]: value });
|
||||
|
||||
const handleScroll = () => {
|
||||
@@ -160,16 +184,15 @@ export default function ReaderNavBar(props: IProps) {
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
const rootEl:HTMLDivElement = document.querySelector('#root')!;
|
||||
const mainContainer:HTMLDivElement = document.querySelector('#appMainContainer')!;
|
||||
const rootEl = document.querySelector('#root')!;
|
||||
const mainContainer = document.querySelector('#appMainContainer')!;
|
||||
|
||||
// main container and root div need to change styles...
|
||||
rootEl.style.display = 'flex';
|
||||
mainContainer.style.display = 'none';
|
||||
rootEl.classList.add(classes.AppRootElment);
|
||||
mainContainer.classList.add(classes.AppMainContainer);
|
||||
|
||||
return () => {
|
||||
rootEl.style.display = 'block';
|
||||
mainContainer.style.display = 'block';
|
||||
rootEl.classList.remove(classes.AppRootElment);
|
||||
mainContainer.classList.remove(classes.AppMainContainer);
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [handleScroll]);// handleScroll changes on every render
|
||||
@@ -184,10 +207,7 @@ export default function ReaderNavBar(props: IProps) {
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
>
|
||||
<Root sx={{
|
||||
position: settings.staticNav ? 'sticky' : 'fixed',
|
||||
}}
|
||||
>
|
||||
<div className={classes.root}>
|
||||
<header>
|
||||
<IconButton
|
||||
edge="start"
|
||||
@@ -214,14 +234,7 @@ export default function ReaderNavBar(props: IProps) {
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</header>
|
||||
<ListItem
|
||||
ContainerComponent="div"
|
||||
sx={{
|
||||
'& span': {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
|
||||
<ListItemText primary="Reader Settings" />
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton
|
||||
@@ -317,15 +330,16 @@ export default function ReaderNavBar(props: IProps) {
|
||||
</List>
|
||||
</Collapse>
|
||||
<hr />
|
||||
<Navigation>
|
||||
<div className={classes.navigation}>
|
||||
<span>
|
||||
{`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
|
||||
</span>
|
||||
<ChapterNavigation>
|
||||
<div className={classes.navigationChapters}>
|
||||
{chapter.index > 1
|
||||
&& (
|
||||
<Link
|
||||
replace
|
||||
style={{ gridArea: 'prev' }}
|
||||
to={`/manga/${manga.id}/chapter/${chapter.index - 1}`}
|
||||
>
|
||||
<Button
|
||||
@@ -340,6 +354,7 @@ export default function ReaderNavBar(props: IProps) {
|
||||
&& (
|
||||
<Link
|
||||
replace
|
||||
style={{ gridArea: 'next' }}
|
||||
to={`/manga/${manga.id}/chapter/${chapter.index + 1}`}
|
||||
>
|
||||
<Button
|
||||
@@ -350,13 +365,14 @@ export default function ReaderNavBar(props: IProps) {
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</ChapterNavigation>
|
||||
</Navigation>
|
||||
</Root>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slide>
|
||||
<Zoom in={!drawerOpen}>
|
||||
<Fade in={!hideOpenButton}>
|
||||
<OpenDrawerButton
|
||||
<IconButton
|
||||
className={classes.openDrawerButton}
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
@@ -366,7 +382,7 @@ export default function ReaderNavBar(props: IProps) {
|
||||
size="large"
|
||||
>
|
||||
<KeyboardArrowRightIcon />
|
||||
</OpenDrawerButton>
|
||||
</IconButton>
|
||||
</Fade>
|
||||
</Zoom>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user