From 912ca0fa57977d13d930a09ec19b4ca349830e1a Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Fri, 14 Jul 2017 00:49:01 +0200 Subject: [PATCH] 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 --- .../features/ui/components/columns_area.js | 20 +++++++++++++------ app/javascript/styles/components.scss | 2 ++ 2 files changed, 16 insertions(+), 6 deletions(-) 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%; }