Display replies count in web UI (#8181)
parent
b0f4fe456b
commit
4df9cabb22
|
@ -32,6 +32,16 @@ const messages = defineMessages({
|
||||||
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
embed: { id: 'status.embed', defaultMessage: 'Embed' },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const obfuscatedCount = count => {
|
||||||
|
if (count < 0) {
|
||||||
|
return 0;
|
||||||
|
} else if (count <= 1) {
|
||||||
|
return count;
|
||||||
|
} else {
|
||||||
|
return '1+';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
@injectIntl
|
@injectIntl
|
||||||
export default class StatusActionBar extends ImmutablePureComponent {
|
export default class StatusActionBar extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
@ -194,7 +204,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='status__action-bar'>
|
<div className='status__action-bar'>
|
||||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
|
<div className='status__action-bar__counter'><IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /><span className='status__action-bar__counter__label' >{obfuscatedCount(status.get('replies_count'))}</span></div>
|
||||||
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
<IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
|
||||||
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||||
{shareButton}
|
{shareButton}
|
||||||
|
|
|
@ -921,15 +921,31 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
|
|
||||||
|
&__counter {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-right: 11px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.status__action-bar-button {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $action-button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__action-bar-button {
|
.status__action-bar-button {
|
||||||
float: left;
|
|
||||||
margin-right: 18px;
|
margin-right: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status__action-bar-dropdown {
|
.status__action-bar-dropdown {
|
||||||
float: left;
|
|
||||||
height: 23.15px;
|
height: 23.15px;
|
||||||
width: 23.15px;
|
width: 23.15px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue