From a368ddfee881856b52d8ca7e0d9e979d7edb40ea Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 14 Jul 2021 16:13:53 -0500 Subject: [PATCH] UserIndex: display dates on accounts in a more compact way --- .../__snapshots__/display_name-test.js.snap | 22 +++++++----- app/soapbox/components/account.js | 4 +-- app/soapbox/components/display_name.js | 36 ++++++++++++++----- .../features/ui/components/user_panel.js | 3 +- app/styles/accounts.scss | 16 +++++---- app/styles/components/detailed-status.scss | 3 +- app/styles/components/display-name.scss | 4 +++ app/styles/ui.scss | 1 + 8 files changed, 58 insertions(+), 31 deletions(-) diff --git a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap index 6d04016b5..5be2141d3 100644 --- a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap +++ b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap @@ -10,16 +10,20 @@ exports[` renders display name + account name 1`] = ` onMouseEnter={[Function]} onMouseLeave={[Function]} > - - Foo

", + + + Foo

", + } } - } - /> - + /> + +
- + {withRelationship ? (<> @@ -156,8 +156,6 @@ class Account extends ImmutablePureComponent { ) : withDate && joinedAt} - - {(withDate && withRelationship) && joinedAt} ); } diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index bf88a2168..94d8d99a5 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -6,6 +6,8 @@ import VerificationBadge from './verification_badge'; import { getAcct } from '../utils/accounts'; import { List as ImmutableList } from 'immutable'; import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper'; +import Icon from './icon'; +import RelativeTimestamp from './relative_timestamp'; import { displayFqn } from 'soapbox/utils/state'; const mapStateToProps = state => { @@ -22,31 +24,47 @@ class DisplayName extends React.PureComponent { displayFqn: PropTypes.bool, others: ImmutablePropTypes.list, children: PropTypes.node, + withDate: PropTypes.bool, }; + static defaultProps = { + withDate: false, + } + render() { - const { account, displayFqn, others, children } = this.props; + const { account, displayFqn, others, children, withDate } = this.props; let displayName, suffix; const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); + const createdAt = account.get('created_at'); + + const joinedAt = createdAt ? ( +
+ + +
+ ) : null; + if (others && others.size > 1) { - displayName = others.take(2).map(a => [ - - - , - verified && , - ]).reduce((prev, cur) => [prev, ', ', cur]); + displayName = others.take(2).map(a => ( + + + {verified && } + {withDate && joinedAt} + + )).reduce((prev, cur) => [prev, ', ', cur]); if (others.size - 2 > 0) { suffix = `+${others.size - 2}`; } } else { displayName = ( - <> + {verified && } - + {withDate && joinedAt} + ); suffix = @{getAcct(account, displayFqn)}; } diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js index ad50966c7..33c707d96 100644 --- a/app/soapbox/features/ui/components/user_panel.js +++ b/app/soapbox/features/ui/components/user_panel.js @@ -29,13 +29,14 @@ class UserPanel extends ImmutablePureComponent { const displayNameHtml = { __html: account.get('display_name_html') }; const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct'); const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified'); + const header = account.get('header'); return (
- + {header && }
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss index 7e7e2680d..ad2190be5 100644 --- a/app/styles/accounts.scss +++ b/app/styles/accounts.scss @@ -201,6 +201,10 @@ overflow: hidden; text-decoration: none; font-size: 14px; + + .display-name__name { + display: flex; + } } } @@ -502,6 +506,7 @@ a .account__avatar { .relationship-tag { color: var(--primary-text-color); margin-bottom: 4px; + margin-left: 4px; display: block; vertical-align: top; background-color: var(--background-color); @@ -511,6 +516,7 @@ a .account__avatar { padding: 4px; border-radius: 4px; opacity: 0.7; + white-space: nowrap; &:hover { opacity: 1; @@ -518,18 +524,14 @@ a .account__avatar { } .account__joined-at { - padding: 3px 2px 0 5px; + padding-left: 3px; font-size: 14px; display: flex; white-space: nowrap; + flex-shrink: 0; + color: var(--primary-text-color--faint); i.fa-calendar { padding-right: 5px; } } - -.account--with-date.account--with-relationship { - .account__joined-at { - padding-left: 48px; - } -} diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss index 9aff62e34..985f1a079 100644 --- a/app/styles/components/detailed-status.scss +++ b/app/styles/components/detailed-status.scss @@ -114,7 +114,6 @@ strong, span { - display: inline-block; text-overflow: ellipsis; overflow: hidden; } @@ -130,7 +129,7 @@ .display-name__account { display: block; - margin-top: -10px; + margin-top: -5px; } } diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss index 0dd3e1e65..b5bed6ac0 100644 --- a/app/styles/components/display-name.scss +++ b/app/styles/components/display-name.scss @@ -42,6 +42,10 @@ a.account__display-name { text-overflow: ellipsis; white-space: nowrap; position: relative; + + bdi { + min-width: 0; + } } .display-name__html { diff --git a/app/styles/ui.scss b/app/styles/ui.scss index df6700752..5a6b3e554 100644 --- a/app/styles/ui.scss +++ b/app/styles/ui.scss @@ -675,6 +675,7 @@ position: relative; width: 15px; height: 15px; + flex-shrink: 0; &::before { display: block;