diff --git a/app/javascript/flavours/glitch/features/account/components/domain_pill.jsx b/app/javascript/flavours/glitch/features/account/components/domain_pill.jsx new file mode 100644 index 0000000000..9cd028fa68 --- /dev/null +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index c693e85f41..b97de5aeab 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -23,7 +23,7 @@ import { Icon } from 'flavours/glitch/components/icon'; import { IconButton } from 'flavours/glitch/components/icon_button'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container'; -import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state'; +import { autoPlayGif, me, domain as localDomain } from 'flavours/glitch/initial_state'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions'; import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/utils/backend_links'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -31,6 +31,8 @@ import { WithRouterPropTypes } from 'flavours/glitch/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' }, @@ -75,7 +77,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})`; @@ -167,7 +169,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) { @@ -314,7 +316,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 = []; @@ -359,7 +362,9 @@ class Header extends ImmutablePureComponent {

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

diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 6c4b6649b2..147a88cf14 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -2004,6 +2004,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; @@ -8126,14 +8238,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; @@ -8144,10 +8259,8 @@ noscript { } .icon-lock { - height: 16px; - width: 16px; - position: relative; - top: 3px; + height: 18px; + width: 18px; } } }