Replies in the compose form

14 files changed, 246 insertions, 73 deletions

diff --git a/app/assets/javascripts/components/actions/compose.jsx b/app/assets/javascripts/components/actions/compose.jsx
index 614ed1a89..cf5345078 100644
--- a/app/assets/javascripts/components/actions/compose.jsx
+++ b/app/assets/javascripts/components/actions/compose.jsx
@@ -5,6 +5,8 @@ export const COMPOSE_SUBMIT         = 'COMPOSE_SUBMIT';
 export const COMPOSE_SUBMIT_REQUEST = 'COMPOSE_SUBMIT_REQUEST';
 export const COMPOSE_SUBMIT_SUCCESS = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL    = 'COMPOSE_SUBMIT_FAIL';
+export const COMPOSE_REPLY          = 'COMPOSE_REPLY';
+export const COMPOSE_REPLY_CANCEL   = 'COMPOSE_REPLY_CANCEL';
 
 export function changeCompose(text) {
   return {
@@ -13,13 +15,26 @@ export function changeCompose(text) {
   };
 }
 
+export function replyCompose(payload) {
+  return {
+    type: COMPOSE_REPLY,
+    payload: payload
+  };
+}
+
+export function cancelReplyCompose() {
+  return {
+    type: COMPOSE_REPLY_CANCEL
+  };
+}
+
 export function submitCompose() {
   return function (dispatch, getState) {
     dispatch(submitComposeRequest());
 
     api(getState).post('/api/statuses', {
       status: getState().getIn(['compose', 'text'], ''),
-      in_reply_to_id: getState().getIn(['compose', 'in_reply_to_id'], null)
+      in_reply_to_id: getState().getIn(['compose', 'in_reply_to', 'id'], null)
     }).then(function (response) {
       dispatch(submitComposeSuccess(response.data));
     }).catch(function (error) {
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
index abbef72f8..6177683ba 100644
--- a/app/assets/javascripts/components/components/avatar.jsx
+++ b/app/assets/javascripts/components/components/avatar.jsx
@@ -3,15 +3,16 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 const Avatar = React.createClass({
 
   propTypes: {
-    src: React.PropTypes.string.isRequired
+    src: React.PropTypes.string.isRequired,
+    size: React.PropTypes.number.isRequired
   },
 
   mixins: [PureRenderMixin],
 
   render () {
     return (
-      <div style={{ width: '48px', height: '48px', flex: '0 0 auto' }}>
-        <img src={this.props.src} width={48} height={48} alt='' style={{ display: 'block', borderRadius: '4px' }} />
+      <div style={{ width: `${this.props.size}px`, height: `${this.props.size}px` }}>
+        <img src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ display: 'block', borderRadius: '4px' }} />
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/components/button.jsx b/app/assets/javascripts/components/components/button.jsx
index e70382142..9e276cbe8 100644
--- a/app/assets/javascripts/components/components/button.jsx
+++ b/app/assets/javascripts/components/components/button.jsx
@@ -5,14 +5,12 @@ const Button = React.createClass({
   propTypes: {
     text: React.PropTypes.string.isRequired,
     onClick: React.PropTypes.func,
-    disabled: React.PropTypes.boolean
+    disabled: React.PropTypes.bool
   },
 
   mixins: [PureRenderMixin],
 
   handleClick (e) {
-    e.preventDefault();
-
     if (!this.props.disabled) {
       this.props.onClick();
     }
@@ -20,9 +18,9 @@ const Button = React.createClass({
 
   render () {
     return (
-      <a href='#' onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', backgroundColor: '#2b90d9', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}>
+      <button className='button' disabled={this.props.disabled} onClick={this.handleClick} style={{ display: 'inline-block', position: 'relative', boxSizing: 'border-box', textAlign: 'center', border: '10px none', color: '#fff', fontSize: '14px', fontWeight: '500', letterSpacing: '0', textTransform: 'uppercase', padding: '0 16px', height: '36px', cursor: 'pointer', lineHeight: '36px', borderRadius: '4px', textDecoration: 'none' }}>
         {this.props.text}
-      </a>
+      </button>
     );
   }
 
diff --git a/app/assets/javascripts/components/components/composer_drawer.jsx b/app/assets/javascripts/components/components/composer_drawer.jsx
index 8cc4afc99..25696f200 100644
--- a/app/assets/javascripts/components/components/composer_drawer.jsx
+++ b/app/assets/javascripts/components/components/composer_drawer.jsx
@@ -1,14 +1,18 @@
-import CharacterCounter from './character_counter';
-import Button           from './button';
-import PureRenderMixin  from 'react-addons-pure-render-mixin';
+import CharacterCounter   from './character_counter';
+import Button             from './button';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ReplyIndicator     from './reply_indicator';
 
 const ComposerDrawer = React.createClass({
 
   propTypes: {
     text: React.PropTypes.string.isRequired,
-    isSubmitting: React.PropTypes.boolean,
+    is_submitting: React.PropTypes.bool,
+    in_reply_to: ImmutablePropTypes.map,
     onChange: React.PropTypes.func.isRequired,
-    onSubmit: React.PropTypes.func.isRequired
+    onSubmit: React.PropTypes.func.isRequired,
+    onCancelReply: React.PropTypes.func.isRequired
   },
 
   mixins: [PureRenderMixin],
@@ -28,9 +32,17 @@ const ComposerDrawer = React.createClass({
   },
 
   render () {
+    let replyArea = '';
+
+    if (this.props.in_reply_to) {
+      replyArea = <ReplyIndicator status={this.props.in_reply_to} onCancel={this.props.onCancelReply} />;
+    }
+
     return (
       <div style={{ width: '280px', boxSizing: 'border-box', background: '#454b5e', margin: '10px', marginRight: '0', padding: '10px' }}>
-        <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', background: '#fff', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px' }} />
+        {replyArea}
+
+        <textarea disabled={this.props.isSubmitting} placeholder='What is on your mind?' value={this.props.text} onKeyUp={this.handleKeyUp} onChange={this.handleChange} className='compose-drawer__textarea' style={{ display: 'block', boxSizing: 'border-box', width: '100%', height: '100px', resize: 'none', border: 'none', color: '#282c37', padding: '10px', fontFamily: 'Roboto', fontSize: '14px', margin: '0' }} />
 
         <div style={{ marginTop: '10px', overflow: 'hidden' }}>
           <div style={{ float: 'right' }}><Button text='Publish' onClick={this.handleSubmit} disabled={this.props.isSubmitting} /></div>
diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx
deleted file mode 100644
index b63bfa5e3..000000000
--- a/app/assets/javascripts/components/components/display_name.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PureRenderMixin    from 'react-addons-pure-render-mixin';
-
-const DisplayName = React.createClass({
-
-  propTypes: {
-    account: ImmutablePropTypes.map.isRequired
-  },
-
-  mixins: [PureRenderMixin],
-
-  render () {
-    var displayName = this.props.account.get('display_name', this.props.account.get('username'));
-    var acct        = this.props.account.get('acct');
-    var url         = this.props.account.get('url');
-
-    return (
-      <a href={url} style={{ display: 'inline-block', color: '#616b86', textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '190px' }}>
-        <strong style={{ fontWeight: 'bold', color: '#fff' }}>{displayName}</strong> <span>{acct}</span>
-      </a>
-    );
-  }
-
-});
-
-export default DisplayName;
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
new file mode 100644
index 000000000..c23f977e4
--- /dev/null
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -0,0 +1,35 @@
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+const IconButton = React.createClass({
+
+  propTypes: {
+    title: React.PropTypes.string.isRequired,
+    icon: React.PropTypes.string.isRequired,
+    onClick: React.PropTypes.func.isRequired,
+    size: React.PropTypes.number
+  },
+
+  getDefaultProps () {
+    return {
+      size: 18
+    };
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleClick (e) {
+    e.preventDefault();
+    this.props.onClick();
+  },
+
+  render () {
+    return (
+      <a href='#' title={this.props.title} className='icon-button' onClick={this.handleClick} style={{ display: 'inline-block', fontSize: `${this.props.size}px`, width: `${this.props.size}px`, height: `${this.props.size}px`, lineHeight: `${this.props.size}px`}}>
+        <i className={`fa fa-fw fa-${this.props.icon}`}></i>
+      </a>
+    );
+  }
+
+});
+
+export default IconButton;
diff --git a/app/assets/javascripts/components/components/relative_timestamp.jsx b/app/assets/javascripts/components/components/relative_timestamp.jsx
index 35960a40a..5fcc5e5bb 100644
--- a/app/assets/javascripts/components/components/relative_timestamp.jsx
+++ b/app/assets/javascripts/components/components/relative_timestamp.jsx
@@ -48,7 +48,7 @@ const RelativeTimestamp = React.createClass({
 
   render () {
     return (
-      <span style={{ color: '#616b86' }}>
+      <span>
         {this.state.text}
       </span>
     );
diff --git a/app/assets/javascripts/components/components/reply_indicator.jsx b/app/assets/javascripts/components/components/reply_indicator.jsx
new file mode 100644
index 000000000..2531b7f43
--- /dev/null
+++ b/app/assets/javascripts/components/components/reply_indicator.jsx
@@ -0,0 +1,40 @@
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Avatar             from './avatar';
+import IconButton         from './icon_button';
+
+const ReplyIndicator = React.createClass({
+
+  propTypes: {
+    status: ImmutablePropTypes.map.isRequired,
+    onCancel: React.PropTypes.func.isRequired
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleClick () {
+    this.props.onCancel();
+  },
+
+  render () {
+    let content = { __html: this.props.status.get('content') };
+
+    return (
+      <div style={{ background: '#9baec8', padding: '10px' }}>
+        <div style={{ overflow: 'hidden', marginBottom: '5px' }}>
+          <div style={{ float: 'right', lineHeight: '24px' }}><IconButton title='Cancel' icon='times' onClick={this.handleClick} /></div>
+
+          <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
+            <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
+            <strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span>
+          </a>
+        </div>
+
+        <div className='reply-indicator__content' dangerouslySetInnerHTML={content} />
+      </div>
+    );
+  }
+
+});
+
+export default ReplyIndicator;
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index 29b9ebd98..e9fd225a9 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -1,35 +1,50 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from './avatar';
-import DisplayName        from './display_name';
 import RelativeTimestamp  from './relative_timestamp';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import IconButton         from './icon_button';
 
 const Status = React.createClass({
 
   propTypes: {
-    status: ImmutablePropTypes.map.isRequired
+    status: ImmutablePropTypes.map.isRequired,
+    onReply: React.PropTypes.func
   },
 
   mixins: [PureRenderMixin],
 
+  handleReplyClick () {
+    this.props.onReply(this.props.status);
+  },
+
   render () {
     var content = { __html: this.props.status.get('content') };
     var status  = this.props.status;
 
     return (
-      <div style={{ padding: '8px 10px', display: 'flex', flexDirection: 'row', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
-        <Avatar src={status.getIn(['account', 'avatar'])} />
+      <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
+        <div style={{ fontSize: '15px' }}>
+          <div style={{ float: 'right' }}>
+            <a href={status.get('url')} className='status__relative-time' style={{ color: '#616b86' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+          </div>
 
-        <div style={{ flex: '1 1 auto', marginLeft: '10px' }}>
-          <div style={{ overflow: 'hidden', fontSize: '15px' }}>
-            <div style={{ float: 'right' }}>
-              <a href={status.get('url')} style={{ textDecoration: 'none' }}><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+          <a href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#616b86' }}>
+            <div style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+              <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
             </div>
 
-            <DisplayName account={status.get('account')} />
-          </div>
+            <span style={{ display: 'inline-block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+              <strong style={{ fontWeight: 'bold', color: '#fff' }}>{status.getIn(['account', 'display_name'])}</strong> <span>@{status.getIn(['account', 'acct'])}</span>
+            </span>
+          </a>
+        </div>
+
+        <div className='status__content' dangerouslySetInnerHTML={content} />
 
-          <div className='status__content' dangerouslySetInnerHTML={content} />
+        <div style={{ marginTop: '10px', overflow: 'hidden' }}>
+          <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
+          <div style={{ float: 'left', marginRight: '10px'}}><IconButton title='Reblog' icon='retweet' /></div>
+          <div style={{ float: 'left'}}><IconButton title='Favourite' icon='star' /></div>
         </div>
       </div>
     );
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 9ba08fb70..5a89d6d60 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({
       <div style={{ overflowY: 'scroll', flex: '1 1 auto' }}>
         <div>
           {this.props.statuses.map((status) => {
-            return <Status key={status.get('id')} status={status} />;
+            return <Status key={status.get('id')} status={status} onReply={this.props.onReply} />;
           })}
         </div>
       </div>
diff --git a/app/assets/javascripts/components/containers/composer_drawer_container.jsx b/app/assets/javascripts/components/containers/composer_drawer_container.jsx
index 2a7344509..e9cef99b2 100644
--- a/app/assets/javascripts/components/containers/composer_drawer_container.jsx
+++ b/app/assets/javascripts/components/containers/composer_drawer_container.jsx
@@ -1,11 +1,12 @@
-import { connect }                      from 'react-redux';
-import ComposerDrawer                   from '../components/composer_drawer';
-import { changeCompose, submitCompose } from '../actions/compose';
+import { connect }                                          from 'react-redux';
+import ComposerDrawer                                       from '../components/composer_drawer';
+import { changeCompose, submitCompose, cancelReplyCompose } from '../actions/compose';
 
 const mapStateToProps = function (state, props) {
   return {
     text: state.getIn(['compose', 'text']),
-    isSubmitting: state.getIn(['compose', 'isSubmitting'])
+    is_submitting: state.getIn(['compose', 'is_submitting']),
+    in_reply_to: state.getIn(['compose', 'in_reply_to'])
   };
 };
 
@@ -17,6 +18,10 @@ const mapDispatchToProps = function (dispatch) {
 
     onSubmit: function () {
       dispatch(submitCompose());
+    },
+
+    onCancelReply: function () {
+      dispatch(cancelReplyCompose());
     }
   }
 };
diff --git a/app/assets/javascripts/components/containers/status_list_container.jsx b/app/assets/javascripts/components/containers/status_list_container.jsx
index bbf8a8876..9cdd7f4c2 100644
--- a/app/assets/javascripts/components/containers/status_list_container.jsx
+++ b/app/assets/javascripts/components/containers/status_list_container.jsx
@@ -1,5 +1,6 @@
-import { connect } from 'react-redux';
-import StatusList  from '../components/status_list';
+import { connect }      from 'react-redux';
+import StatusList       from '../components/status_list';
+import { replyCompose } from '../actions/compose';
 
 const mapStateToProps = function (state, props) {
   return {
@@ -7,4 +8,12 @@ const mapStateToProps = function (state, props) {
   };
 };
 
-export default connect(mapStateToProps)(StatusList);
+const mapDispatchToProps = function (dispatch) {
+  return {
+    onReply: function (status) {
+      dispatch(replyCompose(status));
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StatusList);
diff --git a/app/assets/javascripts/components/reducers/compose.jsx b/app/assets/javascripts/components/reducers/compose.jsx
index 93e0c7ebe..601cc6449 100644
--- a/app/assets/javascripts/components/reducers/compose.jsx
+++ b/app/assets/javascripts/components/reducers/compose.jsx
@@ -1,24 +1,32 @@
-import { COMPOSE_CHANGE, COMPOSE_SUBMIT_REQUEST, COMPOSE_SUBMIT_SUCCESS, COMPOSE_SUBMIT_FAIL } from '../actions/compose';
-import Immutable                                                                               from 'immutable';
+import * as constants from '../actions/compose';
+import Immutable                                                                                              from 'immutable';
 
 const initialState = Immutable.Map({
   text: '',
-  in_reply_to_id: null,
-  isSubmitting: false
+  in_reply_to: null,
+  is_submitting: false
 });
 
 export default function compose(state = initialState, action) {
   switch(action.type) {
-    case COMPOSE_CHANGE:
+    case constants.COMPOSE_CHANGE:
       return state.set('text', action.text);
-    case COMPOSE_SUBMIT_REQUEST:
-      return state.set('isSubmitting', true);
-    case COMPOSE_SUBMIT_SUCCESS:
+    case constants.COMPOSE_REPLY:
       return state.withMutations(map => {
-        map.set('text', '').set('isSubmitting', false);
+        map.set('in_reply_to', action.payload).set('text', `@${action.payload.getIn(['account', 'acct'])} `);
       });
-    case COMPOSE_SUBMIT_FAIL:
-      return state.set('isSubmitting', false);
+    case constants.COMPOSE_REPLY_CANCEL:
+      return state.withMutations(map => {
+        map.set('in_reply_to', null).set('text', '');
+      });
+    case constants.COMPOSE_SUBMIT_REQUEST:
+      return state.set('is_submitting', true);
+    case constants.COMPOSE_SUBMIT_SUCCESS:
+      return state.withMutations(map => {
+        map.set('text', '').set('is_submitting', false),set('in_reply_to', null);
+      });
+    case constants.COMPOSE_SUBMIT_FAIL:
+      return state.set('is_submitting', false);
     default:
       return state;
   }
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index b63ec7154..11f4cb49f 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -1,4 +1,38 @@
-.status__content {
+.button {
+  background-color: #2b90d9;
+
+  &:hover {
+    background-color: #489fde;
+  }
+
+  &:disabled {
+    background-color: #9baec8;
+  }
+}
+
+.icon-button {
+  color: #616b86;
+  cursor: pointer;
+
+  &:hover {
+    color: #717b98;
+  }
+
+  &.disabled {
+    color: #535b72;
+    cursor: default;
+  }
+}
+
+.compose-drawer__textarea {
+  background: #fff;
+
+  &:disabled {
+    background: #d9e1e8;
+  }
+}
+
+.status__content, .reply-indicator__content {
   font-size: 15px;
   line-height: 20px;
   white-space: pre-wrap;
@@ -24,3 +58,30 @@
     }
   }
 }
+
+.reply-indicator__content {
+  color: #282c37;
+  font-size: 14px;
+
+  a {
+    color: #535b72;
+  }
+}
+
+.status__display-name, .status__relative-time {
+  text-decoration: none;
+}
+
+.status__display-name, .reply-indicator__display-name {
+  &:hover {
+    strong {
+      text-decoration: underline;
+    }
+  }
+}
+
+.status__relative-time {
+  &:hover {
+    text-decoration: underline;
+  }
+}