Add role badges to the WebUI (#25649)

main
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 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}>

View File

@ -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 {

View File

@ -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;

View File

@ -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?

View File

@ -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 %>

View File

@ -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