diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index cbc185a7d6..ef9a155223 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -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 ? ( - + {links.map(this.renderView)} ) :
{children}
; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index bcf7ba4e01..0face646dd 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1312,6 +1312,8 @@ } .react-swipeable-view-container > * { + display: flex; + align-items: center; height: 100%; }