mirrors/catstodon
1
0
Fork 0
mirror of https://git.kescher.at/CatCatNya/catstodon.git synced 2024-11-24 03:28:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make clicking on the account and status column headers scroll to top

Browse source
This commit is contained in:
Thibaut Girka 2019-03-08 20:34:31 +01:00 committed by ThibG
parent 45e4c90a23
commit 4849eb8e7f
6 changed files with 53 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/flavours/glitch/features/account/components/profile_column_header.js
View file

@ -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 (
<ColumnHeader
icon='user-circle'
title={intl.formatMessage(messages.profile)}
onClick={onClick}
showBackButton
/>
);

12
app/javascript/flavours/glitch/features/account_gallery/index.js
View file

@ -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 (
<Column>
<ProfileColumnHeader />
<Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable scrollable--flex' onScroll={this.handleScroll}>

12
app/javascript/flavours/glitch/features/account_timeline/index.js
View file

@ -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 (
<Column name='account'>
<ProfileColumnHeader />
<Column ref={this.setRef} name='account'>
<ProfileColumnHeader onClick={this.handleHeaderClick} />
<StatusList
prepend={<HeaderContainer accountId={this.props.params.accountId} />}

12
app/javascript/flavours/glitch/features/followers/index.js
View file

@ -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 (
<Column>
<ProfileColumnHeader />
<Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='followers' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>

12
app/javascript/flavours/glitch/features/following/index.js
View file

@ -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 (
<Column>
<ProfileColumnHeader />
<Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} />
<ScrollContainer scrollKey='following' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable' onScroll={this.handleScroll}>

11
app/javascript/flavours/glitch/features/status/index.js
View file

@ -369,6 +369,10 @@ export default class Status extends ImmutablePureComponent {
}
}
handleHeaderClick = () => {
this.column.scrollTop();
}
renderChildren (list) {
return list.map(id => (
<StatusContainer
@ -390,6 +394,10 @@ export default class Status extends ImmutablePureComponent {
this.node = c;
}
setColumnRef = c => {
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 (
<Column label={intl.formatMessage(messages.detailedStatus)}>
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader
icon='comment'
title={intl.formatMessage(messages.tootHeading)}
onClick={this.handleHeaderClick}
showBackButton
extraButton={(
<button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><i className={`fa fa-${!isExpanded ? 'eye-slash' : 'eye'}`} /></button>