From 3125dd8920af1b6e9847dc7cef79de108411656a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 3 Jan 2017 01:15:42 +0100 Subject: [PATCH] Add "back" button on column headers of public and hashtag timelines. The "back" button takes you back to getting started page --- .../features/hashtag_timeline/index.jsx | 2 + .../components/column_back_button.jsx | 46 +++++++++++++++++++ .../features/public_timeline/index.jsx | 5 +- 3 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/components/features/public_timeline/components/column_back_button.jsx diff --git a/app/assets/javascripts/components/features/hashtag_timeline/index.jsx b/app/assets/javascripts/components/features/hashtag_timeline/index.jsx index cf53a77297..f28e01a003 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 ( + ); 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 0000000000..4535f8f283 --- /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 ( +
+
+ + +
+
+ ); + } + +}); + +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 c3da09a09b..eac85f01bd 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 ( + );