Fix column header scrolling with the page (#11458)

Regression from aa22b38
This commit is contained in:
Eugen Rochko 2019-08-01 12:26:58 +02:00 committed by GitHub
parent c4043ba2f2
commit 706a48ee1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 53 additions and 15 deletions

View file

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';
import classNames from 'classnames';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import Icon from 'mastodon/components/icon';
@ -28,6 +29,7 @@ class ColumnHeader extends React.PureComponent {
showBackButton: PropTypes.bool,
children: PropTypes.node,
pinned: PropTypes.bool,
placeholder: PropTypes.bool,
onPin: PropTypes.func,
onMove: PropTypes.func,
onClick: PropTypes.func,
@ -79,7 +81,7 @@ class ColumnHeader extends React.PureComponent {
}
render () {
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage } } = this.props;
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder } = this.props;
const { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', {
@ -146,7 +148,7 @@ class ColumnHeader extends React.PureComponent {
const hasTitle = icon && title;
return (
const component = (
<div className={wrapperClassName}>
<h1 className={buttonClassName}>
{hasTitle && (
@ -172,6 +174,12 @@ class ColumnHeader extends React.PureComponent {
</div>
</div>
);
if (multiColumn || placeholder) {
return component;
} else {
return createPortal(component, document.getElementById('tabs-bar__portal'));
}
}
}

View file

@ -146,6 +146,7 @@ class Status extends ImmutablePureComponent {
descendantsIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool,
multiColumn: PropTypes.bool,
domain: PropTypes.string.isRequired,
};
@ -437,13 +438,13 @@ class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain } = this.props;
const { shouldUpdateScroll, status, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
const { fullscreen } = this.state;
if (status === null) {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<MissingIndicator />
</Column>
);
@ -473,6 +474,7 @@ class Status extends ImmutablePureComponent {
<Column label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader
showBackButton
multiColumn={multiColumn}
extraButton={(
<button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button>
)}

View file

@ -21,7 +21,7 @@ export default class ColumnLoading extends ImmutablePureComponent {
let { title, icon } = this.props;
return (
<Column>
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} />
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} placeholder />
<div className='scrollable' />
</Column>
);

View file

@ -73,9 +73,13 @@ class TabsBar extends React.PureComponent {
const { intl: { formatMessage } } = this.props;
return (
<div className='tabs-bar__wrapper'>
<nav className='tabs-bar' ref={this.setRef}>
{links.map(link => React.cloneElement(link, { key: link.props.to, onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))}
</nav>
<div id='tabs-bar__portal' />
</div>
);
}

View file

@ -39,7 +39,7 @@ body {
&.layout-single-column {
height: auto;
min-height: 100%;
min-height: 100vh;
overflow-y: scroll;
}

View file

@ -1852,6 +1852,26 @@ a.account__display-name {
}
}
.tabs-bar__wrapper {
background: darken($ui-base-color, 8%);
position: sticky;
top: 0;
z-index: 2;
padding-top: 0;
@media screen and (min-width: $no-gap-breakpoint) {
padding-top: 10px;
}
.tabs-bar {
margin-bottom: 0;
@media screen and (min-width: $no-gap-breakpoint) {
margin-bottom: 10px;
}
}
}
.react-swipeable-view-container {
&,
.columns-area,
@ -1949,9 +1969,6 @@ a.account__display-name {
background: lighten($ui-base-color, 8%);
flex: 0 0 auto;
overflow-y: auto;
position: sticky;
top: 0;
z-index: 3;
}
.tabs-bar__link {
@ -2014,6 +2031,14 @@ a.account__display-name {
padding: 0;
}
//.column {
// margin-top: 0;
// @media screen and (min-width: $no-gap-breakpoint) {
// margin-top: 10px;
// }
//}
.autosuggest-textarea__textarea {
font-size: 16px;
}
@ -2039,6 +2064,7 @@ a.account__display-name {
@media screen and (min-width: $no-gap-breakpoint) {
padding: 10px 0;
padding-top: 0;
}
@media screen and (min-width: 630px) {
@ -2153,13 +2179,11 @@ a.account__display-name {
@media screen and (min-width: $no-gap-breakpoint) {
.tabs-bar {
margin: 10px auto;
margin-bottom: 0;
width: 100%;
}
.react-swipeable-view-container .columns-area--mobile {
height: calc(100% - 20px) !important;
height: calc(100% - 10px) !important;
}
.getting-started__wrapper,