Add "back" button on column headers of public and hashtag timelines. The "back"
button takes you back to getting started page
This commit is contained in:
		
							parent
							
								
									86be6d48c9
								
							
						
					
					
						commit
						3125dd8920
					
				@ -7,6 +7,7 @@ import {
 | 
			
		||||
  updateTimeline,
 | 
			
		||||
  deleteFromTimelines
 | 
			
		||||
} from '../../actions/timelines';
 | 
			
		||||
import ColumnBackButton from '../public_timeline/components/column_back_button';
 | 
			
		||||
 | 
			
		||||
const HashtagTimeline = React.createClass({
 | 
			
		||||
 | 
			
		||||
@ -68,6 +69,7 @@ const HashtagTimeline = React.createClass({
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <Column icon='hashtag' heading={id}>
 | 
			
		||||
        <ColumnBackButton />
 | 
			
		||||
        <StatusListContainer type='tag' id={id} />
 | 
			
		||||
      </Column>
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
@ -0,0 +1,46 @@
 | 
			
		||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
 | 
			
		||||
import { FormattedMessage } from 'react-intl';
 | 
			
		||||
 | 
			
		||||
const outerStyle = {
 | 
			
		||||
  position: 'absolute',
 | 
			
		||||
  right: '0',
 | 
			
		||||
  top: '-48px',
 | 
			
		||||
  padding: '15px',
 | 
			
		||||
  fontSize: '16px',
 | 
			
		||||
  background: '#2f3441',
 | 
			
		||||
  flex: '0 0 auto',
 | 
			
		||||
  cursor: 'pointer',
 | 
			
		||||
  color: '#2b90d9'
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const iconStyle = {
 | 
			
		||||
  display: 'inline-block',
 | 
			
		||||
  marginRight: '5px'
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const ColumnBackButton = React.createClass({
 | 
			
		||||
 | 
			
		||||
  contextTypes: {
 | 
			
		||||
    router: React.PropTypes.object
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  mixins: [PureRenderMixin],
 | 
			
		||||
 | 
			
		||||
  handleClick () {
 | 
			
		||||
    this.context.router.push('/');
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  render () {
 | 
			
		||||
    return (
 | 
			
		||||
      <div style={{ position: 'relative' }}>
 | 
			
		||||
        <div style={outerStyle} onClick={this.handleClick} className='column-back-button'>
 | 
			
		||||
          <i className='fa fa-fw fa-chevron-left' style={iconStyle} />
 | 
			
		||||
          <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export default ColumnBackButton;
 | 
			
		||||
@ -8,6 +8,7 @@ import {
 | 
			
		||||
  deleteFromTimelines
 | 
			
		||||
} from '../../actions/timelines';
 | 
			
		||||
import { defineMessages, injectIntl } from 'react-intl';
 | 
			
		||||
import ColumnBackButton from './components/column_back_button';
 | 
			
		||||
 | 
			
		||||
const messages = defineMessages({
 | 
			
		||||
  title: { id: 'column.public', defaultMessage: 'Public' }
 | 
			
		||||
@ -16,7 +17,8 @@ const messages = defineMessages({
 | 
			
		||||
const PublicTimeline = React.createClass({
 | 
			
		||||
 | 
			
		||||
  propTypes: {
 | 
			
		||||
    dispatch: React.PropTypes.func.isRequired
 | 
			
		||||
    dispatch: React.PropTypes.func.isRequired,
 | 
			
		||||
    intl: React.PropTypes.object.isRequired
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  mixins: [PureRenderMixin],
 | 
			
		||||
@ -53,6 +55,7 @@ const PublicTimeline = React.createClass({
 | 
			
		||||
 | 
			
		||||
    return (
 | 
			
		||||
      <Column icon='globe' heading={intl.formatMessage(messages.title)}>
 | 
			
		||||
        <ColumnBackButton />
 | 
			
		||||
        <StatusListContainer type='public' />
 | 
			
		||||
      </Column>
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user