diff options
Diffstat (limited to 'app/assets/javascripts/components/features/account/components/action_bar.jsx')
-rw-r--r-- | app/assets/javascripts/components/features/account/components/action_bar.jsx | 67 |
1 files changed, 31 insertions, 36 deletions
diff --git a/app/assets/javascripts/components/features/account/components/action_bar.jsx b/app/assets/javascripts/components/features/account/components/action_bar.jsx index aadf168b2..61c89313a 100644 --- a/app/assets/javascripts/components/features/account/components/action_bar.jsx +++ b/app/assets/javascripts/components/features/account/components/action_bar.jsx @@ -1,6 +1,6 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import Button from '../../../components/button'; +import DropdownMenu from '../../../components/dropdown_menu'; const ActionBar = React.createClass({ @@ -16,47 +16,42 @@ const ActionBar = React.createClass({ render () { const { account, me } = this.props; - let infoText = ''; - let follow = ''; - let buttonText = ''; - let block = ''; - let disabled = false; + let menu = []; if (account.get('id') === me) { - buttonText = 'This is you!'; - disabled = true; - } else { - let blockText = ''; - - if (account.getIn(['relationship', 'blocking'])) { - buttonText = 'Blocked'; - disabled = true; - blockText = 'Unblock'; - } else { - if (account.getIn(['relationship', 'following'])) { - buttonText = 'Unfollow'; - } else { - buttonText = 'Follow'; - } - - if (account.getIn(['relationship', 'followed_by'])) { - infoText = 'Follows you!'; - } - - blockText = 'Block'; - } - block = <Button text={blockText} onClick={this.props.onBlock} />; - } - - if (!account.getIn(['relationship', 'blocking'])) { - follow = <Button text={buttonText} onClick={this.props.onFollow} disabled={disabled} />; + } else if (account.getIn(['relationship', 'blocking'])) { + menu.push({ text: 'Unblock', action: this.props.onBlock }); + } else if (account.getIn(['relationship', 'following'])) { + menu.push({ text: 'Unfollow', action: this.props.onFollow }); + menu.push({ text: 'Block', action: this.props.onBlock }); + } else { + menu.push({ text: 'Follow', action: this.props.onFollow }); + menu.push({ text: 'Block', action: this.props.onBlock }); } return ( - <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', padding: '10px', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto' }}> - {follow} {block} - <span style={{ color: '#616b86', fontWeight: '500', textTransform: 'uppercase', float: 'right', display: 'block' }}>{infoText}</span> + <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto', display: 'flex' }}> + <div style={{ flex: '1 1 auto', display: 'flex', lineHeight: '18px' }}> + <div style={{ overflow: 'hidden', width: '80px', borderRight: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}> + <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Posts</span> + <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('statuses_count')}</span> + </div> + + <div style={{ overflow: 'hidden', width: '80px', borderRight: '1px solid #363c4b', padding: '10px 5px' }}> + <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Follows</span> + <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('following_count')}</span> + </div> + + <div style={{ overflow: 'hidden', width: '80px', padding: '10px 5px', borderRight: '1px solid #363c4b' }}> + <span style={{ display: 'block', textTransform: 'uppercase', fontSize: '11px', color: '#616b86' }}>Followers</span> + <span style={{ display: 'block', fontSize: '15px', fontWeight: '500', color: '#fff' }}>{account.get('followers_count')}</span> + </div> + </div> + + <div style={{ padding: '10px', flex: '1 1 auto' }}> + <DropdownMenu items={menu} icon='bars' size={24} /> + </div> </div> ); }, |