hamptonmoore
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Display replies count in web UI 

Port 4df9cabb22 to glitch-soc
signup-info-prompt
Thibaut Girka 2018-08-20 11:56:34 +02:00 committed by ThibG
parent 801919fc9b
commit 87ad942d76
2 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/flavours/glitch/components/status_action_bar.js
View File

@ -33,6 +33,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 {
@ -190,7 +200,10 @@ 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={reblogDisabled} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(reblogMessage)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(reblogMessage)} 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}

20
app/javascript/flavours/glitch/styles/components/status.scss
View File

@ -417,15 +417,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;
} }