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,
 | 
					  updateTimeline,
 | 
				
			||||||
  deleteFromTimelines
 | 
					  deleteFromTimelines
 | 
				
			||||||
} from '../../actions/timelines';
 | 
					} from '../../actions/timelines';
 | 
				
			||||||
 | 
					import ColumnBackButton from '../public_timeline/components/column_back_button';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const HashtagTimeline = React.createClass({
 | 
					const HashtagTimeline = React.createClass({
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -68,6 +69,7 @@ const HashtagTimeline = React.createClass({
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <Column icon='hashtag' heading={id}>
 | 
					      <Column icon='hashtag' heading={id}>
 | 
				
			||||||
 | 
					        <ColumnBackButton />
 | 
				
			||||||
        <StatusListContainer type='tag' id={id} />
 | 
					        <StatusListContainer type='tag' id={id} />
 | 
				
			||||||
      </Column>
 | 
					      </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
 | 
					  deleteFromTimelines
 | 
				
			||||||
} from '../../actions/timelines';
 | 
					} from '../../actions/timelines';
 | 
				
			||||||
import { defineMessages, injectIntl } from 'react-intl';
 | 
					import { defineMessages, injectIntl } from 'react-intl';
 | 
				
			||||||
 | 
					import ColumnBackButton from './components/column_back_button';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const messages = defineMessages({
 | 
					const messages = defineMessages({
 | 
				
			||||||
  title: { id: 'column.public', defaultMessage: 'Public' }
 | 
					  title: { id: 'column.public', defaultMessage: 'Public' }
 | 
				
			||||||
@ -16,7 +17,8 @@ const messages = defineMessages({
 | 
				
			|||||||
const PublicTimeline = React.createClass({
 | 
					const PublicTimeline = React.createClass({
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  propTypes: {
 | 
					  propTypes: {
 | 
				
			||||||
    dispatch: React.PropTypes.func.isRequired
 | 
					    dispatch: React.PropTypes.func.isRequired,
 | 
				
			||||||
 | 
					    intl: React.PropTypes.object.isRequired
 | 
				
			||||||
  },
 | 
					  },
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  mixins: [PureRenderMixin],
 | 
					  mixins: [PureRenderMixin],
 | 
				
			||||||
@ -53,6 +55,7 @@ const PublicTimeline = React.createClass({
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <Column icon='globe' heading={intl.formatMessage(messages.title)}>
 | 
					      <Column icon='globe' heading={intl.formatMessage(messages.title)}>
 | 
				
			||||||
 | 
					        <ColumnBackButton />
 | 
				
			||||||
        <StatusListContainer type='public' />
 | 
					        <StatusListContainer type='public' />
 | 
				
			||||||
      </Column>
 | 
					      </Column>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user