diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2016-10-27 21:59:56 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2016-10-27 21:59:56 +0200 |
commit | 1c84d505c8cb926710d059725c5a2d966dd4736b (patch) | |
tree | c4ff6e08948a6432ce8f966c4ba8b5d7e11adb28 /app/assets/javascripts/components/features/account | |
parent | 909d0d5e88b046f8bb69c893c54944bb2aad12cf (diff) |
Adding following/followers lists to the UI
Diffstat (limited to 'app/assets/javascripts/components/features/account')
-rw-r--r-- | app/assets/javascripts/components/features/account/components/action_bar.jsx | 39 | ||||
-rw-r--r-- | app/assets/javascripts/components/features/account/index.jsx | 18 |
2 files changed, 42 insertions, 15 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 195b143af..e0532dca1 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,27 @@ import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import DropdownMenu from '../../../components/dropdown_menu'; +import { Link } from 'react-router'; + +const outerStyle = { + borderTop: '1px solid #363c4b', + borderBottom: '1px solid #363c4b', + lineHeight: '36px', + overflow: 'hidden', + flex: '0 0 auto', + display: 'flex' +}; + +const outerDropdownStyle = { + padding: '10px', + flex: '1 1 auto' +}; + +const outerLinksStyle = { + flex: '1 1 auto', + display: 'flex', + lineHeight: '18px' +}; const ActionBar = React.createClass({ @@ -34,26 +55,26 @@ const ActionBar = React.createClass({ } return ( - <div style={{ borderTop: '1px solid #363c4b', borderBottom: '1px solid #363c4b', lineHeight: '36px', overflow: 'hidden', flex: '0 0 auto', display: 'flex' }}> - <div style={{ padding: '10px', flex: '1 1 auto' }}> + <div style={outerStyle}> + <div style={outerDropdownStyle}> <DropdownMenu items={menu} icon='bars' size={24} /> </div> - <div style={{ flex: '1 1 auto', display: 'flex', lineHeight: '18px' }}> - <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px', paddingRight: '5px' }}> + <div style={outerLinksStyle}> + <Link to={`/accounts/${account.get('id')}`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', borderLeft: '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> + </Link> - <div style={{ overflow: 'hidden', width: '80px', borderLeft: '1px solid #363c4b', padding: '10px 5px' }}> + <Link to={`/accounts/${account.get('id')}/following`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', borderLeft: '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> + </Link> - <div style={{ overflow: 'hidden', width: '80px', padding: '10px 5px', borderLeft: '1px solid #363c4b' }}> + <Link to={`/accounts/${account.get('id')}/followers`} style={{ textDecoration: 'none', overflow: 'hidden', width: '80px', padding: '10px 5px', borderLeft: '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> + </Link> </div> </div> ); diff --git a/app/assets/javascripts/components/features/account/index.jsx b/app/assets/javascripts/components/features/account/index.jsx index 76d69f751..548f7fc1f 100644 --- a/app/assets/javascripts/components/features/account/index.jsx +++ b/app/assets/javascripts/components/features/account/index.jsx @@ -14,17 +14,23 @@ import { mentionCompose } from '../../actions/compose'; import Header from './components/header'; import { getAccountTimeline, - getAccount + makeGetAccount } from '../../selectors'; import LoadingIndicator from '../../components/loading_indicator'; import ActionBar from './components/action_bar'; import Column from '../ui/components/column'; import ColumnBackButton from '../../components/column_back_button'; -const mapStateToProps = (state, props) => ({ - account: getAccount(state, Number(props.params.accountId)), - me: state.getIn(['timelines', 'me']) -}); +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, props) => ({ + account: getAccount(state, Number(props.params.accountId)), + me: state.getIn(['timelines', 'me']) + }); + + return mapStateToProps; +}; const Account = React.createClass({ @@ -92,4 +98,4 @@ const Account = React.createClass({ }); -export default connect(mapStateToProps)(Account); +export default connect(makeMapStateToProps)(Account); |