From 407287573c9c602c5490224c43639b39edf7d48a Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 15 Mar 2024 14:08:38 +0100 Subject: [PATCH] Add domain information to profiles in web UI (#29602) Co-authored-by: Claire --- .../account/components/domain_pill.jsx | 86 ++++++++++++ .../features/account/components/header.jsx | 15 ++- app/javascript/mastodon/locales/en.json | 13 ++ .../material-icons/400-24px/badge-fill.svg | 1 + .../material-icons/400-24px/badge.svg | 1 + .../material-icons/400-24px/globe-fill.svg | 1 + .../material-icons/400-24px/globe.svg | 1 + .../material-icons/400-24px/star-fill.svg | 2 +- .../material-icons/400-24px/star.svg | 2 +- .../styles/mastodon/components.scss | 127 +++++++++++++++++- 10 files changed, 235 insertions(+), 14 deletions(-) create mode 100644 app/javascript/mastodon/features/account/components/domain_pill.jsx create mode 100644 app/javascript/material-icons/400-24px/badge-fill.svg create mode 100644 app/javascript/material-icons/400-24px/badge.svg create mode 100644 app/javascript/material-icons/400-24px/globe-fill.svg create mode 100644 app/javascript/material-icons/400-24px/globe.svg diff --git a/app/javascript/mastodon/features/account/components/domain_pill.jsx b/app/javascript/mastodon/features/account/components/domain_pill.jsx new file mode 100644 index 000000000..0dadb947f --- /dev/null +++ b/app/javascript/mastodon/features/account/components/domain_pill.jsx @@ -0,0 +1,86 @@ +import PropTypes from 'prop-types'; +import { useState, useRef, useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import classNames from 'classnames'; + +import Overlay from 'react-overlays/Overlay'; + + + +import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; +import BadgeIcon from '@/material-icons/400-24px/badge.svg?react'; +import GlobeIcon from '@/material-icons/400-24px/globe.svg?react'; +import { Icon } from 'mastodon/components/icon'; + +export const DomainPill = ({ domain, username, isSelf }) => { + const [open, setOpen] = useState(false); + const [expanded, setExpanded] = useState(false); + const triggerRef = useRef(null); + + const handleClick = useCallback(() => { + setOpen(!open); + }, [open, setOpen]); + + const handleExpandClick = useCallback(() => { + setExpanded(!expanded); + }, [expanded, setExpanded]); + + return ( + <> + + + + {({ props }) => ( +
+
+
+

+
+ +
+
{isSelf ? : }
+
@{username}@{domain}
+
+ +
+
+
+ +
+
+

{isSelf ? : }

+
+
+ +
+
+ +
+
+

{isSelf ? : }

+
+
+
+ +

{isSelf ? }} /> : }} />}

+ + {expanded && ( + <> +

+

+ + )} +
+ )} + + + ); +}; + +DomainPill.propTypes = { + username: PropTypes.string.isRequired, + domain: PropTypes.string.isRequired, + isSelf: PropTypes.bool, +}; diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index c6295d7c4..ecb1108de 100644 --- a/app/javascript/mastodon/features/account/components/header.jsx +++ b/app/javascript/mastodon/features/account/components/header.jsx @@ -25,13 +25,15 @@ import { IconButton } from 'mastodon/components/icon_button'; import { LoadingIndicator } from 'mastodon/components/loading_indicator'; import { ShortNumber } from 'mastodon/components/short_number'; import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container'; -import { autoPlayGif, me, domain } from 'mastodon/initial_state'; +import { autoPlayGif, me, domain as localDomain } from 'mastodon/initial_state'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; import AccountNoteContainer from '../containers/account_note_container'; import FollowRequestNoteContainer from '../containers/follow_request_note_container'; +import { DomainPill } from './domain_pill'; + const messages = defineMessages({ unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, follow: { id: 'account.follow', defaultMessage: 'Follow' }, @@ -78,7 +80,7 @@ const messages = defineMessages({ const titleFromAccount = account => { const displayName = account.get('display_name'); - const acct = account.get('acct') === account.get('username') ? `${account.get('username')}@${domain}` : account.get('acct'); + const acct = account.get('acct') === account.get('username') ? `${account.get('username')}@${localDomain}` : account.get('acct'); const prefix = displayName.trim().length === 0 ? account.get('username') : displayName; return `${prefix} (@${acct})`; @@ -252,7 +254,7 @@ class Header extends ImmutablePureComponent { } render () { - const { account, hidden, intl, domain } = this.props; + const { account, hidden, intl } = this.props; const { signedIn, permissions } = this.context.identity; if (!account) { @@ -393,7 +395,8 @@ class Header extends ImmutablePureComponent { const displayNameHtml = { __html: account.get('display_name_html') }; const fields = account.get('fields'); const isLocal = account.get('acct').indexOf('@') === -1; - const acct = isLocal && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); + const username = account.get('acct').split('@')[0]; + const domain = isLocal ? localDomain : account.get('acct').split('@')[1]; const isIndexable = !account.get('noindex'); const badges = []; @@ -438,7 +441,9 @@ class Header extends ImmutablePureComponent {

- @{acct} {lockedIcon} + @{username}@{domain} + + {lockedIcon}

diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 8a66695f3..e05cf8c4c 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -205,6 +205,19 @@ "dismissable_banner.explore_statuses": "These are posts from across the social web that are gaining traction today. Newer posts with more boosts and favorites are ranked higher.", "dismissable_banner.explore_tags": "These are hashtags that are gaining traction on the social web today. Hashtags that are used by more different people are ranked higher.", "dismissable_banner.public_timeline": "These are the most recent public posts from people on the social web that people on {domain} follow.", + "domain_pill.activitypub_lets_connect": "It lets you connect and interact with people not just on Mastodon, but across different social apps too.", + "domain_pill.activitypub_like_language": "ActivityPub is like the language Mastodon speaks with other social networks.", + "domain_pill.server": "Server", + "domain_pill.their_handle": "Their handle:", + "domain_pill.their_server": "Their digital home, where all of their posts live.", + "domain_pill.their_username": "Their unique identifier on their server. It’s possible to find users with the same username on different servers.", + "domain_pill.username": "Username", + "domain_pill.whats_in_a_handle": "What's in a handle?", + "domain_pill.who_they_are": "Since handles say who someone is and where they are, you can interact with people across the social web of .", + "domain_pill.who_you_are": "Because your handle says who you are and where you are, people can interact with you across the social web of .", + "domain_pill.your_handle": "Your handle:", + "domain_pill.your_server": "Your digital home, where all of your posts live. Don’t like this one? Transfer servers at any time and bring your followers, too.", + "domain_pill.your_username": "Your unique identifier on this server. It’s possible to find users with the same username on different servers.", "embed.instructions": "Embed this post on your website by copying the code below.", "embed.preview": "Here is what it will look like:", "emoji_button.activity": "Activity", diff --git a/app/javascript/material-icons/400-24px/badge-fill.svg b/app/javascript/material-icons/400-24px/badge-fill.svg new file mode 100644 index 000000000..2f7175b7f --- /dev/null +++ b/app/javascript/material-icons/400-24px/badge-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/badge.svg b/app/javascript/material-icons/400-24px/badge.svg new file mode 100644 index 000000000..d413363a4 --- /dev/null +++ b/app/javascript/material-icons/400-24px/badge.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/globe-fill.svg b/app/javascript/material-icons/400-24px/globe-fill.svg new file mode 100644 index 000000000..c931f53c7 --- /dev/null +++ b/app/javascript/material-icons/400-24px/globe-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/globe.svg b/app/javascript/material-icons/400-24px/globe.svg new file mode 100644 index 000000000..c931f53c7 --- /dev/null +++ b/app/javascript/material-icons/400-24px/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/star-fill.svg b/app/javascript/material-icons/400-24px/star-fill.svg index cb2231e63..84e8230ab 100644 --- a/app/javascript/material-icons/400-24px/star-fill.svg +++ b/app/javascript/material-icons/400-24px/star-fill.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/javascript/material-icons/400-24px/star.svg b/app/javascript/material-icons/400-24px/star.svg index 1736e085d..6a72ecc22 100644 --- a/app/javascript/material-icons/400-24px/star.svg +++ b/app/javascript/material-icons/400-24px/star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 398babb25..8e0859038 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1792,6 +1792,118 @@ body > [data-popper-placement] { } } + &__domain-pill { + display: inline-flex; + background: rgba($highlight-text-color, 0.2); + border-radius: 4px; + border: 0; + color: $highlight-text-color; + font-weight: 500; + font-size: 12px; + line-height: 16px; + padding: 4px 8px; + + &.active { + color: $white; + background: $ui-highlight-color; + } + + &__popout { + background: var(--dropdown-background-color); + backdrop-filter: var(--background-filter); + border: 1px solid var(--dropdown-border-color); + box-shadow: var(--dropdown-shadow); + max-width: 320px; + padding: 16px; + border-radius: 8px; + display: flex; + flex-direction: column; + gap: 24px; + font-size: 14px; + line-height: 20px; + color: $darker-text-color; + + .link-button { + display: inline; + font-size: inherit; + line-height: inherit; + } + + &__header { + display: flex; + align-items: center; + gap: 12px; + + &__icon { + width: 40px; + height: 40px; + background: $ui-highlight-color; + color: $white; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + flex-shrink: 0; + } + + h3 { + font-size: 17px; + line-height: 22px; + color: $primary-text-color; + } + } + + &__handle { + border: 2px dashed $highlight-text-color; + background: rgba($highlight-text-color, 0.1); + padding: 12px 8px; + color: $highlight-text-color; + border-radius: 4px; + + &__label { + font-size: 11px; + line-height: 16px; + font-weight: 500; + } + + &__handle { + user-select: all; + } + } + + &__parts { + display: flex; + flex-direction: column; + gap: 8px; + font-size: 12px; + line-height: 16px; + + & > div { + display: flex; + align-items: flex-start; + gap: 12px; + } + + &__icon { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: $highlight-text-color; + } + + h6 { + font-size: 14px; + line-height: 20px; + font-weight: 500; + color: $primary-text-color; + } + } + } + } + &__note { font-size: 14px; font-weight: 400; @@ -7544,14 +7656,17 @@ noscript { font-size: 17px; line-height: 22px; color: $primary-text-color; - font-weight: 700; + font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; small { - display: block; - font-size: 15px; + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + line-height: 20px; color: $darker-text-color; font-weight: 400; overflow: hidden; @@ -7562,10 +7677,8 @@ noscript { } .icon-lock { - height: 16px; - width: 16px; - position: relative; - top: 3px; + height: 18px; + width: 18px; } } }