Remove obfuscation of reply count in web UI (#26768)
parent
01e3a1f941
commit
2c5ba586ff
|
@ -6,21 +6,10 @@ import { reduceMotion } from '../initial_state';
|
||||||
|
|
||||||
import { ShortNumber } from './short_number';
|
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 {
|
interface Props {
|
||||||
value: number;
|
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 [previousValue, setPreviousValue] = useState(value);
|
||||||
const [direction, setDirection] = useState<1 | -1>(1);
|
const [direction, setDirection] = useState<1 | -1>(1);
|
||||||
|
|
||||||
|
@ -36,11 +25,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
if (reduceMotion) {
|
if (reduceMotion) {
|
||||||
return obfuscate ? (
|
return <ShortNumber value={value} />;
|
||||||
<>{obfuscatedCount(value)}</>
|
|
||||||
) : (
|
|
||||||
<ShortNumber value={value} />
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = [
|
const styles = [
|
||||||
|
@ -67,11 +52,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
|
||||||
transform: `translateY(${style.y * 100}%)`,
|
transform: `translateY(${style.y * 100}%)`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{obfuscate ? (
|
<ShortNumber value={data as number} />
|
||||||
obfuscatedCount(data as number)
|
|
||||||
) : (
|
|
||||||
<ShortNumber value={data as number} />
|
|
||||||
)}
|
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</span>
|
</span>
|
||||||
|
|
|
@ -24,7 +24,6 @@ interface Props {
|
||||||
overlay: boolean;
|
overlay: boolean;
|
||||||
tabIndex: number;
|
tabIndex: number;
|
||||||
counter?: number;
|
counter?: number;
|
||||||
obfuscateCount?: boolean;
|
|
||||||
href?: string;
|
href?: string;
|
||||||
ariaHidden: boolean;
|
ariaHidden: boolean;
|
||||||
}
|
}
|
||||||
|
@ -105,7 +104,6 @@ export class IconButton extends PureComponent<Props, States> {
|
||||||
tabIndex,
|
tabIndex,
|
||||||
title,
|
title,
|
||||||
counter,
|
counter,
|
||||||
obfuscateCount,
|
|
||||||
href,
|
href,
|
||||||
ariaHidden,
|
ariaHidden,
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
@ -131,7 +129,7 @@ export class IconButton extends PureComponent<Props, States> {
|
||||||
<Icon id={icon} fixedWidth aria-hidden='true' />{' '}
|
<Icon id={icon} fixedWidth aria-hidden='true' />{' '}
|
||||||
{typeof counter !== 'undefined' && (
|
{typeof counter !== 'undefined' && (
|
||||||
<span className='icon-button__counter'>
|
<span className='icon-button__counter'>
|
||||||
<AnimatedNumber value={counter} obfuscate={obfuscateCount} />
|
<AnimatedNumber value={counter} />
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -362,7 +362,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='status__action-bar'>
|
<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={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 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} />
|
<IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
||||||
|
|
|
@ -194,7 +194,7 @@ class Footer extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='picture-in-picture__footer'>
|
<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={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')} />
|
<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')}`} />}
|
{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')}`} />}
|
||||||
|
|
Loading…
Reference in New Issue