LenPayne
/
mastodon
forked from cybrespace/mastodon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve swiping (#4188) 

* feat(components/columns_area): Toggle animation settings

* fix(components/media_modal): Center non-visible views

* fix(components/media_modal): Check for null

* refactor(columns_area): Better logic
This commit is contained in:
Sorin Davidoi 2017-07-14 00:49:01 +02:00 committed by Eugen Rochko
parent a9a0c854e1
commit a9067167bb
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -32,12 +32,19 @@ export default class ColumnsArea extends ImmutablePureComponent {
children: PropTypes.node, children: PropTypes.node,
}; };
componentDidUpdate() {
this.lastIndex = getIndex(this.context.router.history.location.pathname);
}
handleSwipe = (index) => { handleSwipe = (index) => {
window.requestAnimationFrame(() => { this.pendingIndex = index;
window.requestAnimationFrame(() => { }
this.context.router.history.push(getLink(index));
}); handleAnimationEnd = () => {
}); if (typeof this.pendingIndex === 'number') {
this.context.router.history.push(getLink(this.pendingIndex));
this.pendingIndex = null;
}
} }
renderView = (link, index) => { renderView = (link, index) => {
@ -68,10 +75,11 @@ export default class ColumnsArea extends ImmutablePureComponent {
const { columns, children, singleColumn } = this.props; const { columns, children, singleColumn } = this.props;
const columnIndex = getIndex(this.context.router.history.location.pathname); const columnIndex = getIndex(this.context.router.history.location.pathname);
const shouldAnimate = Math.abs(this.lastIndex - columnIndex) === 1;
if (singleColumn) { if (singleColumn) {
return columnIndex !== -1 ? ( return columnIndex !== -1 ? (
<ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} animateTransitions={false} style={{ height: '100%' }}> <ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
{links.map(this.renderView)} {links.map(this.renderView)}
</ReactSwipeableViews> </ReactSwipeableViews>
) : <div className='columns-area'>{children}</div>; ) : <div className='columns-area'>{children}</div>;

2
app/javascript/styles/components.scss
View File

@ -1312,6 +1312,8 @@
} }
.react-swipeable-view-container > * { .react-swipeable-view-container > * {
display: flex;
align-items: center;
height: 100%; height: 100%;
} }