Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed menu width #676

Merged
merged 7 commits into from Apr 9, 2019
@@ -234,7 +234,7 @@ class Wrapper extends React.PureComponent {
connected={connected}
notifications={notifications.length}
daoAddress={daoAddress}
openProgress={progress}
swipeProgress={progress}
autoClosing={autoClosingPanel}

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 8, 2019

Member

Wondering if we can roll autoClosingPanel and menuSwipeEnabled into the same prop, perhaps collapsibleMenuBar?

This comment has been minimized.

Copy link
@bpierre

bpierre Apr 8, 2019

Author Member

Agreed, especially since the swipe feature doesn’t only depend on the viewport’s width.

See 4e5aa06

onOpenApp={this.openApp}
onCloseMenuPanel={this.handleMenuPanelClose}
@@ -322,23 +322,30 @@ class AnimatedMenuPanel extends React.Component {

render() {
const { animate } = this.state
const { openProgress, onCloseMenuPanel, ...props } = this.props
const {
swipeProgress,
onCloseMenuPanel,
autoClosing,
...props
} = this.props
return (
<React.Fragment>
<Spring
from={{ progress: 0 }}
to={{ progress: openProgress }}
config={springs.lazy}
immediate={!animate}
native
>
{({ progress }) => (
<Wrap
style={{
pointerEvents: openProgress === 1 ? 'auto' : 'none',
transform: progress.interpolate(
v =>
`
<Spring
from={{ progress: 0 }}
to={{ progress: swipeProgress }}
config={springs.lazy}
immediate={!animate}
native
>
{({ progress }) => {
return (
<React.Fragment>
<Wrap
style={{
position: autoClosing ? 'absolute' : 'relative',
pointerEvents: swipeProgress === 1 ? 'auto' : 'none',
transform: progress.interpolate(
v =>
`
translate3d(
calc(
${-100 * (1 - v)}% -
@@ -347,36 +354,41 @@ class AnimatedMenuPanel extends React.Component {
0, 0
)
`
),
opacity: progress.interpolate(v => Number(v > 0)),
}}
>
<Viewport>
{({ height }) => (
<MenuPanel viewportHeight={height} {...props} />
)}
</Viewport>
</Wrap>
)}
</Spring>
<Viewport>
{({ below }) =>
below('medium') && (
<Overlay
opened={Boolean(openProgress)}
onClick={onCloseMenuPanel}
/>
)
}
</Viewport>
</React.Fragment>
),
opacity: progress.interpolate(v => Number(v > 0)),
}}
>
<Viewport>
{({ height }) => (
<MenuPanel viewportHeight={height} {...props} />
)}
</Viewport>
</Wrap>
{autoClosing && (
<Overlay
onClick={onCloseMenuPanel}
style={{
/* by leaving a 1px edge Android users can swipe to open
* from the edge of their screen when an iframe app is being
* used */
width: progress.interpolate(p =>
p === 0 ? '10px' : '100vw'

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 8, 2019

Member

Should we update the comment to 10px? Is the increase to make the swipe register more consistently?

This comment has been minimized.

Copy link
@bpierre

bpierre Apr 8, 2019

Author Member

ooooh this was for debugging purposes, good catch 😮

),
opacity: progress,
}}
/>
)}
</React.Fragment>
)
}}
</Spring>
)
}
}

AnimatedMenuPanel.propTypes = {
autoClosing: PropTypes.bool,
openProgress: PropTypes.number.isRequired,
swipeProgress: PropTypes.number.isRequired,
onCloseMenuPanel: PropTypes.func.isRequired,
}

@@ -416,32 +428,18 @@ const StyledPreferencesButton = styled(Button)`
)}
`

const Overlay = styled.div`
const Overlay = styled(animated.div)`
position: absolute;
z-index: 2;
/* by leaving a 1px edge Android users can swipe to open
* from the edge of their screen when an iframe app is being
* used */
width: ${({ opened }) => (opened ? '100vw' : '1px')};
height: 100vh;
background: rgba(0, 0, 0, 0.3);
`

const Wrap = styled(animated.div)`
position: absolute;
z-index: 3;
width: 90vw;
width: 220px;
height: 100vh;
min-width: 300px;
flex: none;
${breakpoint(
'medium',
`
position: relative;
width: 220px;
min-width: 0;
`
)};
`

const Main = styled.div`
@@ -2,11 +2,11 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Gesture } from 'react-with-gesture'
import { Viewport } from '@aragon/ui'

const THRESHOLD_VERTICAL_TOLERANCE = 10
const THRESHOLD_DIRECTION = 0.2
const THRESHOLD_PROGRESS = 0.5
const MENU_WIDTH = 220

This comment has been minimized.

Copy link
@sohkai

sohkai Apr 8, 2019

Member

Maybe we could export this as part of MenuPanel?


class SwipeContainer extends React.Component {
static propTypes = {
@@ -15,7 +15,6 @@ class SwipeContainer extends React.Component {
menuPanelOpened: PropTypes.bool.isRequired,
onMenuPanelClose: PropTypes.func.isRequired,
onMenuPanelOpen: PropTypes.func.isRequired,
width: PropTypes.number.isRequired,
}

_previousProgress = 0
@@ -27,10 +26,9 @@ class SwipeContainer extends React.Component {
menuPanelOpened,
onMenuPanelClose,
onMenuPanelOpen,
width,
} = this.props

const oneThirdWindowWidth = width / 3
const xThreshold = MENU_WIDTH / 3

return (
<Gesture passive={{ passive: false }} mouse={false} touch={enabled}>
@@ -80,16 +78,12 @@ class SwipeContainer extends React.Component {
yDir < THRESHOLD_DIRECTION)
) {
event.preventDefault()
if (
xDelta > 0 &&
!menuPanelOpened &&
xInitial < oneThirdWindowWidth
) {
if (xDelta > 0 && !menuPanelOpened && xInitial < xThreshold) {
// opening
progress = this._previousProgress = x / (width * 0.9)
progress = this._previousProgress = x / MENU_WIDTH
} else if (menuPanelOpened) {
// closing
progress = this._previousProgress = 1 + xDelta / width
progress = this._previousProgress = 1 + xDelta / MENU_WIDTH
}
progress = this._previousProgress = Math.max(
0.000001,
@@ -110,8 +104,4 @@ const Container = styled.div`
min-height: 0;
`

export default props => (
<Viewport>
{({ width }) => <SwipeContainer width={width} {...props} />}
</Viewport>
)
export default SwipeContainer
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.