Merge branch 'master' into new-flags

client/coral-admin/src/components/CountBadge.css

@@ -0,0 +1,16 @@
+.count {
+  display: inline-block;
+  background: #616161;
+  margin: 2px;
+  vertical-align: middle;
+  padding: 1px 5px;
+  border-radius: 2px;
+  margin-left: 5px;
+  line-height: 18px;
+  box-sizing: border-box;
+  height: 18px;
+  right: 0;
+  margin-top: 0px;
+  font-size: 12px;
+  color: white;
+}

client/coral-admin/src/components/CountBadge.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CountBadge.css';
+
+import t from 'coral-framework/services/i18n';
+
+const CountBadge = ({count}) => {
+  let number = count;
+
+  // shorten large counts to abbreviations
+  if (number / 1e9 > 1) {
+    number = `${(number / 1e9).toFixed(1)}${t('modqueue.billion')}`;
+  } else if (number / 1e6 > 1) {
+    number = `${(number / 1e6).toFixed(1)}${t('modqueue.million')}`;
+  } else if (number / 1e3 > 1) {
+    number = `${(number / 1e3).toFixed(1)}${t('modqueue.thousand')}`;
+  }
+
+  return (
+    <span className={styles.count}>{number}</span>
+  );
+};
+
+CountBadge.propTypes = {
+  count: PropTypes.number.isRequired
+};
+
+export default CountBadge;