Limit unread message counter to "99+"

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/style.scss

@@ -96,11 +96,24 @@
 	height: 32px;
 }
 
-#app-navigation .app-navigation-entry-utils-counter span {
-	padding: 2px 5px;
-	border-radius: 10px;
-	background-color: $color-primary;
-	color: $color-primary-text;
+#app-navigation .app-navigation-entry-utils-counter {
+	overflow: hidden;
+	text-align: right;
+	font-size: 9pt;
+	line-height: 44px;
+	padding: 0 12px; /* Same padding as all li > a in the app-navigation */
+
+	&.highlighted {
+		padding-right: 0;
+		text-align: center;
+
+		span {
+			padding: 2px 5px;
+			border-radius: 10px;
+			background-color: $color-primary;
+			color: $color-primary-text;
+		}
+	}
 }
 
 .public-room {

js/views/roomlistview.js

@@ -37,7 +37,7 @@
 	var ITEM_TEMPLATE = '<a class="app-navigation-entry-link" href="#{{id}}" data-token="{{token}}"><div class="avatar" data-user="{{name}}" data-user-display-name="{{displayName}}"></div> {{displayName}}</a>'+
 						'<div class="app-navigation-entry-utils">'+
 							'<ul>'+
-								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter"><span>{{unreadMessages}}</span></li>{{/if}}'+
+								'{{#if unreadMessages}}<li class="app-navigation-entry-utils-counter highlighted"><span>{{numUnreadMessages}}</span></li>{{/if}}'+
 								'<li class="app-navigation-entry-utils-menu-button"><button></button></li>'+
 							'</ul>'+
 						'</div>'+
@@ -103,7 +103,8 @@
 		templateContext: function() {
 			return {
 				isDeletable: (this.model.get('participantType') === 1 || this.model.get('participantType') === 2) &&
-					(Object.keys(this.model.get('participants')).length > 1 || this.model.get('numGuests') > 0)
+					(Object.keys(this.model.get('participants')).length > 1 || this.model.get('numGuests') > 0),
+				numUnreadMessages: this.model.get('unreadMessages') > 99 ? '99+' : this.model.get('unreadMessages')
 			};
 		},
 		onRender: function() {