diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-03 01:15:42 +0100 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-01-03 01:15:42 +0100 |
commit | 3125dd8920af1b6e9847dc7cef79de108411656a (patch) | |
tree | 3d033fe514c5070f316d514b78c5b15392593566 /app/assets/javascripts/components | |
parent | 86be6d48c9cf56cfe5e273169126729d097fe67e (diff) |
Add "back" button on column headers of public and hashtag timelines. The "back"
button takes you back to getting started page
Diffstat (limited to 'app/assets/javascripts/components')
3 files changed, 52 insertions, 1 deletions
diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx index cf53a7729..f28e01a00 100644 --- a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx +++ b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx @@ -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> ); diff --git a/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx new file mode 100644 index 000000000..4535f8f28 --- /dev/null +++ b/app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx @@ -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; diff --git a/app/assets/javascripts/components/features/public_timeline/index.jsx b/app/assets/javascripts/components/features/public_timeline/index.jsx index c3da09a09..eac85f01b 100644 --- a/app/assets/javascripts/components/features/public_timeline/index.jsx +++ b/app/assets/javascripts/components/features/public_timeline/index.jsx @@ -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> ); |