diff options
Diffstat (limited to 'app')
13 files changed, 28 insertions, 35 deletions
diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js index b79140c02..a1197c4be 100644 --- a/app/javascript/glitch/components/account/header.js +++ b/app/javascript/glitch/components/account/header.js @@ -194,11 +194,7 @@ Here, we render our component using all the things we've defined above. <div> <a href={account.get('url')} target='_blank' rel='noopener'> <span className='account__header__avatar'> - <Avatar - src={account.get('avatar')} - staticSrc={account.get('avatar_static')} - size={90} - /> + <Avatar account={account} size={90} /> </span> <span className='account__header__display-name' diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js index 5ce59fba4..bdb868e4d 100644 --- a/app/javascript/glitch/components/status/header.js +++ b/app/javascript/glitch/components/status/header.js @@ -216,16 +216,9 @@ if we have a `friend` and a normal `<Avatar>` if we don't. > <div className='status__avatar'>{ friend ? ( - <AvatarOverlay - staticSrc={account.get('avatar_static')} - overlaySrc={friend.get('avatar_static')} - /> + <AvatarOverlay account={account} friend={friend} /> ) : ( - <Avatar - src={account.get('avatar')} - staticSrc={account.get('avatar_static')} - size={48} - /> + <Avatar account={account} size={48} /> ) }</div> <DisplayName account={account} /> diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js index b6ca0661f..69cc63d10 100644 --- a/app/javascript/mastodon/components/account.js +++ b/app/javascript/mastodon/components/account.js @@ -70,7 +70,7 @@ export default class Account extends ImmutablePureComponent { <div className='account'> <div className='account__wrapper'> <Permalink key={account.get('id')} className='account__display-name' href={account.get('url')} to={`/accounts/${account.get('id')}`}> - <div className='account__avatar-wrapper'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={36} /></div> + <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div> <DisplayName account={account} /> </Permalink> diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index 4f8170657..dd155f059 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -1,11 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class Avatar extends React.PureComponent { static propTypes = { - src: PropTypes.string.isRequired, - staticSrc: PropTypes.string, + account: ImmutablePropTypes.map.isRequired, size: PropTypes.number.isRequired, style: PropTypes.object, animate: PropTypes.bool, @@ -33,9 +33,12 @@ export default class Avatar extends React.PureComponent { } render () { - const { src, size, staticSrc, animate, inline } = this.props; + const { account, size, animate, inline } = this.props; const { hovering } = this.state; + const src = account.get('avatar'); + const staticSrc = account.get('avatar_static'); + let className = 'account__avatar'; if (inline) { @@ -61,6 +64,7 @@ export default class Avatar extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} + data-avatar-of={`@${account.get('acct')}`} /> ); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index de43e0ef5..2ecf9fa44 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -1,28 +1,28 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; export default class AvatarOverlay extends React.PureComponent { static propTypes = { - staticSrc: PropTypes.string.isRequired, - overlaySrc: PropTypes.string.isRequired, + account: ImmutablePropTypes.map.isRequired, + friend: ImmutablePropTypes.map.isRequired, }; render() { - const { staticSrc, overlaySrc } = this.props; + const { account, friend } = this.props; const baseStyle = { - backgroundImage: `url(${staticSrc})`, + backgroundImage: `url(${account.get('avatar_static')})`, }; const overlayStyle = { - backgroundImage: `url(${overlaySrc})`, + backgroundImage: `url(${friend.get('avatar_static')})`, }; return ( <div className='account__avatar-overlay'> - <div className='account__avatar-overlay-base' style={baseStyle} /> - <div className='account__avatar-overlay-overlay' style={overlayStyle} /> + <div className='account__avatar-overlay-base' style={baseStyle} data-avatar-of={`@${account.get('acct')}`} /> + <div className='account__avatar-overlay-overlay' style={overlayStyle} data-avatar-of={`@${friend.get('acct')}`} /> </div> ); } diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index ac82e536f..9bc3523c8 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -231,9 +231,9 @@ export default class Status extends ImmutablePureComponent { } if (account === undefined || account === null) { - statusAvatar = <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />; + statusAvatar = <Avatar account={status.get('account')} size={48} />; }else{ - statusAvatar = <AvatarOverlay staticSrc={status.getIn(['account', 'avatar_static'])} overlaySrc={account.get('avatar_static')} />; + statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />; } return ( diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_account.js b/app/javascript/mastodon/features/compose/components/autosuggest_account.js index ebfa3c247..e7de3716b 100644 --- a/app/javascript/mastodon/features/compose/components/autosuggest_account.js +++ b/app/javascript/mastodon/features/compose/components/autosuggest_account.js @@ -15,7 +15,7 @@ export default class AutosuggestAccount extends ImmutablePureComponent { return ( <div className='autosuggest-account'> - <div className='autosuggest-account-icon'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={18} /></div> + <div className='autosuggest-account-icon'><Avatar account={account} size={18} /></div> <DisplayName account={account} /> </div> ); diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.js b/app/javascript/mastodon/features/compose/components/navigation_bar.js index 5000ea2f1..7f346854c 100644 --- a/app/javascript/mastodon/features/compose/components/navigation_bar.js +++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js @@ -19,7 +19,7 @@ export default class NavigationBar extends ImmutablePureComponent { <div className='navigation-bar'> <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}> <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span> - <Avatar src={this.props.account.get('avatar')} staticSrc={this.props.account.get('avatar_static')} size={40} /> + <Avatar account={this.props.account} size={40} /> </Permalink> <div className='navigation-bar__profile'> diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.js b/app/javascript/mastodon/features/compose/components/reply_indicator.js index da00e46c5..35a9b4b1b 100644 --- a/app/javascript/mastodon/features/compose/components/reply_indicator.js +++ b/app/javascript/mastodon/features/compose/components/reply_indicator.js @@ -51,7 +51,7 @@ export default class ReplyIndicator extends ImmutablePureComponent { <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} /></div> <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='reply-indicator__display-name'> - <div className='reply-indicator__display-avatar'><Avatar size={24} src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} /></div> + <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div> <DisplayName account={status.get('account')} /> </a> </div> diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js index 566953ddd..66fa5c235 100644 --- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.js +++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.js @@ -32,7 +32,7 @@ export default class AccountAuthorize extends ImmutablePureComponent { <div className='account-authorize__wrapper'> <div className='account-authorize'> <Permalink href={account.get('url')} to={`/accounts/${account.get('id')}`} className='detailed-status__display-name'> - <div className='account-authorize__avatar'><Avatar src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={48} /></div> + <div className='account-authorize__avatar'><Avatar account={account} size={48} /></div> <DisplayName account={account} /> </Permalink> diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js index 5d28d4390..a098322ba 100644 --- a/app/javascript/mastodon/features/status/components/detailed_status.js +++ b/app/javascript/mastodon/features/status/components/detailed_status.js @@ -81,7 +81,7 @@ export default class DetailedStatus extends ImmutablePureComponent { return ( <div className='detailed-status'> <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'> - <div className='detailed-status__display-avatar'><Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /></div> + <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div> <DisplayName account={status.get('account')} /> </a> diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index cc0620d1c..3d40033be 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -46,7 +46,7 @@ export default class ActionsModal extends ImmutablePureComponent { <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'> <div className='status__avatar'> - <Avatar src={this.props.status.getIn(['account', 'avatar'])} staticSrc={this.props.status.getIn(['account', 'avatar_static'])} size={48} /> + <Avatar account={this.props.status.get('account')} size={48} /> </div> <DisplayName account={this.props.status.get('account')} /> diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.js b/app/javascript/mastodon/features/ui/components/boost_modal.js index a1b0cf4bd..dfd1284e9 100644 --- a/app/javascript/mastodon/features/ui/components/boost_modal.js +++ b/app/javascript/mastodon/features/ui/components/boost_modal.js @@ -62,7 +62,7 @@ export default class BoostModal extends ImmutablePureComponent { <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> <div className='status__avatar'> - <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} /> + <Avatar account={status.get('account')} size={48} /> </div> <DisplayName account={status.get('account')} /> |