diff options
| author | Claire <claire.github-309c@sitedethib.com> | 2023-01-26 23:35:23 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-01-26 23:35:23 +0100 |
| commit | d9a078e6d35b54804cfa696f1b2989b9769b8488 (patch) | |
| tree | 1641df597a717e41f9f94cf3a9f0f7c17d230b0a /app/javascript/flavours | |
| parent | cfa92c4ec025609c24c24d73114033ecf150a438 (diff) | |
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>
Diffstat (limited to 'app/javascript/flavours')
3 files changed, 18 insertions, 4 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js index 071d00bb4..963ce7bf3 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.js +++ b/app/javascript/flavours/glitch/features/account/components/header.js @@ -321,6 +321,11 @@ class Header extends ImmutablePureComponent { 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 ( <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} />} @@ -337,6 +342,7 @@ class Header extends ImmutablePureComponent { <div className='account__header__tabs'> <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}> <Avatar account={suspended || hidden ? undefined : account} size={90} /> + {role} </a> {!suspended && ( diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index cdc506cf4..2158a691f 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -214,7 +214,7 @@ font-size: 12px; line-height: 12px; 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)); border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5)); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 5b3e1db1b..c2a6593b1 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -533,14 +533,22 @@ &__tabs { display: flex; - align-items: flex-start; + align-items: flex-end; justify-content: space-between; padding: 7px 10px; - margin-top: -55px; - gap: 8px; + margin-top: -81px; + height: 130px; overflow: hidden; 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 { display: flex; align-items: center; |