Merge pull request #7580 from RocketChat/improvements/better-alert-nu…

…mber [NEW] Show different shape for alert numbers when have mentions
RocketChat · Jul 27, 2017 · ea125c2 · ea125c2
2 parents a8a49ad + 429e153
commit ea125c2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/rocketchat-theme/server/colors.less b/packages/rocketchat-theme/server/colors.less
@@ -666,6 +666,10 @@ a:hover {
 	}
 
 	.unread {
+		color: @success-color;
+	}
+
+	.unread.unread-mention {
 		background-color: @success-color;
 		color: contrast(@success-color, #000000, #ffffff, 50%);
 	}

diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.html b/packages/rocketchat-ui-sidenav/client/chatRoomItem.html
@@ -2,7 +2,7 @@
 	<li class="link-room-{{rid}} background-transparent-darker-hover {{active}} {{#if unread}}has-unread{{/if}} {{#if alert}}has-alert{{/if}}">
 		<a class="open-room" href="{{route}}" title="{{name}}">
 			{{#if unread}}
-				<span class="unread">{{unread}}</span>
+				<span class="{{unreadClass}}">{{unread}}</span>
 			{{/if}}
 			<i class="{{roomIcon}} {{userStatus}}" aria-label=""></i>
 			<span class='name {{archived}}'>{{name}}</span>

diff --git a/packages/rocketchat-ui-sidenav/client/chatRoomItem.js b/packages/rocketchat-ui-sidenav/client/chatRoomItem.js
@@ -14,6 +14,14 @@ Template.chatRoomItem.helpers({
 		}
 	},
 
+	unreadClass() {
+		if (Match.test(this.userMentions, Number) && this.userMentions > 0) {
+			return 'unread unread-mention';
+		} else {
+			return 'unread';
+		}
+	},
+
 	userStatus() {
 		const userStatus = RocketChat.roomTypes.getUserStatus(this.t, this.rid);
 		return `status-${ userStatus || 'offline' }`;