colin
/
sharded-gotify
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sidebar height & hide ScrollUpButton until scrolled (#384)

This commit is contained in:
Stewart Thomson 2021-01-24 14:58:50 -05:00 committed by GitHub
parent d0f47c738b
commit 1cbd273974
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/common/ScrollUpButton.tsx
View File

@ -3,11 +3,39 @@ import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
import React, {Component} from 'react';
class ScrollUpButton extends Component {
state = {
display: 'none',
opacity: 0,
};
componentDidMount() {
window.addEventListener('scroll', this.scrollHandler);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.scrollHandler);
}
scrollHandler = () => {
const currentScrollPos = window.pageYOffset;
const opacity = Math.min(currentScrollPos / 500, 1);
const nextState = {display: currentScrollPos > 0 ? 'inherit' : 'none', opacity};
if (this.state.display !== nextState.display || this.state.opacity !== nextState.opacity) {
this.setState(nextState);
}
};
public render() {
return (
<Fab
color="primary"
style={{position: 'fixed', bottom: '30px', right: '30px', zIndex: 100000}}
style={{
position: 'fixed',
bottom: '30px',
right: '30px',
zIndex: 100000,
display: this.state.display,
opacity: this.state.opacity,
}}
onClick={this.scrollUp}>
<KeyboardArrowUp />
</Fab>

9
ui/src/layout/Navigation.tsx
View File

@ -12,7 +12,10 @@ import {Button, Hidden, IconButton, Typography} from '@material-ui/core';
import {DrawerProps} from '@material-ui/core/Drawer/Drawer';
import CloseIcon from '@material-ui/icons/Close';
const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> => ({
const styles = (theme: Theme): StyleRules<'root' | 'drawerPaper' | 'toolbar' | 'link'> => ({
root: {
height: '100%',
},
drawerPaper: {
position: 'relative',
width: 250,
@ -26,7 +29,7 @@ const styles = (theme: Theme): StyleRules<'drawerPaper' | 'toolbar' | 'link'> =>
},
});
type Styles = WithStyles<'drawerPaper' | 'toolbar' | 'link'>;
type Styles = WithStyles<'root' | 'drawerPaper' | 'toolbar' | 'link'>;
interface IProps {
loggedIn: boolean;
@ -74,7 +77,7 @@ class Navigation extends Component<
return (
<ResponsiveDrawer
classes={{paper: classes.drawerPaper}}
classes={{root: classes.root, paper: classes.drawerPaper}}
navOpen={navOpen}
setNavOpen={setNavOpen}
id="message-navigation">