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

Merge pull request #125 from glitch-soc/data-column

Browse Source 
Add data-column="..." to all columns
This commit is contained in:
beatrix
2017-09-30 15:02:21 -04:00
committed by GitHub
parent 5dec67d964 b6bf04ece2
commit b1217242fc
13 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/mastodon/components/column.js
View File

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

2
app/javascript/mastodon/features/account_timeline/index.js
View File

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

2
app/javascript/mastodon/features/blocks/index.js
View File

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

2
app/javascript/mastodon/features/community_timeline/index.js
View File

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

2
app/javascript/mastodon/features/favourited_statuses/index.js
View File

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

4
app/javascript/mastodon/features/follow_requests/index.js
View File

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

2
app/javascript/mastodon/features/getting_started/index.js
View File

@@ -93,7 +93,7 @@ export default class GettingStarted extends ImmutablePureComponent {
]); ]);
return ( 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='scrollable optionally-scrollable'>
<div className='getting-started__wrapper'> <div className='getting-started__wrapper'>
<ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} /> <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />

2
app/javascript/mastodon/features/hashtag_timeline/index.js
View File

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

2
app/javascript/mastodon/features/home_timeline/index.js
View File

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

2
app/javascript/mastodon/features/mutes/index.js
View File

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

1
app/javascript/mastodon/features/notifications/index.js
View File

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

2
app/javascript/mastodon/features/public_timeline/index.js
View File

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

4
app/javascript/mastodon/features/ui/components/column.js
View File

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