From 4849eb8e7f58e9f1da73422fa71dbb07d6ff1db5 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 8 Mar 2019 20:34:31 +0100 Subject: [PATCH] Make clicking on the account and status column headers scroll to top --- .../account/components/profile_column_header.js | 4 +++- .../glitch/features/account_gallery/index.js | 12 ++++++++++-- .../glitch/features/account_timeline/index.js | 12 ++++++++++-- .../flavours/glitch/features/followers/index.js | 12 ++++++++++-- .../flavours/glitch/features/following/index.js | 12 ++++++++++-- .../flavours/glitch/features/status/index.js | 11 ++++++++++- 6 files changed, 53 insertions(+), 10 deletions(-) diff --git a/app/javascript/flavours/glitch/features/account/components/profile_column_header.js b/app/javascript/flavours/glitch/features/account/components/profile_column_header.js index 1a6abef37..b6d373a2c 100644 --- a/app/javascript/flavours/glitch/features/account/components/profile_column_header.js +++ b/app/javascript/flavours/glitch/features/account/components/profile_column_header.js @@ -11,16 +11,18 @@ export default @injectIntl class ProfileColumnHeader extends React.PureComponent { static propTypes = { + onClick: PropTypes.func, intl: PropTypes.object.isRequired, }; render() { - const { intl } = this.props; + const { onClick, intl } = this.props; return ( ); diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js index a9ea5088e..63c1b2d86 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.js +++ b/app/javascript/flavours/glitch/features/account_gallery/index.js @@ -65,6 +65,10 @@ export default class AccountGallery extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScrollToBottom = () => { if (this.props.hasMore) { this.handleLoadMore(this.props.medias.size > 0 ? this.props.medias.last().getIn(['status', 'id']) : undefined); @@ -94,6 +98,10 @@ export default class AccountGallery extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { medias, isLoading, hasMore } = this.props; @@ -112,8 +120,8 @@ export default class AccountGallery extends ImmutablePureComponent { } return ( - - + +
diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index 415e3be20..d683b8789 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -57,10 +57,18 @@ export default class AccountTimeline extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleLoadMore = maxId => { this.props.dispatch(expandAccountTimeline(this.props.params.accountId, { maxId, withReplies: this.props.withReplies })); } + setRef = c => { + this.column = c; + } + render () { const { statusIds, featuredStatusIds, isLoading, hasMore } = this.props; @@ -73,8 +81,8 @@ export default class AccountTimeline extends ImmutablePureComponent { } return ( - - + + } diff --git a/app/javascript/flavours/glitch/features/followers/index.js b/app/javascript/flavours/glitch/features/followers/index.js index 124004cb6..6bb9f60fd 100644 --- a/app/javascript/flavours/glitch/features/followers/index.js +++ b/app/javascript/flavours/glitch/features/followers/index.js @@ -43,6 +43,10 @@ export default class Followers extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; @@ -61,6 +65,10 @@ export default class Followers extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { accountIds, hasMore } = this.props; @@ -79,8 +87,8 @@ export default class Followers extends ImmutablePureComponent { } return ( - - + +
diff --git a/app/javascript/flavours/glitch/features/following/index.js b/app/javascript/flavours/glitch/features/following/index.js index 656100dad..3f2f091a1 100644 --- a/app/javascript/flavours/glitch/features/following/index.js +++ b/app/javascript/flavours/glitch/features/following/index.js @@ -43,6 +43,10 @@ export default class Following extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + handleScroll = (e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; @@ -61,6 +65,10 @@ export default class Following extends ImmutablePureComponent { return !(location.state && location.state.mastodonModalOpen); } + setRef = c => { + this.column = c; + } + render () { const { accountIds, hasMore } = this.props; @@ -79,8 +87,8 @@ export default class Following extends ImmutablePureComponent { } return ( - - + +
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js index 880372de5..73d3c7e9e 100644 --- a/app/javascript/flavours/glitch/features/status/index.js +++ b/app/javascript/flavours/glitch/features/status/index.js @@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent { } } + handleHeaderClick = () => { + this.column.scrollTop(); + } + renderChildren (list) { return list.map(id => ( { + this.column = c; + } + componentDidUpdate (prevProps) { if (this.props.params.statusId && (this.props.params.statusId !== prevProps.params.statusId || prevProps.ancestorsIds.size < this.props.ancestorsIds.size)) { const { status, ancestorsIds } = this.props; @@ -452,10 +460,11 @@ export default class Status extends ImmutablePureComponent { }; return ( - +