diff options
author | Akihiko Odaki <akihiko.odaki.4i@stu.hosei.ac.jp> | 2017-08-05 01:57:46 +0900 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-08-04 18:57:46 +0200 |
commit | 9d1f8b9d6af1d384a4dd68bc6353a2fde5735b33 (patch) | |
tree | a6271cec3f53aa94a44dbd1d13e696bd587ba70d /app/javascript/mastodon/features/ui | |
parent | 400616813e6012780b97c5a297797ee50fd2072a (diff) |
Scroll columns area to right when children property is changed (#4517)
The feature to pin column could hide the rightmost column, which is specified with children property of ColumnsArea. The user is likely to see the column when the property changed, so scroll the area in such cases.
Diffstat (limited to 'app/javascript/mastodon/features/ui')
-rw-r--r-- | app/javascript/mastodon/features/ui/components/column.js | 2 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/components/columns_area.js | 14 |
2 files changed, 13 insertions, 3 deletions
diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index aea102aac..9031c16fc 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -2,7 +2,7 @@ import React from 'react'; import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; -import scrollTop from '../../../scroll'; +import { scrollTop } from '../../../scroll'; import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 63bd1b021..7652d67a0 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -12,6 +12,8 @@ import ColumnLoading from './column_loading'; import BundleColumnError from './bundle_column_error'; import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components'; +import { scrollRight } from '../../../scroll'; + const componentMap = { 'COMPOSE': Compose, 'HOME': HomeTimeline, @@ -49,9 +51,13 @@ export default class ColumnsArea extends ImmutablePureComponent { this.setState({ shouldAnimate: true }); } - componentDidUpdate() { + componentDidUpdate(prevProps) { this.lastIndex = getIndex(this.context.router.history.location.pathname); this.setState({ shouldAnimate: true }); + + if (this.props.children !== prevProps.children) { + scrollRight(this.node); + } } handleSwipe = (index) => { @@ -74,6 +80,10 @@ export default class ColumnsArea extends ImmutablePureComponent { } } + setRef = (node) => { + this.node = node; + } + renderView = (link, index) => { const columnIndex = getIndex(this.context.router.history.location.pathname); const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] }); @@ -114,7 +124,7 @@ export default class ColumnsArea extends ImmutablePureComponent { } return ( - <div className='columns-area'> + <div className='columns-area' ref={this.setRef}> {columns.map(column => { const params = column.get('params', null) === null ? null : column.get('params').toJS(); |