diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index cd9a2ac67..70aada0e9 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -33,6 +33,16 @@ const messages = defineMessages({
embed: { id: 'status.embed', defaultMessage: 'Embed' },
});
+const obfuscatedCount = count => {
+ if (count < 0) {
+ return 0;
+ } else if (count <= 1) {
+ return count;
+ } else {
+ return '1+';
+ }
+};
+
@injectIntl
export default class StatusActionBar extends ImmutablePureComponent {
@@ -190,7 +200,10 @@ export default class StatusActionBar extends ImmutablePureComponent {
return (
-
+
+
+ {obfuscatedCount(status.get('replies_count'))}
+
{shareButton}
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index cd17bb4fa..fbc26ed2a 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -417,15 +417,31 @@
align-items: center;
display: flex;
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 {
- float: left;
margin-right: 18px;
}
.status__action-bar-dropdown {
- float: left;
height: 23.15px;
width: 23.15px;
}