Change design of metadata underneath posts in web UI (#29585)

2024-03-14 10:18:24 +01:00 · 2024-03-14 10:18:24 +01:00 · 4991198b70
parent f9100743ec
commit 4991198b70
4 changed files with 65 additions and 60 deletions
--- a/app/javascript/mastodon/components/edited_timestamp/index.jsx
+++ b/app/javascript/mastodon/components/edited_timestamp/index.jsx
@ -5,9 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';

 import { connect } from 'react-redux';

-import ArrowDropDownIcon from '@/material-icons/400-24px/arrow_drop_down.svg?react';
 import { openModal } from 'mastodon/actions/modal';
-import { Icon }  from 'mastodon/components/icon';
 import InlineAccount from 'mastodon/components/inline_account';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';

@ -67,7 +65,7 @@ class EditedTimestamp extends PureComponent {
    return (
      <DropdownMenu statusId={statusId} renderItem={this.renderItem} scrollable renderHeader={this.renderHeader} onItemClick={this.handleItemClick}>
        <button className='dropdown-menu__text-button'>
-          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) }} /> <Icon id='caret-down' icon={ArrowDropDownIcon} />
+          <FormattedMessage id='status.edited' defaultMessage='Edited {date}' values={{ date: <span className='animated-number'>{intl.formatDate(timestamp, { month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' })}</span> }} />
        </button>
      </DropdownMenu>
    );
--- a/app/javascript/mastodon/features/status/components/detailed_status.jsx
+++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx
@ -9,8 +9,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';

 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
 import { getHashtagBarForStatus } from 'mastodon/components/hashtag_bar';
@ -143,10 +141,7 @@ class DetailedStatus extends ImmutablePureComponent {
    let media           = '';
    let applicationLink = '';
    let reblogLink = '';
-    const reblogIcon = 'retweet';
-    const reblogIconComponent = RepeatIcon;
    let favouriteLink = '';
-    let edited = '';

    if (this.props.measureHeight) {
      outerStyle.height = `${this.state.height}px`;
@ -218,68 +213,53 @@ class DetailedStatus extends ImmutablePureComponent {
    }

    if (status.get('application')) {
-      applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
+      applicationLink = <>·<a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
    }

-    const visibilityLink = <> · <VisibilityIcon visibility={status.get('visibility')} /></>;
+    const visibilityLink = <>·<VisibilityIcon visibility={status.get('visibility')} /></>;

    if (['private', 'direct'].includes(status.get('visibility'))) {
      reblogLink = '';
    } else if (this.props.history) {
      reblogLink = (
-        <>
-          {' · '}
-          <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
-            <Icon id={reblogIcon} icon={reblogIconComponent} />
-            <span className='detailed-status__reblogs'>
-              <AnimatedNumber value={status.get('reblogs_count')} />
-            </span>
-          </Link>
-        </>
+        <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/reblogs`} className='detailed-status__link'>
+          <span className='detailed-status__reblogs'>
+            <AnimatedNumber value={status.get('reblogs_count')} />
+          </span>
+          <FormattedMessage id='status.reblogs' defaultMessage='{count, plural, one {boost} other {boosts}}' values={{ count: status.get('reblogs_count') }} />
+        </Link>
      );
    } else {
      reblogLink = (
-        <>
-          {' · '}
-          <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
-            <Icon id={reblogIcon} icon={reblogIconComponent} />
-            <span className='detailed-status__reblogs'>
-              <AnimatedNumber value={status.get('reblogs_count')} />
-            </span>
-          </a>
-        </>
+        <a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
+          <span className='detailed-status__reblogs'>
+            <AnimatedNumber value={status.get('reblogs_count')} />
+          </span>
+          <FormattedMessage id='status.reblogs' defaultMessage='{count, plural, one {boost} other {boosts}}' values={{ count: status.get('reblogs_count') }} />
+        </a>
      );
    }

    if (this.props.history) {
      favouriteLink = (
        <Link to={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}/favourites`} className='detailed-status__link'>
-          <Icon id='star' icon={StarIcon} />
          <span className='detailed-status__favorites'>
            <AnimatedNumber value={status.get('favourites_count')} />
          </span>
+          <FormattedMessage id='status.favourites' defaultMessage='{count, plural, one {favorite} other {favorites}}' values={{ count: status.get('favourites_count') }} />
        </Link>
      );
    } else {
      favouriteLink = (
        <a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
-          <Icon id='star' icon={StarIcon} />
          <span className='detailed-status__favorites'>
            <AnimatedNumber value={status.get('favourites_count')} />
          </span>
+          <FormattedMessage id='status.favourites' defaultMessage='{count, plural, one {favorite} other {favorites}}' values={{ count: status.get('favourites_count') }} />
        </a>
      );
    }

-    if (status.get('edited_at')) {
-      edited = (
-        <>
-          {' · '}
-          <EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} />
-        </>
-      );
-    }
-
    const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
    const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;

@ -310,9 +290,23 @@ class DetailedStatus extends ImmutablePureComponent {
          {expanded && hashtagBar}

          <div className='detailed-status__meta'>
-            <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
-              <FormattedDate value={new Date(status.get('created_at'))} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
-            </a>{edited}{visibilityLink}{applicationLink}{reblogLink} · {favouriteLink}
+            <div className='detailed-status__meta__line'>
+              <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
+                <FormattedDate value={new Date(status.get('created_at'))} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
+              </a>
+
+              {visibilityLink}
+
+              {applicationLink}
+            </div>
+
+            {status.get('edited_at') && <div className='detailed-status__meta__line'><EditedTimestamp statusId={status.get('id')} timestamp={status.get('edited_at')} /></div>}
+
+            <div className='detailed-status__meta__line'>
+              {reblogLink}
+              ·
+              {favouriteLink}
+            </div>
          </div>
        </div>
      </div>
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@ -662,10 +662,11 @@
  "status.direct": "Privately mention @{name}",
  "status.direct_indicator": "Private mention",
  "status.edit": "Edit",
-  "status.edited": "Edited {date}",
+  "status.edited": "Last edited {date}",
  "status.edited_x_times": "Edited {count, plural, one {{count} time} other {{count} times}}",
  "status.embed": "Embed",
  "status.favourite": "Favorite",
+  "status.favourites": "{count, plural, one {favorite} other {favorites}}",
  "status.filter": "Filter this post",
  "status.filtered": "Filtered",
  "status.hide": "Hide post",
@ -686,6 +687,7 @@
  "status.reblog": "Boost",
  "status.reblog_private": "Boost with original visibility",
  "status.reblogged_by": "{name} boosted",
+  "status.reblogs": "{count, plural, one {boost} other {boosts}}",
  "status.reblogs.empty": "No one has boosted this post yet. When someone does, they will show up here.",
  "status.redraft": "Delete & re-draft",
  "status.remove_bookmark": "Remove bookmark",
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@ -1659,15 +1659,35 @@ body > [data-popper-placement] {
 }

 .detailed-status__meta {
-  margin-top: 16px;
+  margin-top: 24px;
  color: $dark-text-color;
  font-size: 14px;
  line-height: 18px;

+  &__line {
+    border-bottom: 1px solid var(--background-border-color);
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+
  .icon {
-    width: 15px;
-    height: 15px;
-    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+  }
+
+  .animated-number {
+    color: $secondary-text-color;
  }
 }

@ -1711,19 +1731,6 @@ body > [data-popper-placement] {
  color: inherit;
  text-decoration: none;
  gap: 6px;
-  position: relative;
-  top: 0.145em;
-
-  .icon {
-    top: 0;
-  }
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 18px;
 }

 .domain {
@ -2292,6 +2299,10 @@ a.account__display-name {
      outline: 1px dotted;
    }

+    &:hover {
+      text-decoration: underline;
+    }
+
    .icon {
      width: 15px;
      height: 15px;