tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

fix template account card

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
app/javascript/mastodon/features/directory/components/account_card.js
View File

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