Merge pull request #125 from glitch-soc/data-column
Add data-column="..." to all columns
This commit is contained in:
		@@ -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>
 | 
			
		||||
    );
 | 
			
		||||
 
 | 
			
		||||
@@ -61,7 +61,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <Column>
 | 
			
		||||
      <Column name='account'>
 | 
			
		||||
        <ColumnBackButton />
 | 
			
		||||
 | 
			
		||||
        <StatusList
 | 
			
		||||
 
 | 
			
		||||
@@ -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}>
 | 
			
		||||
 
 | 
			
		||||
@@ -79,7 +79,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}
 | 
			
		||||
 
 | 
			
		||||
@@ -68,7 +68,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)}
 | 
			
		||||
 
 | 
			
		||||
@@ -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'>
 | 
			
		||||
 
 | 
			
		||||
@@ -93,7 +93,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)} />
 | 
			
		||||
 
 | 
			
		||||
@@ -91,7 +91,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}
 | 
			
		||||
 
 | 
			
		||||
@@ -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}
 | 
			
		||||
 
 | 
			
		||||
@@ -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}>
 | 
			
		||||
 
 | 
			
		||||
@@ -139,6 +139,7 @@ export default class Notifications extends React.PureComponent {
 | 
			
		||||
    return (
 | 
			
		||||
      <Column
 | 
			
		||||
        ref={this.setColumnRef}
 | 
			
		||||
        name='notifications'
 | 
			
		||||
        extraClasses={this.props.notifCleaningActive ? 'notif-cleaning' : null}
 | 
			
		||||
      >
 | 
			
		||||
        <ColumnHeader
 | 
			
		||||
 
 | 
			
		||||
@@ -79,7 +79,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}
 | 
			
		||||
 
 | 
			
		||||
@@ -13,6 +13,7 @@ export default class Column extends React.PureComponent {
 | 
			
		||||
    children: PropTypes.node,
 | 
			
		||||
    active: PropTypes.bool,
 | 
			
		||||
    hideHeadingOnMobile: PropTypes.bool,
 | 
			
		||||
    name: PropTypes.string,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  handleHeaderClick = () => {
 | 
			
		||||
@@ -47,7 +48,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)));
 | 
			
		||||
 | 
			
		||||
@@ -59,6 +60,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}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user