~cytrogen/masto-fe

9d290c23d2665a434c3f78eb5f6a6e2b71a722bd — Eugen Rochko 2 years ago 5d20733
Remove obfuscation of reply count in web UI (#26768)

M app/javascript/mastodon/components/animated_number.tsx => app/javascript/mastodon/components/animated_number.tsx +3 -22
@@ 6,21 6,10 @@ import { reduceMotion } from '../initial_state';

import { ShortNumber } from './short_number';

const obfuscatedCount = (count: number) => {
  if (count < 0) {
    return 0;
  } else if (count <= 1) {
    return count;
  } else {
    return '1+';
  }
};

interface Props {
  value: number;
  obfuscate?: boolean;
}
export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
export const AnimatedNumber: React.FC<Props> = ({ value }) => {
  const [previousValue, setPreviousValue] = useState(value);
  const [direction, setDirection] = useState<1 | -1>(1);



@@ 36,11 25,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
  );

  if (reduceMotion) {
    return obfuscate ? (
      <>{obfuscatedCount(value)}</>
    ) : (
      <ShortNumber value={value} />
    );
    return <ShortNumber value={value} />;
  }

  const styles = [


@@ 67,11 52,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
                transform: `translateY(${style.y * 100}%)`,
              }}
            >
              {obfuscate ? (
                obfuscatedCount(data as number)
              ) : (
                <ShortNumber value={data as number} />
              )}
              <ShortNumber value={data as number} />
            </span>
          ))}
        </span>

M app/javascript/mastodon/components/icon_button.tsx => app/javascript/mastodon/components/icon_button.tsx +1 -3
@@ 24,7 24,6 @@ interface Props {
  overlay: boolean;
  tabIndex: number;
  counter?: number;
  obfuscateCount?: boolean;
  href?: string;
  ariaHidden: boolean;
}


@@ 105,7 104,6 @@ export class IconButton extends PureComponent<Props, States> {
      tabIndex,
      title,
      counter,
      obfuscateCount,
      href,
      ariaHidden,
    } = this.props;


@@ 131,7 129,7 @@ export class IconButton extends PureComponent<Props, States> {
        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
        {typeof counter !== 'undefined' && (
          <span className='icon-button__counter'>
            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
            <AnimatedNumber value={counter} />
          </span>
        )}
      </>

M app/javascript/mastodon/components/status_action_bar.jsx => app/javascript/mastodon/components/status_action_bar.jsx +1 -1
@@ 362,7 362,7 @@ class StatusActionBar extends ImmutablePureComponent {

    return (
      <div className='status__action-bar'>
        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />

M app/javascript/mastodon/features/picture_in_picture/components/footer.jsx => app/javascript/mastodon/features/picture_in_picture/components/footer.jsx +1 -1
@@ 194,7 194,7 @@ class Footer extends ImmutablePureComponent {

    return (
      <div className='picture-in-picture__footer'>
        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
        {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} />}