From a25e03dbc39061fe4e78d7a10ebb7407c0775589 Mon Sep 17 00:00:00 2001 From: Claire Date: Sat, 13 Jan 2024 12:43:25 +0100 Subject: [PATCH 1/3] Revert "Add role badges to WebUI (#2096)" This reverts commit d9a078e6d35b54804cfa696f1b2989b9769b8488. --- .../glitch/features/account/components/header.jsx | 6 ------ .../flavours/glitch/styles/accounts.scss | 2 +- .../glitch/styles/components/accounts.scss | 14 +++----------- 3 files changed, 4 insertions(+), 18 deletions(-) diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index c2b827d9e1..913536beb8 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -318,11 +318,6 @@ class Header extends ImmutablePureComponent { badge = null; } - let role = null; - if (account.getIn(['roles', 0])) { - role = (
{account.getIn(['roles', 0, 'name'])}
); - } - return (
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) && } @@ -339,7 +334,6 @@ class Header extends ImmutablePureComponent {
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index b0fe21bcf1..97bc9ae2c2 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -204,7 +204,7 @@ font-size: 12px; line-height: 12px; font-weight: 500; - color: $ui-secondary-color; + 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)); diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 8983ed7ce4..52065d031a 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -536,22 +536,14 @@ &__tabs { display: flex; - align-items: flex-end; + align-items: flex-start; justify-content: space-between; padding: 7px 10px; - margin-top: -81px; - height: 130px; + margin-top: -55px; + gap: 8px; overflow: hidden; margin-inline-start: -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; From a40ce78f1139d619824e47a16807659cfee5e9ce Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 27 Jul 2023 16:05:24 +0200 Subject: [PATCH 2/3] [Glitch] Add role badges to the WebUI Port 1e4ccc655acb0ac746656bed891d44b3a986384b to glitch-soc Signed-off-by: Claire --- .../features/account/components/header.jsx | 35 +++++++++++++++---- .../flavours/glitch/styles/accounts.scss | 35 ++++++++++++------- .../glitch/styles/components/accounts.scss | 14 +++++--- 3 files changed, 62 insertions(+), 22 deletions(-) diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index 913536beb8..6943cbd170 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -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 = (
); + 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']) && } @@ -350,13 +367,19 @@ class Header extends ImmutablePureComponent {

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

+ {badges.length > 0 && ( +
+ {badges} +
+ )} + {signedIn && } {!(suspended || hidden) && ( diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 97bc9ae2c2..54d0d60a6f 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -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 { diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 52065d031a..21b61ec1c3 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -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; From eae3275fff9aba31ae1dc27e1aa7cbccfdbc2317 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 2 Aug 2023 17:24:32 +0200 Subject: [PATCH 3/3] [Glitch] Change design of role badges in web UI Port 2cbdff97cedcf87f567effa782e0314c849334c6 to glitch-soc Co-authored-by: Claire Signed-off-by: Claire --- .../flavours/glitch/components/badge.jsx | 34 +++++++++++++++++++ .../features/account/components/header.jsx | 22 +++--------- .../flavours/glitch/styles/accounts.scss | 25 ++++++++++++-- 3 files changed, 60 insertions(+), 21 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/badge.jsx diff --git a/app/javascript/flavours/glitch/components/badge.jsx b/app/javascript/flavours/glitch/components/badge.jsx new file mode 100644 index 0000000000..cf225a6a0c --- /dev/null +++ b/app/javascript/flavours/glitch/components/badge.jsx @@ -0,0 +1,34 @@ +import PropTypes from 'prop-types'; + +import { FormattedMessage } from 'react-intl'; + +import { ReactComponent as GroupsIcon } from '@material-symbols/svg-600/outlined/group.svg'; +import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg'; +import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg'; + + +export const Badge = ({ icon, label, domain }) => ( +
+ {icon} + {label} + {domain && {domain}} +
+); + +Badge.propTypes = { + icon: PropTypes.node, + label: PropTypes.node, + domain: PropTypes.node, +}; + +Badge.defaultProps = { + icon: , +}; + +export const GroupBadge = () => ( + } label={} /> +); + +export const AutomatedBadge = () => ( + } label={} /> +); diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index 6943cbd170..1da9cb4411 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { Avatar } from 'flavours/glitch/components/avatar'; +import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge'; import { Button } from 'flavours/glitch/components/button'; import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; @@ -311,28 +312,13 @@ class Header extends ImmutablePureComponent { const badges = []; if (account.get('bot')) { - badges.push( -
- { ' ' } - -
- ); + badges.push(); } else if (account.get('group')) { - badges.push( -
- { ' ' } - -
- ); + badges.push(); } account.get('roles', []).forEach((role) => { - badges.push( -
- { ' ' } - {role.get('name')} ({domain}) -
- ); + badges.push({role.get('name')}} domain={domain} />); }); return ( diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss index 54d0d60a6f..f31be33058 100644 --- a/app/javascript/flavours/glitch/styles/accounts.scss +++ b/app/javascript/flavours/glitch/styles/accounts.scss @@ -191,7 +191,6 @@ } } -.account-role, .information-badge, .simple_form .overridden, .simple_form .recommended, @@ -218,10 +217,30 @@ } .account-role { + display: inline-flex; + padding: 4px; + padding-inline-end: 8px; border: 1px solid $highlight-text-color; + color: $highlight-text-color; + font-weight: 500; + font-size: 12px; + letter-spacing: 0.5px; + line-height: 16px; + gap: 4px; + border-radius: 6px; + align-items: center; - .fa { - color: var(--user-role-accent, $highlight-text-color); + svg { + width: auto; + height: 15px; + opacity: 0.85; + fill: currentColor; + } + + &__domain { + font-weight: 400; + opacity: 0.75; + letter-spacing: 0; } }