Add role badges to the WebUI (#25649)
This commit is contained in:
Claire
GitHub
parent
ddaf200c78
commit
1e4ccc655a
|
|
@ -370,16 +370,33 @@ class Header extends ImmutablePureComponent {
|
|||
const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
|
||||
const isIndexable = !account.get('noindex');
|
||||
|
||||
let badge;
|
||||
const badges = [];
|
||||
|
||||
if (account.get('bot')) {
|
||||
badge = (<div className='account-role bot'><FormattedMessage id='account.badges.bot' defaultMessage='Automated' /></div>);
|
||||
badges.push(
|
||||
<div key='bot-badge' className='account-role bot'>
|
||||
<Icon id='cogs' /> { ' ' }
|
||||
<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
|
||||
</div>
|
||||
);
|
||||
} else if (account.get('group')) {
|
||||
badge = (<div className='account-role group'><FormattedMessage id='account.badges.group' defaultMessage='Group' /></div>);
|
||||
} else {
|
||||
badge = null;
|
||||
badges.push(
|
||||
<div key='group-badge' className='account-role group'>
|
||||
<Icon id='users' /> { ' ' }
|
||||
<FormattedMessage id='account.badges.group' defaultMessage='Group' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
account.get('roles', []).forEach((role) => {
|
||||
badges.push(
|
||||
<div key={`role-badge-${role.get('id')}`} className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>
|
||||
<Icon id='circle' /> { ' ' }
|
||||
<span>{role.get('name')} ({domain})</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
|
||||
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && <FollowRequestNoteContainer account={account} />}
|
||||
|
|
@ -414,13 +431,19 @@ class Header extends ImmutablePureComponent {
|
|||
|
||||
<div className='account__header__tabs__name'>
|
||||
<h1>
|
||||
<span dangerouslySetInnerHTML={displayNameHtml} /> {badge}
|
||||
<span dangerouslySetInnerHTML={displayNameHtml} />
|
||||
<small>
|
||||
<span>@{acct}</span> {lockedIcon}
|
||||
</small>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{badges.length > 0 && (
|
||||
<div className='account__header__badges'>
|
||||
{badges}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!(suspended || hidden) && (
|
||||
<div className='account__header__extra'>
|
||||
<div className='account__header__bio' ref={this.setRef}>
|
||||
|
|
|
|||
|
|
@ -188,30 +188,43 @@
|
|||
}
|
||||
|
||||
.account-role,
|
||||
.information-badge,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
display: inline-block;
|
||||
padding: 4px 6px;
|
||||
cursor: default;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--user-role-accent, $ui-secondary-color);
|
||||
background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
|
||||
border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
|
||||
color: $ui-secondary-color;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.moderator {
|
||||
.information-badge,
|
||||
.simple_form .recommended,
|
||||
.simple_form .not_recommended {
|
||||
background-color: rgba($ui-secondary-color, 0.1);
|
||||
border: 1px solid rgba($ui-secondary-color, 0.5);
|
||||
}
|
||||
|
||||
.account-role {
|
||||
border: 1px solid $highlight-text-color;
|
||||
|
||||
.fa {
|
||||
color: var(--user-role-accent, $highlight-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.information-badge {
|
||||
&.superapp {
|
||||
color: $success-green;
|
||||
background-color: rgba($success-green, 0.1);
|
||||
border-color: rgba($success-green, 0.5);
|
||||
}
|
||||
|
||||
&.admin {
|
||||
color: lighten($error-red, 12%);
|
||||
background-color: rgba(lighten($error-red, 12%), 0.1);
|
||||
border-color: rgba(lighten($error-red, 12%), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form .not_recommended {
|
||||
|
|
|
|||
|
|
@ -7331,6 +7331,16 @@ noscript {
|
|||
}
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.account-role {
|
||||
line-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -7369,10 +7379,6 @@ noscript {
|
|||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.account-role {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
%samp= ":#{custom_emoji.shortcode}:"
|
||||
|
||||
- if custom_emoji.local?
|
||||
%span.account-role.bot= custom_emoji.category&.name || t('admin.custom_emojis.uncategorized')
|
||||
%span.information-badge= custom_emoji.category&.name || t('admin.custom_emojis.uncategorized')
|
||||
|
||||
.batch-table__row__content__extra
|
||||
- if custom_emoji.local?
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
<%- UserRole.where(highlighted: true).select { |role| role.color.present? }.each do |role| %>
|
||||
.user-role-<%= role.id %> {
|
||||
--user-role-accent: <%= role.color %>;
|
||||
--user-role-background: <%= role.color + '19' %>;
|
||||
--user-role-border: <%= role.color + '80' %>;
|
||||
}
|
||||
|
||||
<%- end %>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
%strong.announcements-list__item__title
|
||||
= application.name
|
||||
- if application.superapp?
|
||||
%span.account-role.moderator= t('doorkeeper.authorized_applications.index.superapp')
|
||||
%span.information-badge.superapp= t('doorkeeper.authorized_applications.index.superapp')
|
||||
|
||||
.announcements-list__item__action-bar
|
||||
.announcements-list__item__meta
|
||||
|
|
|
|||
Loading…
Reference in New Issue