(UI) add unread messages badge counter

Author: antoine92190

README.md

@@ -319,7 +319,9 @@ styles="{
     colorMessage: '#67717a',
     colorTimestamp: '#a2aeb8',
     colorStateOnline: '#4caf50',
-    colorStateOffline: '#ccc'
+    colorStateOffline: '#ccc',
+    backgroundCounterBadge: '#0696c7',
+    colorCounterBadge: '#fff'
   },
 
   emoji: {
@@ -362,6 +364,7 @@ rooms="[
   {
     roomId: 1,
     roomName: 'Room 1',
+    unreadCount: 4,
     lastMessage: {
       content: 'Last message received',
       sender_id: 1234,

src/ChatWindow/RoomsList.vue

@@ -57,19 +57,22 @@
 					</div>
 					<div
 						class="text-last"
-						:class="{ 'message-new': room.lastMessage.new }"
-						v-if="room.lastMessage"
+						:class="{ 'message-new': room.lastMessage && room.lastMessage.new }"
 					>
-						<span v-if="room.lastMessage.seen">
+						<span v-if="room.lastMessage && room.lastMessage.seen">
 							<svg-icon name="checkmark" class="icon-check" />
 						</span>
 						<format-message
+							v-if="room.lastMessage"
 							:content="getLastMessage(room)"
 							:deleted="!!room.lastMessage.deleted"
 							:formatLinks="false"
 							:textFormatting="textFormatting"
 							:singleLine="true"
 						></format-message>
+						<div v-if="room.unreadCount" class="room-badge">
+							{{ room.unreadCount }}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -297,7 +300,7 @@ input {
 	display: flex;
 	align-items: center;
 	font-size: 12px;
-	line-height: 17px;
+	line-height: 19px;
 	color: var(--chat-room-color-message);
 }
 
@@ -333,6 +336,21 @@ input {
 	background-color: var(--chat-room-color-online);
 }
 
+.room-badge {
+	background-color: var(--chat-room-bg-color-badge);
+	color: var(--chat-room-color-badge);
+	font-size: 11px;
+	font-weight: 500;
+	height: 13px;
+	width: auto;
+	min-width: 13px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 3px;
+}
+
 @media only screen and (max-width: 768px) {
 	.box-search {
 		height: 58px;

src/themes/index.js

@@ -87,7 +87,9 @@ export const defaultThemeStyles = {
 			colorMessage: '#67717a',
 			colorTimestamp: '#a2aeb8',
 			colorStateOnline: '#4caf50',
-			colorStateOffline: '#9ca6af'
+			colorStateOffline: '#9ca6af',
+			backgroundCounterBadge: '#0696c7',
+			colorCounterBadge: '#fff'
 		},
 
 		emoji: {
@@ -205,7 +207,9 @@ export const defaultThemeStyles = {
 			colorMessage: '#6c7278',
 			colorTimestamp: '#6c7278',
 			colorStateOnline: '#4caf50',
-			colorStateOffline: '#596269'
+			colorStateOffline: '#596269',
+			backgroundCounterBadge: '#1976d2',
+			colorCounterBadge: '#fff'
 		},
 
 		emoji: {
@@ -333,6 +337,8 @@ export const cssThemeVars = ({
 		'--chat-room-color-timestamp': room.colorTimestamp,
 		'--chat-room-color-online': room.colorStateOnline,
 		'--chat-room-color-offline': room.colorStateOffline,
+		'--chat-room-bg-color-badge': room.backgroundCounterBadge,
+		'--chat-room-color-badge': room.colorCounterBadge,
 
 		// emoji
 		'--chat-emoji-bg-color': emoji.background,