Add "back" button on column headers of public and hashtag timelines. The "back"

button takes you back to getting started page

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>
     );