Skip to content

Commit

Permalink
Remove obfuscation of reply count in web UI (mastodon#26768)
Browse files Browse the repository at this point in the history
  • Loading branch information
Gargron authored Sep 5, 2023
1 parent 5d20733 commit 9d290c2
Show file tree
Hide file tree
Showing 4 changed files with 6 additions and 27 deletions.
25 changes: 3 additions & 22 deletions app/javascript/mastodon/components/animated_number.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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 = [
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions app/javascript/mastodon/components/icon_button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ interface Props {
overlay: boolean;
tabIndex: number;
counter?: number;
obfuscateCount?: boolean;
href?: string;
ariaHidden: boolean;
}
Expand Down Expand Up @@ -105,7 +104,6 @@ export class IconButton extends PureComponent<Props, States> {
tabIndex,
title,
counter,
obfuscateCount,
href,
ariaHidden,
} = this.props;
Expand All @@ -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>
)}
</>
Expand Down
2 changes: 1 addition & 1 deletion app/javascript/mastodon/components/status_action_bar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')}`} />}
Expand Down

0 comments on commit 9d290c2

Please sign in to comment.