(feat) add event on room header click

Author: antoine92190

README.md

@@ -412,6 +412,7 @@ messages="[
 | messageActionHandler (3) | `{ roomId, action, message }`                                   | A user clicks on the dropdown icon inside a message   |
 | sendMessageReaction      | `{ roomId, messageId, reaction, remove }`                       | A user clicks on the emoji icon inside a message      |
 | typingMessage            | `{ message, roomId }`                                           | A user is typing a message                            |
+| roomInfo                 | -                                                               | A user has clicked the room header bar                |
 
 (1) `fetchMessages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`
 

src/ChatWindow/ChatWindow.vue

@@ -35,7 +35,9 @@
 				:showRoomsList="showRoomsList"
 				:isMobile="isMobile"
 				:loadingRooms="loadingRooms"
+				:roomInfo="$listeners.roomInfo"
 				@toggleRoomsList="toggleRoomsList"
+				@roomInfo="roomInfo"
 				@fetchMessages="fetchMessages"
 				@sendMessage="sendMessage"
 				@editMessage="editMessage"
@@ -194,6 +196,9 @@ export default {
 			this.fetchMessages({ reset: true })
 			if (this.isMobile) this.showRoomsList = false
 		},
+		roomInfo() {
+			this.$emit('roomInfo')
+		},
 		addRoom() {
 			this.$emit('addRoom')
 		},

src/ChatWindow/Room.vue

@@ -11,18 +11,24 @@
 					<svg-icon name="toggle" />
 				</div>
 				<div
-					v-if="room.avatar"
-					class="room-avatar"
-					:style="{ 'background-image': `url('${room.avatar}')` }"
-				></div>
-				<div>
-					<div class="room-name" v-html="room.roomName"></div>
+					class="info-wrapper"
+					:class="{ 'item-clickable': roomInfo }"
+					@click="$emit('roomInfo')"
+				>
 					<div
-						v-if="typingUsers"
-						class="room-info"
-						v-html="typingUsers + ' ' + textMessages.IS_TYPING"
+						v-if="room.avatar"
+						class="room-avatar"
+						:style="{ 'background-image': `url('${room.avatar}')` }"
 					></div>
-					<div v-else class="room-info" v-html="userStatus"></div>
+					<div>
+						<div class="room-name" v-html="room.roomName"></div>
+						<div
+							v-if="typingUsers"
+							class="room-info"
+							v-html="typingUsers + ' ' + textMessages.IS_TYPING"
+						></div>
+						<div v-else class="room-info" v-html="userStatus"></div>
+					</div>
 				</div>
 				<div
 					class="svg-button room-options"
@@ -264,7 +270,8 @@ export default {
 		showFiles: { type: Boolean, required: true },
 		showEmojis: { type: Boolean, required: true },
 		showReactionEmojis: { type: Boolean, required: true },
-		loadingRooms: { type: Boolean, required: true }
+		loadingRooms: { type: Boolean, required: true },
+		roomInfo: { type: Function }
 	},
 
 	data() {
@@ -614,10 +621,18 @@ export default {
 .room-wrapper {
 	display: flex;
 	align-items: center;
+	height: 100%;
 	width: 100%;
 	padding: 0 16px;
 }
 
+.info-wrapper {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+}
+
 .toggle-button {
 	margin-right: 15px;
 

src/styles/helper.scss

@@ -14,6 +14,10 @@
 	border-bottom: var(--chat-border-style);
 }
 
+.item-clickable {
+	cursor: pointer;
+}
+
 .vertical-center {
 	display: flex;
 	align-items: center;