cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

Improve swiping (#4188)

Browse source 
* 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,
};
componentDidUpdate() {
this.lastIndex = getIndex(this.context.router.history.location.pathname);
}
handleSwipe = (index) => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.context.router.history.push(getLink(index));
});
});
this.pendingIndex = index;
}
handleAnimationEnd = () => {
if (typeof this.pendingIndex === 'number') {
this.context.router.history.push(getLink(this.pendingIndex));
this.pendingIndex = null;
}
}
renderView = (link, index) => {
@ -68,10 +75,11 @@ export default class ColumnsArea extends ImmutablePureComponent {
const { columns, children, singleColumn } = this.props;
const columnIndex = getIndex(this.context.router.history.location.pathname);
const shouldAnimate = Math.abs(this.lastIndex - columnIndex) === 1;
if (singleColumn) {
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)}
</ReactSwipeableViews>
) : <div className='columns-area'>{children}</div>;

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

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