Unfloyded/Legamunt
0
0
Fork 0
Code 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 8b9d0a0533
commit 2dee293c4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 55 additions and 30 deletions
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'));
}
}
}