me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix scroll to top in single column UI (#11463)

Browse source
This commit is contained in:
Eugen Rochko 2019-08-01 19:17:17 +02:00 committed by GitHub
parent 0ed96e9aee
commit 293f789239
26 changed files with 55 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/mastodon/components/column.js
View file

@ -8,10 +8,11 @@ export default class Column extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
label: PropTypes.string,
bindToDocument: PropTypes.bool,
};
scrollTop () {
const scrollable = this.node.querySelector('.scrollable');
const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable');
if (!scrollable) {
return;
@ -33,11 +34,19 @@ export default class Column extends React.PureComponent {
}
componentDidMount () {
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
if (this.props.bindToDocument) {
document.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
} else {
this.node.addEventListener('wheel', this.handleWheel, detectPassiveEvents.hasSupport ? { passive: true } : false);
}
}
componentWillUnmount () {
this.node.removeEventListener('wheel', this.handleWheel);
if (this.props.bindToDocument) {
document.removeEventListener('wheel', this.handleWheel);
} else {
this.node.removeEventListener('wheel', this.handleWheel);
}
}
render () {

15
app/javascript/mastodon/components/column_back_button.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import Icon from 'mastodon/components/icon';
import { createPortal } from 'react-dom';
export default class ColumnBackButton extends React.PureComponent {
@ -9,6 +10,10 @@ export default class ColumnBackButton extends React.PureComponent {
router: PropTypes.object,
};
static propTypes = {
multiColumn: PropTypes.bool,
};
handleClick = () => {
if (window.history && window.history.length === 1) {
this.context.router.history.push('/');
@ -18,12 +23,20 @@ export default class ColumnBackButton extends React.PureComponent {
}
render () {
return (
const { multiColumn } = this.props;
const component = (
<button onClick={this.handleClick} className='column-back-button'>
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button>
);
if (multiColumn) {
return component;
} else {
return createPortal(component, document.getElementById('tabs-bar__portal'));
}
}
}

5
app/javascript/mastodon/features/account_gallery/index.js
View file

@ -56,6 +56,7 @@ class AccountGallery extends ImmutablePureComponent {
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
isAccount: PropTypes.bool,
multiColumn: PropTypes.bool,
};
state = {
@ -116,7 +117,7 @@ class AccountGallery extends ImmutablePureComponent {
}
render () {
const { attachments, shouldUpdateScroll, isLoading, hasMore, isAccount } = this.props;
const { attachments, shouldUpdateScroll, isLoading, hasMore, isAccount, multiColumn } = this.props;
const { width } = this.state;
if (!isAccount) {
@ -143,7 +144,7 @@ class AccountGallery extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={shouldUpdateScroll}>
<div className='scrollable scrollable--flex' onScroll={this.handleScroll}>

2
app/javascript/mastodon/features/account_timeline/index.js
View file

@ -100,7 +100,7 @@ class AccountTimeline extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<StatusList
prepend={<HeaderContainer accountId={this.props.params.accountId} />}

2
app/javascript/mastodon/features/blocks/index.js
View file

@ -57,7 +57,7 @@ class Blocks extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />;
return (
<Column icon='ban' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='ban' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='blocks'

2
app/javascript/mastodon/features/community_timeline/index.js
View file

@ -105,7 +105,7 @@ class CommunityTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='users'
active={hasUnread}

2
app/javascript/mastodon/features/direct_timeline/index.js
View file

@ -75,7 +75,7 @@ class DirectTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='envelope'
active={hasUnread}

2
app/javascript/mastodon/features/domain_blocks/index.js
View file

@ -58,7 +58,7 @@ class Blocks extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />;
return (
<Column icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='minus-circle' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='domain_blocks'

2
app/javascript/mastodon/features/favourited_statuses/index.js
View file

@ -74,7 +74,7 @@ class Favourites extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any favourite toots yet. When you favourite one, it will show up here." />;
return (
<Column ref={this.setRef} label={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.heading)}>
<ColumnHeader
icon='star'
title={intl.formatMessage(messages.heading)}

2
app/javascript/mastodon/features/favourites/index.js
View file

@ -51,7 +51,7 @@ class Favourites extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='favourites'

2
app/javascript/mastodon/features/follow_requests/index.js
View file

@ -57,7 +57,7 @@ class FollowRequests extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />;
return (
<Column icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='follow_requests'

2
app/javascript/mastodon/features/followers/index.js
View file

@ -78,7 +78,7 @@ class Followers extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='followers'

2
app/javascript/mastodon/features/following/index.js
View file

@ -78,7 +78,7 @@ class Following extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='following'

2
app/javascript/mastodon/features/getting_started/index.js
View file

@ -148,7 +148,7 @@ class GettingStarted extends ImmutablePureComponent {
}
return (
<Column label={intl.formatMessage(messages.menu)}>
<Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.menu)}>
{multiColumn && <div className='column-header__wrapper'>
<h1 className='column-header'>
<button>

2
app/javascript/mastodon/features/hashtag_timeline/index.js
View file

@ -135,7 +135,7 @@ class HashtagTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef} label={`#${id}`}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={`#${id}`}>
<ColumnHeader
icon='hashtag'
active={hasUnread}

2
app/javascript/mastodon/features/home_timeline/index.js
View file

@ -98,7 +98,7 @@ class HomeTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='home'
active={hasUnread}

4
app/javascript/mastodon/features/keyboard_shortcuts/index.js
View file

@ -18,10 +18,10 @@ class KeyboardShortcuts extends ImmutablePureComponent {
};
render () {
const { intl } = this.props;
const { intl, multiColumn } = this.props;
return (
<Column icon='question' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='question' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<div className='keyboard-shortcuts scrollable optionally-scrollable'>
<table>

4
app/javascript/mastodon/features/list_timeline/index.js
View file

@ -148,14 +148,14 @@ class ListTimeline extends React.PureComponent {
} else if (list === false) {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<MissingIndicator />
</Column>
);
}
return (
<Column ref={this.setRef} label={title}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={title}>
<ColumnHeader
icon='list-ul'
active={hasUnread}

2
app/javascript/mastodon/features/lists/index.js
View file

@ -61,7 +61,7 @@ class Lists extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />;
return (
<Column icon='list-ul' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='list-ul' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<NewListForm />

2
app/javascript/mastodon/features/mutes/index.js
View file

@ -57,7 +57,7 @@ class Mutes extends ImmutablePureComponent {
const emptyMessage = <FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />;
return (
<Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<Column bindToDocument={!multiColumn} icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollableList
scrollKey='mutes'

2
app/javascript/mastodon/features/notifications/index.js
View file

@ -198,7 +198,7 @@ class Notifications extends React.PureComponent {
);
return (
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
<Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='bell'
active={isUnread}

2
app/javascript/mastodon/features/pinned_statuses/index.js
View file

@ -47,7 +47,7 @@ class PinnedStatuses extends ImmutablePureComponent {
const { intl, shouldUpdateScroll, statusIds, hasMore, multiColumn } = this.props;
return (
<Column icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
<Column bindToDocument={!multiColumn} icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
<ColumnBackButtonSlim />
<StatusList
statusIds={statusIds}

2
app/javascript/mastodon/features/public_timeline/index.js
View file

@ -105,7 +105,7 @@ class PublicTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef} label={intl.formatMessage(messages.title)}>
<Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
<ColumnHeader
icon='globe'
active={hasUnread}

2
app/javascript/mastodon/features/reblogs/index.js
View file

@ -51,7 +51,7 @@ class Reblogs extends ImmutablePureComponent {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='reblogs'

2
app/javascript/mastodon/features/status/index.js
View file

@ -471,7 +471,7 @@ class Status extends ImmutablePureComponent {
};
return (
<Column label={intl.formatMessage(messages.detailedStatus)}>
<Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader
showBackButton
multiColumn={multiColumn}

2
app/javascript/styles/mastodon/components.scss
View file

@ -2411,6 +2411,8 @@ a.account__display-name {
}
.column-back-button {
box-sizing: border-box;
width: 100%;
background: lighten($ui-base-color, 4%);
color: $highlight-text-color;
cursor: pointer;