Mirrors/tachiyomi-extensions-inspector
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/tachiyomi-extensions-inspector.git synced 2024-12-24 15:51:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

drawer hide on click outside of it

Browse Source
This commit is contained in:
Aria Moradi 2021-03-23 04:28:23 +04:30
parent bf908c4d17
commit 85ec2ed367
1 changed files with 87 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
webUI/react/src/components/ReaderNavBar.tsx
View File

@ -24,6 +24,7 @@ import ListItemText from '@material-ui/core/ListItemText';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import DarkTheme from '../context/DarkTheme'; import DarkTheme from '../context/DarkTheme';
import NavBarContext from '../context/NavbarContext'; import NavBarContext from '../context/NavbarContext';
@ -162,6 +163,7 @@ export default function ReaderNavBar(props: IProps) {
} = props; } = props;
const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav); const [drawerOpen, setDrawerOpen] = useState(false || settings.staticNav);
const [drawerVisible, setDrawerVisible] = useState(false || settings.staticNav);
const [hideOpenButton, setHideOpenButton] = useState(false); const [hideOpenButton, setHideOpenButton] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false); const [settingsCollapseOpen, setSettingsCollapseOpen] = useState(false);
@ -180,14 +182,6 @@ export default function ReaderNavBar(props: IProps) {
} }
}; };
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [handleScroll]);// handleScroll changes on every render
useEffect(() => { useEffect(() => {
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
@ -200,27 +194,38 @@ export default function ReaderNavBar(props: IProps) {
return () => { return () => {
rootEl.classList.remove(classes.AppRootElment); rootEl.classList.remove(classes.AppRootElment);
mainContainer.classList.remove(classes.AppMainContainer); mainContainer.classList.remove(classes.AppMainContainer);
window.removeEventListener('scroll', handleScroll);
}; };
}, [handleScroll]);// handleScroll changes on every render }, [handleScroll]);// handleScroll changes on every render
return ( return (
<> <>
<Slide direction="right" in={drawerOpen} timeout={200} appear={false}> <ClickAwayListener onClickAway={() => (drawerVisible && setDrawerOpen(false))}>
<div className={classes.root}> <Slide
<header> direction="right"
<IconButton in={drawerOpen}
edge="start" timeout={200}
color="inherit" appear={false}
aria-label="menu" mountOnEnter
disableRipple unmountOnExit
onClick={() => history.push(`/manga/${manga.id}`)} onEntered={() => setDrawerVisible(true)}
> onExited={() => setDrawerVisible(false)}
<CloseIcon /> >
</IconButton> <div className={classes.root}>
<Typography variant="h1"> <header>
{title} <IconButton
</Typography> edge="start"
{!settings.staticNav color="inherit"
aria-label="menu"
disableRipple
onClick={() => history.push(`/manga/${manga.id}`)}
>
<CloseIcon />
</IconButton>
<Typography variant="h1">
{title}
</Typography>
{!settings.staticNav
&& ( && (
<IconButton <IconButton
edge="start" edge="start"
@ -232,60 +237,60 @@ export default function ReaderNavBar(props: IProps) {
<KeyboardArrowLeftIcon /> <KeyboardArrowLeftIcon />
</IconButton> </IconButton>
) } ) }
</header> </header>
<ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}> <ListItem ContainerComponent="div" className={classes.settingsCollapsseHeader}>
<ListItemText primary="Reader Settings" /> <ListItemText primary="Reader Settings" />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
disableRipple disableRipple
disableFocusRipple disableFocusRipple
onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)} onClick={() => setSettingsCollapseOpen(!settingsCollapseOpen)}
> >
{settingsCollapseOpen && <KeyboardArrowUpIcon />} {settingsCollapseOpen && <KeyboardArrowUpIcon />}
{!settingsCollapseOpen && <KeyboardArrowDownIcon />} {!settingsCollapseOpen && <KeyboardArrowDownIcon />}
</IconButton> </IconButton>
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit> <Collapse in={settingsCollapseOpen} timeout="auto" unmountOnExit>
<List> <List>
<ListItem> <ListItem>
<ListItemText primary="Static Navigation" /> <ListItemText primary="Static Navigation" />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Switch <Switch
edge="end" edge="end"
checked={settings.staticNav} checked={settings.staticNav}
onChange={(e) => setSettingValue('staticNav', e.target.checked)} onChange={(e) => setSettingValue('staticNav', e.target.checked)}
/> />
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemText primary="Show page number" /> <ListItemText primary="Show page number" />
<ListItemSecondaryAction> <ListItemSecondaryAction>
<Switch <Switch
edge="end" edge="end"
checked={settings.showPageNumber} checked={settings.showPageNumber}
onChange={(e) => setSettingValue('showPageNumber', e.target.checked)} onChange={(e) => setSettingValue('showPageNumber', e.target.checked)}
/> />
</ListItemSecondaryAction> </ListItemSecondaryAction>
</ListItem> </ListItem>
</List> </List>
</Collapse> </Collapse>
<hr /> <hr />
<div className={classes.navigation}> <div className={classes.navigation}>
<span> <span>
Currently on page Currently on page
{' '} {' '}
{curPage + 1} {curPage + 1}
{' '} {' '}
of of
{' '} {' '}
{chapter.pageCount} {chapter.pageCount}
</span> </span>
<div className={classes.navigationChapters}> <div className={classes.navigationChapters}>
{chapter.chapterIndex > 1 {chapter.chapterIndex > 1
&& ( && (
<Link <Link
style={{ gridArea: 'prev' }} style={{ gridArea: 'prev' }}
@ -301,7 +306,7 @@ export default function ReaderNavBar(props: IProps) {
</Button> </Button>
</Link> </Link>
)} )}
{chapter.chapterIndex < chapter.chapterCount {chapter.chapterIndex < chapter.chapterCount
&& ( && (
<Link <Link
style={{ gridArea: 'next' }} style={{ gridArea: 'next' }}
@ -317,10 +322,11 @@ export default function ReaderNavBar(props: IProps) {
</Button> </Button>
</Link> </Link>
)} )}
</div>
</div> </div>
</div> </div>
</div> </Slide>
</Slide> </ClickAwayListener>
<Zoom in={!drawerOpen}> <Zoom in={!drawerOpen}>
<Fade in={!hideOpenButton}> <Fade in={!hideOpenButton}>
<IconButton <IconButton