Add icons to column headers, click them to scroll to top

4 files changed, 26 insertions, 7 deletions

diff --git a/app/assets/javascripts/components/components/column.jsx b/app/assets/javascripts/components/components/column.jsx
index b347ee3a8..64a4e6545 100644
--- a/app/assets/javascripts/components/components/column.jsx
+++ b/app/assets/javascripts/components/components/column.jsx
@@ -5,15 +5,21 @@ import PureRenderMixin     from 'react-addons-pure-render-mixin';
 const Column = React.createClass({
 
   propTypes: {
-    type: React.PropTypes.string
+    type: React.PropTypes.string,
+    icon: React.PropTypes.string
   },
 
   mixins: [PureRenderMixin],
 
+  handleHeaderClick () {
+    let node = ReactDOM.findDOMNode(this);
+    node.querySelector('.scrollable').scrollTo(0, 0);
+  },
+
   render () {
     return (
       <div style={{ width: '380px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', display: 'flex', flexDirection: 'column' }}>
-        <ColumnHeader type={this.props.type} />
+        <ColumnHeader icon={this.props.icon} type={this.props.type} onClick={this.handleHeaderClick} />
         <StatusListContainer type={this.props.type} />
       </div>
     );
diff --git a/app/assets/javascripts/components/components/column_header.jsx b/app/assets/javascripts/components/components/column_header.jsx
index 15a195898..21def69c7 100644
--- a/app/assets/javascripts/components/components/column_header.jsx
+++ b/app/assets/javascripts/components/components/column_header.jsx
@@ -3,14 +3,27 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 const ColumnHeader = React.createClass({
 
   propTypes: {
-    type: React.PropTypes.string
+    icon: React.PropTypes.string,
+    type: React.PropTypes.string,
+    onClick: React.PropTypes.func
   },
 
   mixins: [PureRenderMixin],
 
+  handleClick () {
+    this.props.onClick();
+  },
+
   render () {
+    let icon = '';
+
+    if (this.props.icon) {
+      icon = <i className={`fa fa-fw fa-${this.props.icon}`} style={{ display: 'inline-block', marginRight: '5px' }} />;
+    }
+
     return (
-      <div style={{ padding: '15px', fontSize: '16px', background: '#2f3441', flex: '0 0 auto' }}>
+      <div onClick={this.handleClick} style={{ padding: '15px', fontSize: '16px', background: '#2f3441', flex: '0 0 auto', cursor: 'pointer' }}>
+        {icon}
         {this.props.type}
       </div>
     );
diff --git a/app/assets/javascripts/components/components/columns_area.jsx b/app/assets/javascripts/components/components/columns_area.jsx
index 149fdfcf4..720f3143b 100644
--- a/app/assets/javascripts/components/components/columns_area.jsx
+++ b/app/assets/javascripts/components/components/columns_area.jsx
@@ -8,8 +8,8 @@ const ColumnsArea = React.createClass({
   render () {
     return (
       <div style={{ display: 'flex', flexDirection: 'row', flex: '1' }}>
-        <Column type='home' />
-        <Column type='mentions' />
+        <Column icon='home' type='home' />
+        <Column icon='at' type='mentions' />
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 5bd21edec..7fa81e512 100644
--- a/app/assets/javascripts/components/components/status_list.jsx
+++ b/app/assets/javascripts/components/components/status_list.jsx
@@ -15,7 +15,7 @@ const StatusList = React.createClass({
 
   render () {
     return (
-      <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}>
+      <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
         <div>
           {this.props.statuses.map((status) => {
             return <Status key={status.get('id')} status={status} onReply={this.props.onReply} onReblog={this.props.onReblog} onFavourite={this.props.onFavourite} />;