From 0ab6ab639e289a5d48d4fb7d481d4bf7f84d6079 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 6 Feb 2019 11:21:50 +0000
Subject: [PATCH] render badge on custom tag in LLP

---
 res/css/structures/_TagPanel.scss             | 20 +++++++++++++++++++
 .../structures/CustomRoomTagPanel.js          | 11 ++++++++++
 2 files changed, 31 insertions(+)

diff --git a/res/css/structures/_TagPanel.scss b/res/css/structures/_TagPanel.scss
index 559bdbcf5f..d130ed3bae 100644
--- a/res/css/structures/_TagPanel.scss
+++ b/res/css/structures/_TagPanel.scss
@@ -123,3 +123,23 @@ limitations under the License.
     padding-left: 4px;
     padding-right: 4px;
 }
+
+.mx_TagTile_avatar {
+    position: relative;
+}
+
+.mx_TagTile_badge {
+    position: absolute;
+    right: -4px;
+    top: -2px;
+    border-radius: 8px;
+    color: $accent-fg-color;
+    font-weight: 600;
+    font-size: 14px;
+    padding: 0 5px;
+    background-color: $roomtile-name-color;
+}
+
+.mx_TagTile_badgeHighlight {
+    background-color: $warning-color;
+}
diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js
index 9b342591ba..a957c9c4ca 100644
--- a/src/components/structures/CustomRoomTagPanel.js
+++ b/src/components/structures/CustomRoomTagPanel.js
@@ -20,6 +20,7 @@ import AutoHideScrollbar from './AutoHideScrollbar';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import classNames from 'classnames';
+import * as FormattingUtils from '../../utils/FormattingUtils';
 
 
 const CustomRoomTagPanel = React.createClass({
@@ -104,6 +105,15 @@ class CustomRoomTagTile extends React.Component {
             CustomRoomTagPanel_tileSelected: tag.selected,
         });
         const name = tag.name;
+        const badge = tag.badge;
+        let badgeElement;
+        if (badge) {
+            const badgeClasses = classNames({
+                "mx_TagTile_badge": true,
+                "mx_TagTile_badgeHighlight": badge.highlight,
+            });
+            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
+        }
 
         const tip = (this.state.hover ?
             <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
@@ -116,6 +126,7 @@ class CustomRoomTagTile extends React.Component {
                             width={avatarHeight}
                             height={avatarHeight}
                         />
+                        { badgeElement }
                         { tip }
                     </div>
                 </AccessibleButton>);