(feat) add new message dot in rooms list

Author: antoine92190

demo/src/ChatContainer.vue

@@ -267,7 +267,8 @@ export default {
 			return {
 				content,
 				timestamp,
-				seen: message.sender_id === this.currentUserId ? message.seen : null
+				seen: message.sender_id === this.currentUserId ? message.seen : null,
+				new: message.sender_id !== this.currentUserId && !message.seen
 			}
 		},
 

src/ChatWindow/RoomsList.vue

@@ -42,10 +42,15 @@
 							{{ room.lastMessage.timestamp }}
 						</div>
 					</div>
-					<div class="room-name text-last" v-if="room.lastMessage">
+					<div
+						class="room-name text-last"
+						:class="{ 'message-new': room.lastMessage.new }"
+						v-if="room.lastMessage"
+					>
 						<span v-if="room.lastMessage.seen">
 							<svg-icon name="checkmark" class="icon-check" />
 						</span>
+						<span v-if="room.lastMessage.new" class="dot-new"></span>
 						<span>{{ room.lastMessage.content }}</span>
 					</div>
 				</div>
@@ -224,6 +229,19 @@ input {
 	font-size: 12px;
 }
 
+.message-new {
+	color: var(--chat-room-color-username);
+}
+
+.dot-new {
+	height: 8px;
+	width: 8px;
+	background-color: var(--chat-room-color-new-dot);
+	border-radius: 50%;
+	display: inline-block;
+	margin: 0 5px 0 0;
+}
+
 .text-date {
 	color: var(--chat-room-color-timestamp);
 	font-size: 11px;

src/themes/index.js

@@ -56,11 +56,12 @@ export const defaultThemeColors = {
 		room: {
 			colorUsername: '#0a0a0a',
 			colorMessage: '#67717a',
-			colorTimestamp: '#a2aeb8'
+			colorTimestamp: '#a2aeb8',
+			colorNewDot: '#1976d2'
 		},
 
 		emoji: {
-			background: '#fff',
+			background: '#fff'
 		},
 
 		icons: {
@@ -140,11 +141,12 @@ export const defaultThemeColors = {
 		room: {
 			colorUsername: '#fff',
 			colorMessage: '#6c7278',
-			colorTimestamp: '#6c7278'
+			colorTimestamp: '#6c7278',
+			colorNewDot: '#1976d2'
 		},
 
 		emoji: {
-			background: '#343740',
+			background: '#343740'
 		},
 
 		icons: {
@@ -232,6 +234,7 @@ export const cssThemeVars = ({
 		'--chat-room-color-username': room.colorUsername,
 		'--chat-room-color-message': room.colorMessage,
 		'--chat-room-color-timestamp': room.colorTimestamp,
+		'--chat-room-color-new-dot': room.colorNewDot,
 
 		// emoji
 		'--chat-emoji-bg-color': emoji.background,