status-im
/
liquid-funding
mirror of https://github.com/status-im/liquid-funding.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

adjust appbar based on scroll position

This commit is contained in:
Barry Gitarts 2019-08-27 15:34:23 -04:00 committed by Barry G
parent 1cb871b433
commit 9ccc2c455f
3 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -67,6 +67,7 @@
"@material-ui/styles": "^4.3.3", "@material-ui/styles": "^4.3.3",
"@nozbe/watermelondb": "^0.9.0", "@nozbe/watermelondb": "^0.9.0",
"@nozbe/with-observables": "^1.0.2", "@nozbe/with-observables": "^1.0.2",
"@rehooks/window-scroll-position": "^1.0.1",
"@rehooks/window-size": "^1.0.2", "@rehooks/window-size": "^1.0.2",
"@svgr/webpack": "4.1.0", "@svgr/webpack": "4.1.0",
"@trailofbits/embark-contract-info": "^1.1.0", "@trailofbits/embark-contract-info": "^1.1.0",

11
src/components/MainCointainer.jsx
View File

@ -1,5 +1,6 @@
import React,{ Suspense, lazy, useState, useEffect } from 'react'; import React,{ Suspense, lazy, useState, useEffect } from 'react';
import { Route, Link, Switch, withRouter } from 'react-router-dom' import { Route, Link, Switch, withRouter } from 'react-router-dom'
import useWindowScrollPosition from '@rehooks/window-scroll-position'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
import queryString from 'query-string' import queryString from 'query-string'
@ -62,8 +63,11 @@ const useStyles = makeStyles(theme => ({
duration: theme.transitions.duration.enteringScreen, duration: theme.transitions.duration.enteringScreen,
}), }),
}, },
appBarTop: {
boxShadow: 'none'
},
appBarBg: { appBarBg: {
backgroundColor: '#fff' backgroundColor: '#FAFAFA'
}, },
accountText: { accountText: {
color: '#939BA1' color: '#939BA1'
@ -150,6 +154,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
const [open, setOpen] = useState(false) const [open, setOpen] = useState(false)
const [queryParams, setQueryParams] = useState({}) const [queryParams, setQueryParams] = useState({})
const [logs, setLogs] = useState([]) const [logs, setLogs] = useState([])
const position = useWindowScrollPosition()
useEffect(() => { useEffect(() => {
const queryParams = queryString.parse(search) const queryParams = queryString.parse(search)
@ -173,6 +178,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
const classes = useStyles() const classes = useStyles()
const isHome = pathname === "/" const isHome = pathname === "/"
const popoverPosition = position.y < 100
return ( return (
<div className={classes.root}> <div className={classes.root}>
@ -181,6 +187,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
position="fixed" position="fixed"
className={classNames(classes.appBar, classes.appBarBg, { className={classNames(classes.appBar, classes.appBarBg, {
[classes.appBarShift]: open, [classes.appBarShift]: open,
[classes.appBarTop]: popoverPosition
})} })}
> >
<Toolbar disableGutters={!open}> <Toolbar disableGutters={!open}>
@ -197,7 +204,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca
color={'#FFFFFF'} />} color={'#FFFFFF'} />}
{!loading && <MenuIcon/>} {!loading && <MenuIcon/>}
</IconButton>} </IconButton>}
{!isHome && <Typography variant="h6" noWrap> {(!isHome || !popoverPosition) && <Typography variant="h6" noWrap>
<Link to="/" className={classNames(classes.link, classes.menuText)}>Liquid Funding</Link> <Link to="/" className={classNames(classes.link, classes.menuText)}>Liquid Funding</Link>
</Typography>} </Typography>}
<Typography component={'span'} className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={!account ? enableEthereum : console.log}> <Typography component={'span'} className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={!account ? enableEthereum : console.log}>

7
yarn.lock
View File

@ -1302,6 +1302,13 @@
hoist-non-react-statics "^3.3.0" hoist-non-react-statics "^3.3.0"
rxjs "^6.4.0" rxjs "^6.4.0"
"@rehooks/window-scroll-position@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@rehooks/window-scroll-position/-/window-scroll-position-1.0.1.tgz#3cb80f22cbf9cdbd2041b5236ae1fce8245b2f1c"
integrity sha512-+7uUcU2DBzXW4ygKTCqjCrtT4Nq0f+hNxQvAw69pXSBc7DbqmzfpxrYu27dT4tXrUKSQPFPpo5AdMv2oUJVM7g==
dependencies:
lodash.throttle "^4.1.1"
"@rehooks/window-size@^1.0.2": "@rehooks/window-size@^1.0.2":
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/@rehooks/window-size/-/window-size-1.0.2.tgz#24583dda021969e7b7166b923b055a47cca4e4b5" resolved "https://registry.yarnpkg.com/@rehooks/window-size/-/window-size-1.0.2.tgz#24583dda021969e7b7166b923b055a47cca4e4b5"