Deleting statuses from UI

4 files changed, 88 insertions, 23 deletions

diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx
index b7f2366ba..509192260 100644
--- a/app/assets/javascripts/components/components/icon_button.jsx
+++ b/app/assets/javascripts/components/components/icon_button.jsx
@@ -26,8 +26,16 @@ const IconButton = React.createClass({
   },
 
   render () {
+    const style = {
+      display: 'inline-block',
+      fontSize: `${this.props.size}px`,
+      width: `${this.props.size}px`,
+      height: `${this.props.size}px`,
+      lineHeight: `${this.props.size}px`
+    };
+
     return (
-      <a href='#' title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} 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`}}>
+      <a href='#' title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}>
         <i className={`fa fa-fw fa-${this.props.icon}`}></i>
       </a>
     );
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index a1ab60ae1..7115d154e 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -2,11 +2,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from './avatar';
 import RelativeTimestamp  from './relative_timestamp';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
-import IconButton         from './icon_button';
 import DisplayName        from './display_name';
 import MediaGallery       from './media_gallery';
 import VideoPlayer        from './video_player';
 import StatusContent      from './status_content';
+import StatusActionBar    from './status_action_bar';
 
 const Status = React.createClass({
 
@@ -19,23 +19,13 @@ const Status = React.createClass({
     wrapped: React.PropTypes.bool,
     onReply: React.PropTypes.func,
     onFavourite: React.PropTypes.func,
-    onReblog: React.PropTypes.func
+    onReblog: React.PropTypes.func,
+    onDelete: React.PropTypes.func,
+    me: React.PropTypes.number
   },
 
   mixins: [PureRenderMixin],
 
-  handleReplyClick () {
-    this.props.onReply(this.props.status);
-  },
-
-  handleFavouriteClick () {
-    this.props.onFavourite(this.props.status);
-  },
-
-  handleReblogClick () {
-    this.props.onReblog(this.props.status);
-  },
-
   handleClick () {
     const { status } = this.props;
     this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
@@ -96,11 +86,7 @@ const Status = React.createClass({
 
         {media}
 
-        <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 active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
-          <div style={{ float: 'left'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div>
-        </div>
+        <StatusActionBar {...this.props} />
       </div>
     );
   }
diff --git a/app/assets/javascripts/components/components/status_action_bar.jsx b/app/assets/javascripts/components/components/status_action_bar.jsx
new file mode 100644
index 000000000..76f0ac5f1
--- /dev/null
+++ b/app/assets/javascripts/components/components/status_action_bar.jsx
@@ -0,0 +1,67 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import PureRenderMixin    from 'react-addons-pure-render-mixin';
+import IconButton         from './icon_button';
+import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
+
+const StatusActionBar = React.createClass({
+  propTypes: {
+    status: ImmutablePropTypes.map.isRequired,
+    onReply: React.PropTypes.func,
+    onFavourite: React.PropTypes.func,
+    onReblog: React.PropTypes.func,
+    onDelete: React.PropTypes.func
+  },
+
+  mixins: [PureRenderMixin],
+
+  handleReplyClick () {
+    this.props.onReply(this.props.status);
+  },
+
+  handleFavouriteClick () {
+    this.props.onFavourite(this.props.status);
+  },
+
+  handleReblogClick () {
+    this.props.onReblog(this.props.status);
+  },
+
+  handleDeleteClick(e) {
+    e.preventDefault();
+    this.props.onDelete(this.props.status);
+  },
+
+  render () {
+    const { status, me } = this.props;
+    let menu = '';
+
+    if (status.getIn(['account', 'id']) === me) {
+      menu = (
+        <ul>
+          <li><a href='#' onClick={this.handleDeleteClick}>Delete</a></li>
+        </ul>
+      );
+    }
+
+    return (
+      <div style={{ marginTop: '10px', overflow: 'hidden' }}>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton title='Reply' icon='reply' onClick={this.handleReplyClick} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('reblogged')} title='Reblog' icon='retweet' onClick={this.handleReblogClick} /></div>
+        <div style={{ float: 'left', marginRight: '18px'}}><IconButton active={status.get('favourited')} title='Favourite' icon='star' onClick={this.handleFavouriteClick} /></div>
+
+        <div onClick={e => e.stopPropagation()} style={{ width: '18px', height: '18px', float: 'left' }}>
+          <Dropdown>
+            <DropdownTrigger className='icon-button' style={{ fontSize: '18px', lineHeight: '18px', width: '18px', height: '18px' }}>
+              <i className='fa fa-fw fa-ellipsis-h' />
+            </DropdownTrigger>
+
+            <DropdownContent>{menu}</DropdownContent>
+          </Dropdown>
+        </div>
+      </div>
+    );
+  }
+
+});
+
+export default StatusActionBar;
diff --git a/app/assets/javascripts/components/components/status_list.jsx b/app/assets/javascripts/components/components/status_list.jsx
index 381653d5d..9855ec141 100644
--- a/app/assets/javascripts/components/components/status_list.jsx
+++ b/app/assets/javascripts/components/components/status_list.jsx
@@ -9,7 +9,9 @@ const StatusList = React.createClass({
     onReply: React.PropTypes.func,
     onReblog: React.PropTypes.func,
     onFavourite: React.PropTypes.func,
-    onScrollToBottom: React.PropTypes.func
+    onDelete: React.PropTypes.func,
+    onScrollToBottom: React.PropTypes.func,
+    me: React.PropTypes.number
   },
 
   mixins: [PureRenderMixin],
@@ -23,11 +25,13 @@ const StatusList = React.createClass({
   },
 
   render () {
+    const { statuses, onScrollToBottom, ...other } = this.props;
+
     return (
       <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable' onScroll={this.handleScroll}>
         <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} />;
+          {statuses.map((status) => {
+            return <Status key={status.get('id')} {...other} status={status} />;
           })}
         </div>
       </div>