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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import Icon from 'mastodon/components/icon'; import Icon from 'mastodon/components/icon';
@ -28,6 +29,7 @@ class ColumnHeader extends React.PureComponent {
showBackButton: PropTypes.bool, showBackButton: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
pinned: PropTypes.bool, pinned: PropTypes.bool,
placeholder: PropTypes.bool,
onPin: PropTypes.func, onPin: PropTypes.func,
onMove: PropTypes.func, onMove: PropTypes.func,
onClick: PropTypes.func, onClick: PropTypes.func,
@ -79,7 +81,7 @@ class ColumnHeader extends React.PureComponent {
} }
render () { 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 { collapsed, animating } = this.state;
const wrapperClassName = classNames('column-header__wrapper', { const wrapperClassName = classNames('column-header__wrapper', {
@ -146,7 +148,7 @@ class ColumnHeader extends React.PureComponent {
const hasTitle = icon && title; const hasTitle = icon && title;
return ( const component = (
<div className={wrapperClassName}> <div className={wrapperClassName}>
<h1 className={buttonClassName}> <h1 className={buttonClassName}>
{hasTitle && ( {hasTitle && (
@ -172,6 +174,12 @@ class ColumnHeader extends React.PureComponent {
</div> </div>
</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, descendantsIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool, askReplyConfirmation: PropTypes.bool,
multiColumn: PropTypes.bool,
domain: PropTypes.string.isRequired, domain: PropTypes.string.isRequired,
}; };
@ -437,13 +438,13 @@ class Status extends ImmutablePureComponent {
render () { render () {
let ancestors, descendants; 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; const { fullscreen } = this.state;
if (status === null) { if (status === null) {
return ( return (
<Column> <Column>
<ColumnBackButton /> <ColumnBackButton multiColumn={multiColumn} />
<MissingIndicator /> <MissingIndicator />
</Column> </Column>
); );
@ -473,6 +474,7 @@ class Status extends ImmutablePureComponent {
<Column label={intl.formatMessage(messages.detailedStatus)}> <Column label={intl.formatMessage(messages.detailedStatus)}>
<ColumnHeader <ColumnHeader
showBackButton showBackButton
multiColumn={multiColumn}
extraButton={( 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> <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; let { title, icon } = this.props;
return ( return (
<Column> <Column>
<ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} /> <ColumnHeader icon={icon} title={title} multiColumn={false} focusable={false} placeholder />
<div className='scrollable' /> <div className='scrollable' />
</Column> </Column>
); );

View File

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

View File

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