tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix column header scrolling with the page

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/status/index.js
View File

@@ -155,6 +155,7 @@ class Status extends ImmutablePureComponent {
descendantsIds: ImmutablePropTypes.list,
intl: PropTypes.object.isRequired,
askReplyConfirmation: PropTypes.bool,
multiColumn: PropTypes.bool,
domain: PropTypes.string.isRequired,
};
@@ -497,13 +498,13 @@ class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
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;
if (status === null) {
return (
<Column>
<ColumnBackButton />
<ColumnBackButton multiColumn={multiColumn} />
<MissingIndicator />
</Column>
);
@@ -537,6 +538,7 @@ class Status extends ImmutablePureComponent {
title={intl.formatMessage(messages.tootHeading)}
onClick={this.handleHeaderClick}
showBackButton
multiColumn={multiColumn}
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>
)}

2
app/javascript/flavours/glitch/features/ui/components/column_loading.js
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>
);

10
app/javascript/flavours/glitch/features/ui/components/tabs_bar.js
View File

@@ -73,9 +73,13 @@ class TabsBar extends React.PureComponent {
const { intl: { formatMessage } } = this.props;
return (
<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 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>
);
}