diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-09-30 00:00:45 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-09-30 00:00:45 +0200 |
commit | ef2b50c9acf8bdc2119bfe3d8fe127d92f32c0a7 (patch) | |
tree | 932297efa748fcc0578303a12829246ddf0f3836 /app/assets/javascripts/components/components | |
parent | a41c3487bd0564d0a27be5e3937aaf898e34f6f3 (diff) |
Deleting statuses from UI
Diffstat (limited to 'app/assets/javascripts/components/components')
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> |