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

[Glitch] Change design of role badges in web UI 

Port 2cbdff97ce to glitch-soc

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-new
Eugen Rochko 2023-08-02 17:24:32 +02:00 committed by Claire
parent a40ce78f11
commit eae3275fff
3 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/javascript/flavours/glitch/components/badge.jsx Normal file
View File

@ -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 }) => (
<div className='account-role'>
{icon}
{label}
{domain && <span className='account-role__domain'>{domain}</span>}
</div>
);
Badge.propTypes = {
icon: PropTypes.node,
label: PropTypes.node,
domain: PropTypes.node,
};
Badge.defaultProps = {
icon: <PersonIcon />,
};
export const GroupBadge = () => (
<Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
);
export const AutomatedBadge = () => (
<Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
);

22
app/javascript/flavours/glitch/features/account/components/header.jsx
View File

@ -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(
<div key='bot-badge' className='account-role bot'>
<Icon id='cogs' /> { ' ' }
<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
</div>
);
badges.push(<AutomatedBadge key='bot-badge' />);
} else if (account.get('group')) {
badges.push(
<div key='group-badge' className='account-role group'>
<Icon id='users' /> { ' ' }
<FormattedMessage id='account.badges.group' defaultMessage='Group' />
</div>
);
badges.push(<GroupBadge key='group-badge' />);
}
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>
);
badges.push(<Badge key={`role-badge-${role.get('id')}`} label={<span>{role.get('name')}</span>} domain={domain} />);
});
return (

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

@ -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;
}
}