From 1e4ccc655acb0ac746656bed891d44b3a986384b Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 27 Jul 2023 16:05:24 +0200 Subject: [PATCH] Add role badges to the WebUI (#25649) --- .../features/account/components/header.jsx | 35 +++++++++++++++---- app/javascript/styles/mastodon/accounts.scss | 35 +++++++++++++------ .../styles/mastodon/components.scss | 14 +++++--- .../custom_emojis/_custom_emoji.html.haml | 2 +- app/views/custom_css/show.css.erb | 2 -- .../authorized_applications/index.html.haml | 2 +- 6 files changed, 65 insertions(+), 25 deletions(-) diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index aea731757..51206c03b 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -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 = (
); + badges.push( +
+ { ' ' } + +
+ ); } else if (account.get('group')) { - badge = (
); - } else { - badge = null; + badges.push( +
+ { ' ' } + +
+ ); } + account.get('roles', []).forEach((role) => { + badges.push( +
+ { ' ' } + {role.get('name')} ({domain}) +
+ ); + }); + return (
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && } @@ -414,13 +431,19 @@ class Header extends ImmutablePureComponent {

- {badge} + @{acct} {lockedIcon}

+ {badges.length > 0 && ( +
+ {badges} +
+ )} + {!(suspended || hidden) && (
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index b50306ded..babfbbbad 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -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 { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2d1d4aa47..4c9a2cfdd 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -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; diff --git a/app/views/admin/custom_emojis/_custom_emoji.html.haml b/app/views/admin/custom_emojis/_custom_emoji.html.haml index 8d34d38e5..c6789d4f8 100644 --- a/app/views/admin/custom_emojis/_custom_emoji.html.haml +++ b/app/views/admin/custom_emojis/_custom_emoji.html.haml @@ -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? diff --git a/app/views/custom_css/show.css.erb b/app/views/custom_css/show.css.erb index bcbe81962..9cd38fb37 100644 --- a/app/views/custom_css/show.css.erb +++ b/app/views/custom_css/show.css.erb @@ -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 %> diff --git a/app/views/oauth/authorized_applications/index.html.haml b/app/views/oauth/authorized_applications/index.html.haml index 689f05102..40b09d87f 100644 --- a/app/views/oauth/authorized_applications/index.html.haml +++ b/app/views/oauth/authorized_applications/index.html.haml @@ -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