Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change design of role badges in web UI #26281

Merged
merged 2 commits into from
Aug 2, 2023
Merged

Change design of role badges in web UI #26281

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a11a59
Change design of role badges in web UI
Gargron Aug 1, 2023
3c35736
Add `@material-design-icons/svg` dependency and include icons from th…
ClearlyClaire Aug 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
44 changes: 44 additions & 0 deletions app/javascript/mastodon/components/badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import PropTypes from 'prop-types';

import { FormattedMessage } from 'react-intl';

// Material Symbols, Apache license
const SmartToyIcon = () => (
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='48' viewBox='0 -960 960 960' width='48'><path d='M147-376q-45 0-76-31.208Q40-438.417 40-483t31.208-75.792Q102.417-590 147-590v-123q0-24 18-42t42-18h166q0-45 31.208-76 31.209-31 75.792-31t75.792 31.208Q587-817.583 587-773h166q24 0 42 18t18 42v123q45 0 76 31.208 31 31.209 31 75.792t-31.208 75.792Q857.583-376 813-376v196q0 24-18 42t-42 18H207q-24 0-42-18t-18-42v-196Zm196.235-100Q360-476 371.5-487.735q11.5-11.736 11.5-28.5Q383-533 371.265-544.5q-11.736-11.5-28.5-11.5Q326-556 314.5-544.265q-11.5 11.736-11.5 28.5Q303-499 314.735-487.5q11.736 11.5 28.5 11.5Zm274 0Q634-476 645.5-487.735q11.5-11.736 11.5-28.5Q657-533 645.265-544.5q-11.736-11.5-28.5-11.5Q600-556 588.5-544.265q-11.5 11.736-11.5 28.5Q577-499 588.735-487.5q11.736 11.5 28.5 11.5ZM312-285h336v-60H312v60ZM207-180h546v-533H207v533Zm273-267Z' /></svg>
);

// Material Symbols, Apache license
const GroupsIcon = () => (
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='48' viewBox='0 -960 960 960' width='48'><path d='M0-240v-53q0-38.567 41.5-62.784Q83-380 150.376-380q12.165 0 23.395.5Q185-379 196-377.348q-8 17.348-12 35.165T180-305v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5 67.5 0 108.75 23.768T960-293v53H780Zm-480-60h360v-6q0-37-50.5-60.5T480-390q-79 0-129.5 23.5T300-305v5ZM149.567-410Q121-410 100.5-430.562 80-451.125 80-480q0-29 20.562-49.5Q121.125-550 150-550q29 0 49.5 20.5t20.5 49.933Q220-451 199.5-430.5T149.567-410Zm660 0Q781-410 760.5-430.562 740-451.125 740-480q0-29 20.562-49.5Q781.125-550 810-550q29 0 49.5 20.5t20.5 49.933Q880-451 859.5-430.5T809.567-410ZM480-480q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-60Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5ZM480-300Zm0-300Z' /></svg>
);

// Material Symbols, Apache license
const PersonIcon = () => (
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' height='48' viewBox='0 -960 960 960' width='48'><path d='M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z' /></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 changes: 4 additions & 18 deletions app/javascript/mastodon/features/account/components/header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';

import { Avatar } from 'mastodon/components/avatar';
import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
import Button from 'mastodon/components/button';
import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
import { Icon } from 'mastodon/components/icon';
Expand Down Expand Up @@ -373,28 +374,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 (
Expand Down
24 changes: 21 additions & 3 deletions app/javascript/styles/mastodon/accounts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,6 @@
}
}

.account-role,
.information-badge,
.simple_form .recommended,
.simple_form .not_recommended {
Expand All @@ -212,10 +211,29 @@
}

.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;

svg {
width: auto;
height: 15px;
opacity: 0.85;
}

.fa {
color: var(--user-role-accent, $highlight-text-color);
&__domain {
font-weight: 400;
opacity: 0.75;
letter-spacing: 0;
}
}

Expand Down