Add role badges to the WebUI (#25649)

pull/2339/head
Claire 2023-07-27 16:05:24 +02:00 committed by GitHub
parent ddaf200c78
commit 1e4ccc655a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 25 deletions

View File

@ -370,16 +370,33 @@ class Header extends ImmutablePureComponent {
const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
const isIndexable = !account.get('noindex'); const isIndexable = !account.get('noindex');
let badge; const badges = [];
if (account.get('bot')) { 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')) { } else if (account.get('group')) {
badge = (<div className='account-role group'><FormattedMessage id='account.badges.group' defaultMessage='Group' /></div>); badges.push(
} else { <div key='group-badge' className='account-role group'>
badge = null; <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 ( return (
<div className={classNames('account__header', { inactive: !!account.get('moved') })} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <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} />} {!(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'> <div className='account__header__tabs__name'>
<h1> <h1>
<span dangerouslySetInnerHTML={displayNameHtml} /> {badge} <span dangerouslySetInnerHTML={displayNameHtml} />
<small> <small>
<span>@{acct}</span> {lockedIcon} <span>@{acct}</span> {lockedIcon}
</small> </small>
</h1> </h1>
</div> </div>
{badges.length > 0 && (
<div className='account__header__badges'>
{badges}
</div>
)}
{!(suspended || hidden) && ( {!(suspended || hidden) && (
<div className='account__header__extra'> <div className='account__header__extra'>
<div className='account__header__bio' ref={this.setRef}> <div className='account__header__bio' ref={this.setRef}>

View File

@ -188,30 +188,43 @@
} }
.account-role, .account-role,
.information-badge,
.simple_form .recommended, .simple_form .recommended,
.simple_form .not_recommended { .simple_form .not_recommended {
display: inline-block; display: inline-block;
padding: 4px 6px; padding: 4px 6px;
cursor: default; cursor: default;
border-radius: 3px; border-radius: 4px;
font-size: 12px; font-size: 12px;
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
color: var(--user-role-accent, $ui-secondary-color); color: $ui-secondary-color;
background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1)); text-overflow: ellipsis;
border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5)); 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; color: $success-green;
background-color: rgba($success-green, 0.1); background-color: rgba($success-green, 0.1);
border-color: rgba($success-green, 0.5); 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 { .simple_form .not_recommended {

View File

@ -7331,6 +7331,16 @@ noscript {
} }
} }
&__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
.account-role {
line-height: unset;
}
}
&__tabs { &__tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -7369,10 +7379,6 @@ noscript {
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
.account-role {
vertical-align: top;
}
.emojione { .emojione {
width: 22px; width: 22px;
height: 22px; height: 22px;

View File

@ -9,7 +9,7 @@
%samp= ":#{custom_emoji.shortcode}:" %samp= ":#{custom_emoji.shortcode}:"
- if custom_emoji.local? - 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 .batch-table__row__content__extra
- if custom_emoji.local? - if custom_emoji.local?

View File

@ -5,8 +5,6 @@
<%- UserRole.where(highlighted: true).select { |role| role.color.present? }.each do |role| %> <%- UserRole.where(highlighted: true).select { |role| role.color.present? }.each do |role| %>
.user-role-<%= role.id %> { .user-role-<%= role.id %> {
--user-role-accent: <%= role.color %>; --user-role-accent: <%= role.color %>;
--user-role-background: <%= role.color + '19' %>;
--user-role-border: <%= role.color + '80' %>;
} }
<%- end %> <%- end %>

View File

@ -14,7 +14,7 @@
%strong.announcements-list__item__title %strong.announcements-list__item__title
= application.name = application.name
- if application.superapp? - 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__action-bar
.announcements-list__item__meta .announcements-list__item__meta