AkkomaGang/masto-fe
2
2
Fork 0
Code Issues 3 Pull requests Projects Releases Wiki Activity

[Glitch] Fix scroll to top in single column UI

Browse source 
Port 2dee293c4c to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-08-01 19:17:17 +02:00 committed by Thibaut Girka
parent fdadd520b1
commit 90bdbddbfe
27 changed files with 57 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/flavours/glitch/components/column.js
View file

@ -10,10 +10,11 @@ export default class Column extends React.PureComponent {
extraClasses: PropTypes.string, extraClasses: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
label: PropTypes.string, label: PropTypes.string,
bindToDocument: PropTypes.bool,
}; };
scrollTop () { scrollTop () {
const scrollable = this.node.querySelector('.scrollable'); const scrollable = this.props.bindToDocument ? document.scrollingElement : this.node.querySelector('.scrollable');
if (!scrollable) { if (!scrollable) {
return; return;
@ -35,11 +36,19 @@ export default class Column extends React.PureComponent {
} }
componentDidMount () { 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 () { componentWillUnmount () {
this.node.removeEventListener('wheel', this.handleWheel); if (this.props.bindToDocument) {
document.removeEventListener('wheel', this.handleWheel);
} else {
this.node.removeEventListener('wheel', this.handleWheel);
}
} }
render () { render () {

15
app/javascript/flavours/glitch/components/column_back_button.js
View file

@ -2,6 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import { createPortal } from 'react-dom';
export default class ColumnBackButton extends React.PureComponent { export default class ColumnBackButton extends React.PureComponent {
@ -9,6 +10,10 @@ export default class ColumnBackButton extends React.PureComponent {
router: PropTypes.object, router: PropTypes.object,
}; };
static propTypes = {
multiColumn: PropTypes.bool,
};
handleClick = (event) => { handleClick = (event) => {
// if history is exhausted, or we would leave mastodon, just go to root. // if history is exhausted, or we would leave mastodon, just go to root.
if (window.history.state) { if (window.history.state) {
@ -24,12 +29,20 @@ export default class ColumnBackButton extends React.PureComponent {
} }
render () { render () {
return ( const { multiColumn } = this.props;
const component = (
<button onClick={this.handleClick} className='column-back-button'> <button onClick={this.handleClick} className='column-back-button'>
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>
); );
if (multiColumn) {
return component;
} else {
return createPortal(component, document.getElementById('tabs-bar__portal'));
}
} }
} }

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

@ -12,11 +12,12 @@ class ProfileColumnHeader extends React.PureComponent {
static propTypes = { static propTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
multiColumn: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
render() { render() {
const { onClick, intl } = this.props; const { onClick, intl, multiColumn } = this.props;
return ( return (
<ColumnHeader <ColumnHeader
@ -24,6 +25,7 @@ class ProfileColumnHeader extends React.PureComponent {
title={intl.formatMessage(messages.profile)} title={intl.formatMessage(messages.profile)}
onClick={onClick} onClick={onClick}
showBackButton showBackButton
multiColumn={multiColumn}
/> />
); );
} }

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

@ -55,6 +55,7 @@ class AccountGallery extends ImmutablePureComponent {
isLoading: PropTypes.bool, isLoading: PropTypes.bool,
hasMore: PropTypes.bool, hasMore: PropTypes.bool,
isAccount: PropTypes.bool, isAccount: PropTypes.bool,
multiColumn: PropTypes.bool,
}; };
state = { state = {
@ -130,7 +131,7 @@ class AccountGallery extends ImmutablePureComponent {
} }
render () { render () {
const { attachments, isLoading, hasMore, isAccount } = this.props; const { attachments, isLoading, hasMore, isAccount, multiColumn } = this.props;
const { width } = this.state; const { width } = this.state;
if (!isAccount) { if (!isAccount) {
@ -157,7 +158,7 @@ class AccountGallery extends ImmutablePureComponent {
return ( return (
<Column ref={this.setColumnRef}> <Column ref={this.setColumnRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} multiColumn={multiColumn} />
<ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}> <ScrollContainer scrollKey='account_gallery' shouldUpdateScroll={this.shouldUpdateScroll}>
<div className='scrollable scrollable--flex' onScroll={this.handleScroll}> <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>

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

@ -97,7 +97,7 @@ class AccountTimeline extends ImmutablePureComponent {
return ( return (
<Column ref={this.setRef} name='account'> <Column ref={this.setRef} name='account'>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} multiColumn={multiColumn} />
<StatusList <StatusList
prepend={<HeaderContainer accountId={this.props.params.accountId} />} prepend={<HeaderContainer accountId={this.props.params.accountId} />}

2
app/javascript/flavours/glitch/features/blocks/index.js
View file

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

2
app/javascript/flavours/glitch/features/community_timeline/index.js
View file

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

2
app/javascript/flavours/glitch/features/direct_timeline/index.js
View file

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

2
app/javascript/flavours/glitch/features/domain_blocks/index.js
View file

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

2
app/javascript/flavours/glitch/features/favourited_statuses/index.js
View file

@ -73,7 +73,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." />; 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 ( return (
<Column ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}> <Column bindToDocument={!multiColumn} ref={this.setRef} name='favourites' label={intl.formatMessage(messages.heading)}>
<ColumnHeader <ColumnHeader
icon='star' icon='star'
title={intl.formatMessage(messages.heading)} title={intl.formatMessage(messages.heading)}

1
app/javascript/flavours/glitch/features/favourites/index.js
View file

@ -71,6 +71,7 @@ class Favourites extends ImmutablePureComponent {
title={intl.formatMessage(messages.heading)} title={intl.formatMessage(messages.heading)}
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
showBackButton showBackButton
multiColumn={multiColumn}
/> />
<ScrollableList <ScrollableList
scrollKey='favourites' scrollKey='favourites'

2
app/javascript/flavours/glitch/features/follow_requests/index.js
View file

@ -56,7 +56,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." />; 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 ( return (
<Column name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}> <Column bindToDocument={!multiColumn} name='follow-requests' icon='user-plus' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<ScrollableList <ScrollableList

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

@ -93,7 +93,7 @@ class Followers extends ImmutablePureComponent {
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} multiColumn={multiColumn} />
<ScrollableList <ScrollableList
scrollKey='followers' scrollKey='followers'

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

@ -93,7 +93,7 @@ class Following extends ImmutablePureComponent {
return ( return (
<Column ref={this.setRef}> <Column ref={this.setRef}>
<ProfileColumnHeader onClick={this.handleHeaderClick} /> <ProfileColumnHeader onClick={this.handleHeaderClick} multiColumn={multiColumn} />
<ScrollableList <ScrollableList
scrollKey='following' scrollKey='following'

2
app/javascript/flavours/glitch/features/getting_started/index.js
View file

@ -166,7 +166,7 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);
]); ]);
return ( return (
<Column name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile> <Column bindToDocument={!multiColumn} name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
<div className='scrollable optionally-scrollable'> <div className='scrollable optionally-scrollable'>
<div className='getting-started__wrapper'> <div className='getting-started__wrapper'>
{!multiColumn && <NavigationBar account={myAccount} />} {!multiColumn && <NavigationBar account={myAccount} />}

1
app/javascript/flavours/glitch/features/hashtag_timeline/index.js
View file

@ -145,6 +145,7 @@ class HashtagTimeline extends React.PureComponent {
pinned={pinned} pinned={pinned}
multiColumn={multiColumn} multiColumn={multiColumn}
showBackButton showBackButton
bindToDocument={!multiColumn}
> >
{columnId && <ColumnSettingsContainer columnId={columnId} />} {columnId && <ColumnSettingsContainer columnId={columnId} />}
</ColumnHeader> </ColumnHeader>

2
app/javascript/flavours/glitch/features/home_timeline/index.js
View file

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

4
app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js
View file

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

1
app/javascript/flavours/glitch/features/list_timeline/index.js
View file

@ -174,6 +174,7 @@ class ListTimeline extends React.PureComponent {
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
pinned={pinned} pinned={pinned}
multiColumn={multiColumn} multiColumn={multiColumn}
bindToDocument={!multiColumn}
> >
<div className='column-header__links'> <div className='column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>

2
app/javascript/flavours/glitch/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." />; 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 ( return (
<Column icon='bars' heading={intl.formatMessage(messages.heading)}> <Column bindToDocument={!multiColumn} icon='bars' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<NewListForm /> <NewListForm />

2
app/javascript/flavours/glitch/features/mutes/index.js
View file

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

1
app/javascript/flavours/glitch/features/notifications/index.js
View file

@ -234,6 +234,7 @@ class Notifications extends React.PureComponent {
return ( return (
<Column <Column
bindToDocument={!multiColumn}
ref={this.setColumnRef} ref={this.setColumnRef}
name='notifications' name='notifications'
extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null} extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null}

2
app/javascript/flavours/glitch/features/pinned_statuses/index.js
View file

@ -46,7 +46,7 @@ class PinnedStatuses extends ImmutablePureComponent {
const { intl, statusIds, hasMore, multiColumn } = this.props; const { intl, statusIds, hasMore, multiColumn } = this.props;
return ( 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 /> <ColumnBackButtonSlim />
<StatusList <StatusList
statusIds={statusIds} statusIds={statusIds}

2
app/javascript/flavours/glitch/features/public_timeline/index.js
View file

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

1
app/javascript/flavours/glitch/features/reblogs/index.js
View file

@ -71,6 +71,7 @@ class Reblogs extends ImmutablePureComponent {
title={intl.formatMessage(messages.heading)} title={intl.formatMessage(messages.heading)}
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
showBackButton showBackButton
multiColumn={multiColumn}
/> />
<ScrollableList <ScrollableList

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

@ -532,7 +532,7 @@ class Status extends ImmutablePureComponent {
}; };
return ( return (
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}> <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader <ColumnHeader
icon='comment' icon='comment'
title={intl.formatMessage(messages.tootHeading)} title={intl.formatMessage(messages.tootHeading)}

2
app/javascript/flavours/glitch/styles/components/columns.scss
View file

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