Added data-column="{account|local|federated|favourites|hashtag|home|notifications|mutes|blocks|getting-started|follow-requests}" to Column

This commit is contained in:
Ondřej Hruška 2017-08-06 21:27:47 +02:00
parent 9d03c77d0f
commit cd4abdb3eb
13 changed files with 18 additions and 14 deletions

View file

@ -8,6 +8,7 @@ export default class Column extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
extraClasses: PropTypes.string,
name: PropTypes.string,
};
scrollTop () {
@ -41,10 +42,10 @@ export default class Column extends React.PureComponent {
}
render () {
const { children, extraClasses } = this.props;
const { children, extraClasses, name } = this.props;
return (
<div role='region' className={`column ${extraClasses || ''}`} ref={this.setRef}>
<div role='region' data-column={name} className={`column ${extraClasses || ''}`} ref={this.setRef}>
{children}
</div>
);

View file

@ -61,7 +61,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
}
return (
<Column>
<Column name='account'>
<ColumnBackButton />
<StatusList

View file

@ -54,7 +54,7 @@ export default class Blocks extends ImmutablePureComponent {
}
return (
<Column icon='ban' heading={intl.formatMessage(messages.heading)}>
<Column name='blocks' icon='ban' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='blocks'>
<div className='scrollable' onScroll={this.handleScroll}>

View file

@ -117,7 +117,7 @@ export default class CommunityTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} name='local'>
<ColumnHeader
icon='users'
active={hasUnread}

View file

@ -66,7 +66,7 @@ export default class Favourites extends ImmutablePureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} name='favourites'>
<ColumnHeader
icon='star'
title={intl.formatMessage(messages.heading)}

View file

@ -47,14 +47,14 @@ export default class FollowRequests extends ImmutablePureComponent {
if (!accountIds) {
return (
<Column>
<Column name='follow-requests'>
<LoadingIndicator />
</Column>
);
}
return (
<Column icon='users' heading={intl.formatMessage(messages.heading)}>
<Column name='follow-requests' icon='users' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='follow_requests'>

View file

@ -85,7 +85,7 @@ export default class GettingStarted extends ImmutablePureComponent {
]);
return (
<Column icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
<Column name='getting-started' icon='asterisk' heading={intl.formatMessage(messages.heading)} hideHeadingOnMobile>
<div className='scrollable optionally-scrollable'>
<div className='getting-started__wrapper'>
<ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />

View file

@ -112,7 +112,7 @@ export default class HashtagTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} name='hashtag'>
<ColumnHeader
icon='hashtag'
active={hasUnread}

View file

@ -72,7 +72,7 @@ export default class HomeTimeline extends React.PureComponent {
}
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} name='home'>
<ColumnHeader
icon='home'
active={hasUnread}

View file

@ -54,7 +54,7 @@ export default class Mutes extends ImmutablePureComponent {
}
return (
<Column icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<Column name='mutes' icon='volume-off' heading={intl.formatMessage(messages.heading)}>
<ColumnBackButtonSlim />
<ScrollContainer scrollKey='mutes'>
<div className='scrollable mutes' onScroll={this.handleScroll}>

View file

@ -183,6 +183,7 @@ export default class Notifications extends React.PureComponent {
return (
<Column
ref={this.setColumnRef}
name='notifications'
extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null}
>
<ColumnHeader

View file

@ -117,7 +117,7 @@ export default class PublicTimeline extends React.PureComponent {
const pinned = !!columnId;
return (
<Column ref={this.setRef}>
<Column ref={this.setRef} name='federated'>
<ColumnHeader
icon='globe'
active={hasUnread}

View file

@ -13,6 +13,7 @@ export default class Column extends React.PureComponent {
children: PropTypes.node,
active: PropTypes.bool,
hideHeadingOnMobile: PropTypes.bool,
name: PropTypes.string,
};
handleHeaderClick = () => {
@ -36,7 +37,7 @@ export default class Column extends React.PureComponent {
}
render () {
const { heading, icon, children, active, hideHeadingOnMobile } = this.props;
const { heading, icon, children, active, hideHeadingOnMobile, name } = this.props;
const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
@ -48,6 +49,7 @@ export default class Column extends React.PureComponent {
<div
ref={this.setRef}
role='region'
data-column={name}
aria-labelledby={columnHeaderId}
className='column'
onScroll={this.handleScroll}