mirror of
https://github.com/mastodon/mastodon.git
synced 2024-12-23 09:51:13 +01:00
* Add alwaysShowScrollbar prop to ScrollableList * Fix followers/follows layout issues from #8418
This commit is contained in:
parent
648d6d7247
commit
ceed1ebe5b
3 changed files with 12 additions and 7 deletions
|
@ -26,6 +26,7 @@ export default class ScrollableList extends PureComponent {
|
||||||
hasMore: PropTypes.bool,
|
hasMore: PropTypes.bool,
|
||||||
prepend: PropTypes.node,
|
prepend: PropTypes.node,
|
||||||
alwaysPrepend: PropTypes.bool,
|
alwaysPrepend: PropTypes.bool,
|
||||||
|
alwaysShowScrollbar: PropTypes.bool,
|
||||||
emptyMessage: PropTypes.node,
|
emptyMessage: PropTypes.node,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
};
|
};
|
||||||
|
@ -141,7 +142,7 @@ export default class ScrollableList extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
|
const { children, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, alwaysPrepend, alwaysShowScrollbar, emptyMessage, onLoadMore } = this.props;
|
||||||
const { fullscreen } = this.state;
|
const { fullscreen } = this.state;
|
||||||
const childrenCount = React.Children.count(children);
|
const childrenCount = React.Children.count(children);
|
||||||
|
|
||||||
|
@ -172,11 +173,13 @@ export default class ScrollableList extends PureComponent {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
const scrollable = alwaysShowScrollbar;
|
||||||
|
|
||||||
scrollableArea = (
|
scrollableArea = (
|
||||||
<div style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
|
<div className={classNames({ scrollable, fullscreen })} ref={this.setRef} style={{ flex: '1 1 auto', display: 'flex', flexDirection: 'column' }}>
|
||||||
{alwaysPrepend && prepend}
|
{alwaysPrepend && prepend}
|
||||||
|
|
||||||
<div className='empty-column-indicator' ref={this.setRef}>
|
<div className='empty-column-indicator'>
|
||||||
{emptyMessage}
|
{emptyMessage}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -66,13 +66,14 @@ export default class Followers extends ImmutablePureComponent {
|
||||||
<Column>
|
<Column>
|
||||||
<ColumnBackButton />
|
<ColumnBackButton />
|
||||||
|
|
||||||
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
|
||||||
|
|
||||||
<ScrollableList
|
<ScrollableList
|
||||||
scrollKey='followers'
|
scrollKey='followers'
|
||||||
hasMore={hasMore}
|
hasMore={hasMore}
|
||||||
onLoadMore={this.handleLoadMore}
|
onLoadMore={this.handleLoadMore}
|
||||||
shouldUpdateScroll={shouldUpdateScroll}
|
shouldUpdateScroll={shouldUpdateScroll}
|
||||||
|
prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
|
||||||
|
alwaysPrepend
|
||||||
|
alwaysShowScrollbar
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
>
|
>
|
||||||
{accountIds.map(id =>
|
{accountIds.map(id =>
|
||||||
|
|
|
@ -66,13 +66,14 @@ export default class Following extends ImmutablePureComponent {
|
||||||
<Column>
|
<Column>
|
||||||
<ColumnBackButton />
|
<ColumnBackButton />
|
||||||
|
|
||||||
<HeaderContainer accountId={this.props.params.accountId} hideTabs />
|
|
||||||
|
|
||||||
<ScrollableList
|
<ScrollableList
|
||||||
scrollKey='following'
|
scrollKey='following'
|
||||||
hasMore={hasMore}
|
hasMore={hasMore}
|
||||||
onLoadMore={this.handleLoadMore}
|
onLoadMore={this.handleLoadMore}
|
||||||
shouldUpdateScroll={shouldUpdateScroll}
|
shouldUpdateScroll={shouldUpdateScroll}
|
||||||
|
prepend={<HeaderContainer accountId={this.props.params.accountId} hideTabs />}
|
||||||
|
alwaysPrepend
|
||||||
|
alwaysShowScrollbar
|
||||||
emptyMessage={emptyMessage}
|
emptyMessage={emptyMessage}
|
||||||
>
|
>
|
||||||
{accountIds.map(id =>
|
{accountIds.map(id =>
|
||||||
|
|
Loading…
Reference in a new issue