[Glitch] Fix column header scrolling with the page

Port 706a48ee1f to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-08-01 12:26:58 +02:00 committed by Thibaut Girka
parent 3edb816eb0
commit fdadd520b1
8 changed files with 45 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 { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
@ -36,6 +37,7 @@ class ColumnHeader extends React.PureComponent {
onEnterCleaningMode: PropTypes.func, onEnterCleaningMode: PropTypes.func,
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,
@ -104,7 +106,7 @@ class ColumnHeader extends React.PureComponent {
} }
render () { render () {
const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder } = this.props;
const { collapsed, animating, animatingNCD } = this.state; const { collapsed, animating, animatingNCD } = this.state;
let title = this.props.title; let title = this.props.title;
@ -185,7 +187,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 && (
@ -229,6 +231,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

@ -155,6 +155,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,
}; };
@ -497,13 +498,13 @@ class Status extends ImmutablePureComponent {
render () { render () {
let ancestors, descendants; let ancestors, descendants;
const { setExpansion } = this; const { setExpansion } = this;
const { status, settings, ancestorsIds, descendantsIds, intl, domain } = this.props; const { status, settings, ancestorsIds, descendantsIds, intl, domain, multiColumn } = this.props;
const { fullscreen, isExpanded } = this.state; const { fullscreen, isExpanded } = this.state;
if (status === null) { if (status === null) {
return ( return (
<Column> <Column>
<ColumnBackButton /> <ColumnBackButton multiColumn={multiColumn} />
<MissingIndicator /> <MissingIndicator />
</Column> </Column>
); );
@ -537,6 +538,7 @@ class Status extends ImmutablePureComponent {
title={intl.formatMessage(messages.tootHeading)} title={intl.formatMessage(messages.tootHeading)}
onClick={this.handleHeaderClick} onClick={this.handleHeaderClick}
showBackButton showBackButton
multiColumn={multiColumn}
extraButton={( extraButton={(
<button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button> <button className='column-header__button' title={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(!isExpanded ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={!isExpanded ? '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 (
<nav className='tabs-bar' ref={this.setRef}> <div className='tabs-bar__wrapper'>
{links.map(link => React.cloneElement(link, { key: link.props.to, onClick: this.handleClick, 'aria-label': formatMessage({ id: link.props['data-preview-title-id'] }) }))} <nav className='tabs-bar' ref={this.setRef}>
</nav> {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

@ -38,7 +38,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

@ -52,6 +52,26 @@
} }
} }
.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,

View file

@ -639,9 +639,6 @@
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 {

View file

@ -137,6 +137,7 @@
@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) {
@ -225,13 +226,11 @@
@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,