|
|
|
@ -1,62 +1,82 @@ |
|
|
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin'; |
|
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
|
|
|
|
import Avatar from '../../../components/avatar'; |
|
|
|
|
import DisplayName from '../../../components/display_name'; |
|
|
|
|
import { Link } from 'react-router'; |
|
|
|
|
import IconButton from '../../../components/icon_button'; |
|
|
|
|
|
|
|
|
|
const outerStyle = { |
|
|
|
|
padding: '10px' |
|
|
|
|
padding: '10px', |
|
|
|
|
borderBottom: '1px solid #363c4b' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const displayNameStyle = { |
|
|
|
|
const itemStyle = { |
|
|
|
|
flex: '1 1 auto', |
|
|
|
|
display: 'block', |
|
|
|
|
fontWeight: '500', |
|
|
|
|
color: '#9baec8', |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
textOverflow: 'ellipsis', |
|
|
|
|
color: '#fff' |
|
|
|
|
textDecoration: 'none', |
|
|
|
|
fontSize: '14px' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const acctStyle = { |
|
|
|
|
display: 'block', |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
textOverflow: 'ellipsis' |
|
|
|
|
const noteStyle = { |
|
|
|
|
paddingTop: '5px', |
|
|
|
|
fontSize: '12px', |
|
|
|
|
color: '#616b86' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const itemStyle = { |
|
|
|
|
display: 'block', |
|
|
|
|
color: '#9baec8', |
|
|
|
|
overflow: 'hidden', |
|
|
|
|
textDecoration: 'none' |
|
|
|
|
const buttonsStyle = { |
|
|
|
|
padding: '10px' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const Account = React.createClass({ |
|
|
|
|
|
|
|
|
|
propTypes: { |
|
|
|
|
account: ImmutablePropTypes.map.isRequired, |
|
|
|
|
me: React.PropTypes.number.isRequired |
|
|
|
|
me: React.PropTypes.number.isRequired, |
|
|
|
|
onFollow: React.PropTypes.func.isRequired, |
|
|
|
|
withNote: React.PropTypes.bool |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
mixins: [PureRenderMixin], |
|
|
|
|
|
|
|
|
|
handleFollow () { |
|
|
|
|
this.props.onFollow(this.props.account); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
render () { |
|
|
|
|
const { account } = this.props; |
|
|
|
|
const { account, me } = this.props; |
|
|
|
|
|
|
|
|
|
if (!account) { |
|
|
|
|
return <div />; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let displayName = account.get('display_name'); |
|
|
|
|
let note, buttons; |
|
|
|
|
|
|
|
|
|
if (displayName.length === 0) { |
|
|
|
|
displayName = account.get('username'); |
|
|
|
|
if (account.get('note').length > 0) { |
|
|
|
|
note = <div style={noteStyle}>{account.get('note')}</div>; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (account.get('id') !== me) { |
|
|
|
|
buttons = ( |
|
|
|
|
<div style={buttonsStyle}> |
|
|
|
|
<IconButton icon='user-plus' title='Follow' onClick={this.handleFollow} active={account.getIn(['relationship', 'following'])} /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div style={outerStyle}> |
|
|
|
|
<Link key={account.get('id')} style={itemStyle} to={`/accounts/${account.get('id')}`}> |
|
|
|
|
<div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div> |
|
|
|
|
<strong style={displayNameStyle}>{displayName}</strong> |
|
|
|
|
<span style={acctStyle}>{account.get('acct')}</span> |
|
|
|
|
</Link> |
|
|
|
|
<div style={{ display: 'flex' }}> |
|
|
|
|
<Link key={account.get('id')} style={itemStyle} className='account__display-name' to={`/accounts/${account.get('id')}`}> |
|
|
|
|
<div style={{ float: 'left', marginRight: '10px' }}><Avatar src={account.get('avatar')} size={36} /></div> |
|
|
|
|
<DisplayName account={account} /> |
|
|
|
|
</Link> |
|
|
|
|
|
|
|
|
|
{buttons} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{note} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|