treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Add role badges to WebUI (#2096) 

* [Glitch] Add role badges to WebUI

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

* [Glitch] Ensure role name remains readable

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
Claire 2023-01-26 23:35:23 +01:00 committed by GitHub
parent 39b5421ab4
commit c14c4be592
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/account/components/header.js
View File

@ -321,6 +321,11 @@ class Header extends ImmutablePureComponent {
badge = null; badge = null;
} }
let role = null;
if (account.getIn(['roles', 0])) {
role = (<div key='role' className={`account-role user-role-${account.getIn(['roles', 0, 'id'])}`}>{account.getIn(['roles', 0, 'name'])}</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} />}
@ -337,6 +342,7 @@ class Header extends ImmutablePureComponent {
<div className='account__header__tabs'> <div className='account__header__tabs'>
<a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}> <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}>
<Avatar account={suspended || hidden ? undefined : account} size={90} /> <Avatar account={suspended || hidden ? undefined : account} size={90} />
{role}
</a> </a>
{!suspended && ( {!suspended && (

2
app/javascript/flavours/glitch/styles/accounts.scss
View File

@ -214,7 +214,7 @@
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)); 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)); border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));

14
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

@ -533,14 +533,22 @@
&__tabs { &__tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
padding: 7px 10px; padding: 7px 10px;
margin-top: -55px; margin-top: -81px;
gap: 8px; height: 130px;
overflow: hidden; overflow: hidden;
margin-left: -2px; // aligns the pfp with content below margin-left: -2px; // aligns the pfp with content below
.account-role {
margin: 0 2px;
padding: 4px 0;
box-sizing: border-box;
min-width: 90px;
text-align: center;
}
&__buttons { &__buttons {
display: flex; display: flex;
align-items: center; align-items: center;