Add boost visibility icon

This commit is contained in:
noellabo 2021-02-14 18:12:05 +09:00
parent 91675c947e
commit e1c54c9201
4 changed files with 19 additions and 11 deletions

View file

@ -392,6 +392,15 @@ class Status extends ImmutablePureComponent {
openMedia: this.handleHotkeyOpenMedia,
};
const visibilityIconInfo = {
'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
'limited': { icon: 'user-circle', text: intl.formatMessage(messages.limited_short) },
'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
};
if (hidden) {
return (
<HotKeys handlers={handlers}>
@ -427,11 +436,14 @@ class Status extends ImmutablePureComponent {
);
} else if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
const display_name_html = { __html: status.getIn(['account', 'display_name_html']) };
const visibilityReblogIcon = visibilityIconInfo[status.get('visibility')];
const visibilityReblogLink = <Icon id={visibilityReblogIcon.icon} className='status__prepend-icon' title={visibilityReblogIcon.text} />;
prepend = (
<div className='status__prepend'>
<div className='status__prepend-icon-wrapper'><Icon id='retweet' className='status__prepend-icon' fixedWidth /></div>
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} data-group={status.getIn(['account', 'group'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
{visibilityReblogLink}
</div>
);
@ -537,15 +549,6 @@ class Status extends ImmutablePureComponent {
statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
}
const visibilityIconInfo = {
'public': { icon: 'globe', text: intl.formatMessage(messages.public_short) },
'unlisted': { icon: 'unlock', text: intl.formatMessage(messages.unlisted_short) },
'private': { icon: 'lock', text: intl.formatMessage(messages.private_short) },
'mutual': { icon: 'exchange', text: intl.formatMessage(messages.mutual_short) },
'limited': { icon: 'user-circle', text: intl.formatMessage(messages.limited_short) },
'direct': { icon: 'envelope', text: intl.formatMessage(messages.direct_short) },
};
const visibilityIcon = visibilityIconInfo[status.get('visibility')];
const visibilityLink = <Icon id={visibilityIcon.icon} title={visibilityIcon.text} />;

View file

@ -1274,9 +1274,9 @@
}
> span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px;
}
}

View file

@ -158,6 +158,10 @@ body.rtl {
.status__prepend {
margin-left: 0;
margin-right: 68px;
> span {
margin-left: 4px;
}
}
.status__prepend-icon-wrapper {

View file

@ -31,6 +31,7 @@
%bdi
%strong.emojify= display_name(status.account, custom_emojify: true)
= t('stream_entries.reblogged')
= visibility_icon status
- elsif pinned
.status__prepend
.status__prepend-icon-wrapper