fix template account card

This commit is contained in:
tykayn 2021-05-24 11:12:27 +02:00 committed by Baptiste Lemoine
parent 9598bce610
commit 242adcad79
1 changed files with 78 additions and 67 deletions

View File

@ -9,27 +9,27 @@ import DisplayName from 'mastodon/components/display_name';
import Permalink from 'mastodon/components/permalink';
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
import IconButton from 'mastodon/components/icon_button';
import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { autoPlayGif, me, unfollowModal } from 'mastodon/initial_state';
import ShortNumber from 'mastodon/components/short_number';
import {
followAccount,
unfollowAccount,
blockAccount,
followAccount,
unblockAccount,
unfollowAccount,
unmuteAccount,
} from 'mastodon/actions/accounts';
import { openModal } from 'mastodon/actions/modal';
import { initMuteModal } from 'mastodon/actions/mutes';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
follow : { id: 'account.follow', defaultMessage: 'Follow' },
unfollow : { id: 'account.unfollow', defaultMessage: 'Unfollow' },
requested : { id: 'account.requested', defaultMessage: 'Awaiting approval' },
unblock : { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
unmute : { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
unfollowConfirm: {
id: 'confirmations.unfollow.confirm',
id : 'confirmations.unfollow.confirm',
defaultMessage: 'Unfollow',
},
});
@ -53,14 +53,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (unfollowModal) {
dispatch(
openModal('CONFIRM', {
message: (
message : (
<FormattedMessage
id='confirmations.unfollow.message'
defaultMessage='Are you sure you want to unfollow {name}?'
values={{ name: <strong>@{account.get('acct')}</strong> }}
values={{ name: <strong >@{account.get('acct')}</strong > }}
/>
),
confirm: intl.formatMessage(messages.unfollowConfirm),
confirm : intl.formatMessage(messages.unfollowConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
}),
);
@ -89,17 +89,16 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
},
});
export default
@injectIntl
export default @injectIntl
@connect(makeMapStateToProps, mapDispatchToProps)
class AccountCard extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
intl: PropTypes.object.isRequired,
account : ImmutablePropTypes.map.isRequired,
intl : PropTypes.object.isRequired,
onFollow: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
onBlock : PropTypes.func.isRequired,
onMute : PropTypes.func.isRequired,
};
handleMouseEnter = ({ currentTarget }) => {
@ -113,7 +112,7 @@ class AccountCard extends ImmutablePureComponent {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-original');
}
}
};
handleMouseLeave = ({ currentTarget }) => {
if (autoPlayGif) {
@ -126,7 +125,7 @@ class AccountCard extends ImmutablePureComponent {
let emoji = emojis[i];
emoji.src = emoji.getAttribute('data-static');
}
}
};
handleFollow = () => {
this.props.onFollow(this.props.account);
@ -207,7 +206,7 @@ class AccountCard extends ImmutablePureComponent {
}
alt=''
/>
</div>
</div >
<div className='columns'>
<div className='column'>
@ -217,56 +216,68 @@ class AccountCard extends ImmutablePureComponent {
href={account.get('url')}
to={`/accounts/${account.get('id')}`}
>
<Avatar account={account} size={48} />
<Avatar
account={account}
size={48}
/>
<DisplayName account={account} />
</Permalink>
</Permalink >
<div className='directory__card__bar__relationship account__relationship'>
{buttons}
</div>
</div>
<div className='directory__card__bar__relationship account__relationship'>
{buttons}
</div >
</div >
<div className='directory__card__extra' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<div
className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
/>
</div>
<div
className='directory__card__extra'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<div
className='account__header__content translate'
dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
/>
</div >
<div className='directory__card__extra'>
<div className='accounts-table__count'>
<ShortNumber value={account.get('statuses_count')} />
<small>
<FormattedMessage id='account.posts' defaultMessage='Toots' />
</small>
</div>
<div className='accounts-table__count'>
<ShortNumber value={account.get('followers_count')} />{' '}
<small>
<FormattedMessage
id='account.followers'
defaultMessage='Followers'
/>
</small>
</div>
<div className='accounts-table__count'>
{account.get('last_status_at') === null ? (
<FormattedMessage
id='account.never_active'
defaultMessage='Never'
/>
) : (
<RelativeTimestamp timestamp={account.get('last_status_at')} />
)}{' '}
<small>
<FormattedMessage
id='account.last_status'
defaultMessage='Last active'
/>
</small>
</div>
</div>
</div>
<div className='directory__card__extra'>
<div className='accounts-table__count'>
<ShortNumber value={account.get('statuses_count')} />
<small >
<FormattedMessage
id='account.posts'
defaultMessage='Toots'
/>
</small >
</div >
<div className='accounts-table__count'>
<ShortNumber value={account.get('followers_count')} />{' '}
<small >
<FormattedMessage
id='account.followers'
defaultMessage='Followers'
/>
</small >
</div >
<div className='accounts-table__count'>
{account.get('last_status_at') === null ? (
<FormattedMessage
id='account.never_active'
defaultMessage='Never'
/>
) : (
<RelativeTimestamp timestamp={account.get('last_status_at')} />
)}{' '}
<small >
<FormattedMessage
id='account.last_status'
defaultMessage='Last active'
/>
</small >
</div >
</div >
</div >
</div >
</div >
);
}