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 = (
{FormattingUtils.formatCount(badge.count)}
); + } const tip = (this.state.hover ? : @@ -116,6 +126,7 @@ class CustomRoomTagTile extends React.Component { width={avatarHeight} height={avatarHeight} /> + { badgeElement } { tip } );