diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js
index d453874636ed50261fabca67f0a61e2907111b06..55e3bfd5e0b4312e4cf8ade94b8a0556971f4810 100644
--- a/app/javascript/mastodon/components/column.js
+++ b/app/javascript/mastodon/components/column.js
@@ -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 () {
diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js
index f41045787e47edbc70db7f9d4cafefb1b933b831..cc0e5c07c3c06c5b657eb7be78701185266d58fe 100644
--- a/app/javascript/mastodon/components/column_back_button.js
+++ b/app/javascript/mastodon/components/column_back_button.js
@@ -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'));
+ }
}
}
diff --git a/app/javascript/mastodon/features/account_gallery/index.js b/app/javascript/mastodon/features/account_gallery/index.js
index 5d6a53e18eb9b6f39bfc5b41ef506ca6e5c458d4..f1a665d8ff8d3a00e19bff4112a170c77dec4109 100644
--- a/app/javascript/mastodon/features/account_gallery/index.js
+++ b/app/javascript/mastodon/features/account_gallery/index.js
@@ -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}>
diff --git a/app/javascript/mastodon/features/account_timeline/index.js b/app/javascript/mastodon/features/account_timeline/index.js
index 9914b7e654b76aa66b05edd7e9908c72f12a687f..69bab1e86eaba301df39d21a8fe609e367463362 100644
--- a/app/javascript/mastodon/features/account_timeline/index.js
+++ b/app/javascript/mastodon/features/account_timeline/index.js
@@ -100,7 +100,7 @@ class AccountTimeline extends ImmutablePureComponent {
return (
<Column>
- <ColumnBackButton />
+ <ColumnBackButton multiColumn={multiColumn} />
<StatusList
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
diff --git a/app/javascript/mastodon/features/blocks/index.js b/app/javascript/mastodon/features/blocks/index.js
index 8fb0f051b35c0e98953899328de95fa130860390..051431ed2933a138fe522c0c466701e48ec05020 100644
--- a/app/javascript/mastodon/features/blocks/index.js
+++ b/app/javascript/mastodon/features/blocks/index.js
@@ -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'
diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js
index 2f6999f61422743707f4627498a32f91937548bf..f95fa49709e02cbde1b4036fa0b172b8a2bba3b8 100644
--- a/app/javascript/mastodon/features/community_timeline/index.js
+++ b/app/javascript/mastodon/features/community_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/direct_timeline/index.js b/app/javascript/mastodon/features/direct_timeline/index.js
index d202f3bfd904d86255010f995615399fe4978f41..5ce795760076f02c3734f3cc2f85b025ce4cd8b9 100644
--- a/app/javascript/mastodon/features/direct_timeline/index.js
+++ b/app/javascript/mastodon/features/direct_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/domain_blocks/index.js b/app/javascript/mastodon/features/domain_blocks/index.js
index 16e200b31e46eaec325ad669447c956830bc58b5..482245c867cc9fdaccdb4775848af5f61c3b45d8 100644
--- a/app/javascript/mastodon/features/domain_blocks/index.js
+++ b/app/javascript/mastodon/features/domain_blocks/index.js
@@ -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'
diff --git a/app/javascript/mastodon/features/favourited_statuses/index.js b/app/javascript/mastodon/features/favourited_statuses/index.js
index 8c7b2386965d8e5bbd6abc48b097f271febbbd20..db8a3f815f17295d1db6a3e8cbc9965b141a23b5 100644
--- a/app/javascript/mastodon/features/favourited_statuses/index.js
+++ b/app/javascript/mastodon/features/favourited_statuses/index.js
@@ -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)}
diff --git a/app/javascript/mastodon/features/favourites/index.js b/app/javascript/mastodon/features/favourites/index.js
index 464f7aeb0a7e4566dea4452a9e9f0e960332ea57..62d3c2f0674959197b4819117c02cbe6ebfca576 100644
--- a/app/javascript/mastodon/features/favourites/index.js
+++ b/app/javascript/mastodon/features/favourites/index.js
@@ -51,7 +51,7 @@ class Favourites extends ImmutablePureComponent {
return (
<Column>
- <ColumnBackButton />
+ <ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='favourites'
diff --git a/app/javascript/mastodon/features/follow_requests/index.js b/app/javascript/mastodon/features/follow_requests/index.js
index 570cf57c8a6bc5c47fe8c4336873f0deca885b80..57ef441454707f191b61331b20765310b4f72788 100644
--- a/app/javascript/mastodon/features/follow_requests/index.js
+++ b/app/javascript/mastodon/features/follow_requests/index.js
@@ -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'
diff --git a/app/javascript/mastodon/features/followers/index.js b/app/javascript/mastodon/features/followers/index.js
index dce05bdc629acdc720515554f79da47686a70e66..3913bf8d0795961fb2dc82120e2fe96f0ea105db 100644
--- a/app/javascript/mastodon/features/followers/index.js
+++ b/app/javascript/mastodon/features/followers/index.js
@@ -78,7 +78,7 @@ class Followers extends ImmutablePureComponent {
return (
<Column>
- <ColumnBackButton />
+ <ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='followers'
diff --git a/app/javascript/mastodon/features/following/index.js b/app/javascript/mastodon/features/following/index.js
index d9f2ef0790dda09d07f734a6ca8bc95b99af395b..8e126f4c391c848038d7f3c38fb3a55590b6a4eb 100644
--- a/app/javascript/mastodon/features/following/index.js
+++ b/app/javascript/mastodon/features/following/index.js
@@ -78,7 +78,7 @@ class Following extends ImmutablePureComponent {
return (
<Column>
- <ColumnBackButton />
+ <ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='following'
diff --git a/app/javascript/mastodon/features/getting_started/index.js b/app/javascript/mastodon/features/getting_started/index.js
index fc7840ec190d1f635f0895d173ffd008367ca8f4..791f22d47140968e33657bbdff5df15f5e8c9735 100644
--- a/app/javascript/mastodon/features/getting_started/index.js
+++ b/app/javascript/mastodon/features/getting_started/index.js
@@ -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>
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js
index c50f6a79ae8fd79164669392d6e5880ace32bab7..28200e6c21f0f61a529c03090b2343449fd869a6 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.js
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js
index bf8ff117bb713c674b24b6f39e4fc21713fa4e11..1cafb88eda51b76d844d79ca5ad26a36b7a800d8 100644
--- a/app/javascript/mastodon/features/home_timeline/index.js
+++ b/app/javascript/mastodon/features/home_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.js b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
index 01b45652c5339aaf62dae187d3d54858fd9f71c1..90dc87cbb0b673eb8a13b332ff726bd9ad06f516 100644
--- a/app/javascript/mastodon/features/keyboard_shortcuts/index.js
+++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.js
@@ -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>
diff --git a/app/javascript/mastodon/features/list_timeline/index.js b/app/javascript/mastodon/features/list_timeline/index.js
index 844c93db1e5facc176e6bc07ca14afc146887f98..f3205b2bff196466c48c5982dd6bc30367563cc8 100644
--- a/app/javascript/mastodon/features/list_timeline/index.js
+++ b/app/javascript/mastodon/features/list_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/lists/index.js b/app/javascript/mastodon/features/lists/index.js
index a06e0b934f711407273e77661a49964482715e3b..7f7f5009ca93890e332542be80198b77917e5167 100644
--- a/app/javascript/mastodon/features/lists/index.js
+++ b/app/javascript/mastodon/features/lists/index.js
@@ -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 />
diff --git a/app/javascript/mastodon/features/mutes/index.js b/app/javascript/mastodon/features/mutes/index.js
index 57d8b9915f40659bc61fd56457ad786f7700f1a5..91dd268c1630497857cca86f6cc3d9ae8aee5614 100644
--- a/app/javascript/mastodon/features/mutes/index.js
+++ b/app/javascript/mastodon/features/mutes/index.js
@@ -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'
diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index e708c4fcf151bd5d89e7d0c87442e8377413589b..f2b239afedfd222d49fa55fb7959afde44069505 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/pinned_statuses/index.js b/app/javascript/mastodon/features/pinned_statuses/index.js
index 64ebfc7ae567465dd04989f1f2b04f97370bf573..ad5c9cafc367fceec9ff966a8bdad7921c45f85a 100644
--- a/app/javascript/mastodon/features/pinned_statuses/index.js
+++ b/app/javascript/mastodon/features/pinned_statuses/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js
index 1edb303b84d1d5afe64bbfc30bb7ce543bc054f0..e7825e2366493bea810c6fb375bfca110b8135d9 100644
--- a/app/javascript/mastodon/features/public_timeline/index.js
+++ b/app/javascript/mastodon/features/public_timeline/index.js
@@ -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}
diff --git a/app/javascript/mastodon/features/reblogs/index.js b/app/javascript/mastodon/features/reblogs/index.js
index 26f93ad1b210a99377ff556ec8efa6dd0084226a..229f626b3ecc0c642ca22ff9ca947f404a5f5550 100644
--- a/app/javascript/mastodon/features/reblogs/index.js
+++ b/app/javascript/mastodon/features/reblogs/index.js
@@ -51,7 +51,7 @@ class Reblogs extends ImmutablePureComponent {
return (
<Column>
- <ColumnBackButton />
+ <ColumnBackButton multiColumn={multiColumn} />
<ScrollableList
scrollKey='reblogs'
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 6c8cf3f1bdbef1843e5e364afa0354cd30309af5..ad4f758207e7f16eed5507927f8aaf14173da3d8 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -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}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index b979c9b9a68e606a02fad9abd4130c378de4216d..57b387b0dba95efa59be19ade14452d0a551d5b0 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -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;