[Glitch] Add role badges to the WebUI

Port 1e4ccc655a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2566/head
Claire 2023-07-27 16:05:24 +02:00
parent a25e03dbc3
commit a40ce78f11
3 changed files with 62 additions and 22 deletions

View File

@ -308,16 +308,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} />}
@ -350,13 +367,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>
)}
{signedIn && <AccountNoteContainer account={account} />}
{!(suspended || hidden) && (

View File

@ -200,25 +200,36 @@
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 {
color: $success-green;
.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 {
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

@ -534,6 +534,16 @@
}
}
&__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
.account-role {
line-height: unset;
}
}
&__tabs {
display: flex;
align-items: flex-start;
@ -571,10 +581,6 @@
&__name {
padding: 5px 10px;
.account-role {
vertical-align: top;
}
.emojione {
width: 22px;
height: 22px;