(feature) add room options dropdown

Author: antoine92190

demo/src/ChatContainer.vue

@@ -46,6 +46,7 @@
 			:messages="messages"
 			:messages-loaded="messagesLoaded"
 			:rooms-loaded="roomsLoaded"
+			:room-actions="roomActions"
 			:menu-actions="menuActions"
 			:room-message="roomMessage"
 			@fetch-more-rooms="fetchMoreRooms"
@@ -56,6 +57,7 @@
 			@open-file="openFile"
 			@open-user-tag="openUserTag"
 			@add-room="addRoom"
+			@room-action-handler="menuActionHandler"
 			@menu-action-handler="menuActionHandler"
 			@send-message-reaction="sendMessageReaction"
 			@typing-message="typingMessage"
@@ -116,6 +118,11 @@ export default {
 			removeRoomId: null,
 			removeUserId: '',
 			removeUsers: [],
+			roomActions: [
+				{ name: 'inviteUser', title: 'Invite User' },
+				{ name: 'removeUser', title: 'Remove User' },
+				{ name: 'deleteRoom', title: 'Delete Room' }
+			],
 			menuActions: [
 				{ name: 'inviteUser', title: 'Invite User' },
 				{ name: 'removeUser', title: 'Remove User' },

src/ChatWindow/ChatWindow.vue

@@ -8,6 +8,7 @@
 				:loading-rooms="loadingRooms"
 				:rooms-loaded="roomsLoaded"
 				:room="room"
+				:room-actions="roomActions"
 				:text-messages="t"
 				:show-add-room="showAddRoom"
 				:show-rooms-list="showRoomsList"
@@ -17,6 +18,7 @@
 				@fetch-more-rooms="fetchMoreRooms"
 				@loading-more-rooms="loadingMoreRooms = $event"
 				@add-room="addRoom"
+				@room-action-handler="roomActionHandler"
 			>
 				<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
 					<slot :name="name" v-bind="data"></slot>
@@ -101,6 +103,7 @@ export default {
 		loadFirstRoom: { type: Boolean, default: true },
 		messages: { type: Array, default: () => [] },
 		messagesLoaded: { type: Boolean, default: false },
+		roomActions: { type: Array, default: () => [] },
 		menuActions: { type: Array, default: () => [] },
 		messageActions: {
 			type: Array,
@@ -281,6 +284,12 @@ export default {
 				roomId: this.room.roomId
 			})
 		},
+		roomActionHandler({ action, roomId }) {
+			this.$emit('room-action-handler', {
+				action,
+				roomId
+			})
+		},
 		messageActionHandler(ev) {
 			this.$emit('message-action-handler', {
 				...ev,

src/ChatWindow/RoomsList.vue

@@ -121,8 +121,41 @@
 							>
 								{{ typingUsers(room) }}
 							</div>
-							<div v-if="room.unreadCount" class="vac-room-badge">
-								{{ room.unreadCount }}
+							<div class="vac-room-options-container">
+								<div v-if="room.unreadCount" class="vac-room-badge-container">
+									<div class="vac-room-badge">
+										{{ room.unreadCount }}
+									</div>
+								</div>
+								<slot name="room-list-options" v-bind="{ room }">
+									<div
+										class="vac-svg-button vac-list-room-options"
+										v-if="roomActions.length"
+										@click.stop="roomMenuOpened = room.roomId"
+									>
+										<slot name="room-list-options-icon">
+											<svg-icon name="dropdown" param="room" />
+										</slot>
+									</div>
+									<transition name="vac-slide-left" v-if="roomActions.length">
+										<div
+											v-if="roomMenuOpened === room.roomId"
+											v-click-outside="closeRoomMenu"
+											class="vac-menu-options"
+										>
+											<div class="vac-menu-list">
+												<div v-for="action in roomActions" :key="action.name">
+													<div
+														class="vac-menu-item"
+														@click.stop="roomActionHandler(action, room)"
+													>
+														{{ action.title }}
+													</div>
+												</div>
+											</div>
+										</div>
+									</transition>
+								</slot>
 							</div>
 						</div>
 					</div>
@@ -147,6 +180,7 @@
 
 <script>
 import InfiniteLoading from 'vue-infinite-loading'
+import vClickOutside from 'v-click-outside'
 import Loader from './Loader'
 import SvgIcon from './SvgIcon'
 import FormatMessage from './FormatMessage'
@@ -158,6 +192,10 @@ export default {
 	name: 'rooms-list',
 	components: { InfiniteLoading, Loader, SvgIcon, FormatMessage },
 
+	directives: {
+		clickOutside: vClickOutside.directive
+	},
+
 	props: {
 		currentUserId: { type: [String, Number], required: true },
 		textMessages: { type: Object, required: true },
@@ -168,15 +206,17 @@ export default {
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
 		roomsLoaded: { type: Boolean, required: true },
-		room: { type: Object, required: true }
+		room: { type: Object, required: true },
+		roomActions: { type: Array, required: true }
 	},
 
 	data() {
 		return {
 			filteredRooms: this.rooms || [],
 			infiniteState: null,
 			loadingMoreRooms: false,
-			selectedRoomId: ''
+			selectedRoomId: '',
+			roomMenuOpened: null
 		}
 	},
 
@@ -285,6 +325,13 @@ export default {
 					room.lastMessage.distributed ||
 					room.lastMessage.seen)
 			)
+		},
+		roomActionHandler(action, room) {
+			this.closeRoomMenu()
+			this.$emit('room-action-handler', { action, roomId: room.roomId })
+		},
+		closeRoomMenu() {
+			this.roomMenuOpened = null
 		}
 	}
 }
@@ -376,7 +423,7 @@ export default {
 	display: flex;
 	flex: 1 1 100%;
 	margin-bottom: 5px;
-	padding: 0 16px;
+	padding: 0 14px;
 	position: relative;
 	min-height: 71px;
 
@@ -470,6 +517,11 @@ export default {
 	fill: var(--chat-room-color-message);
 }
 
+.vac-room-options-container {
+	display: flex;
+	margin-left: auto;
+}
+
 .vac-room-badge {
 	background-color: var(--chat-room-bg-color-badge);
 	color: var(--chat-room-color-badge);
@@ -478,13 +530,21 @@ export default {
 	height: 13px;
 	width: auto;
 	min-width: 13px;
+	margin-left: 5px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 3px;
 }
 
+.vac-list-room-options {
+	height: 19px;
+	width: 19px;
+	align-items: center;
+	margin-left: 5px;
+}
+
 @media only screen and (max-width: 768px) {
 	.vac-box-search {
 		height: 58px;

src/ChatWindow/SvgIcon.vue

@@ -210,6 +210,10 @@ export default {
 	fill: var(--chat-icon-color-dropdown-message);
 }
 
+#vac-icon-dropdown-room {
+	fill: var(--chat-icon-color-dropdown-room);
+}
+
 #vac-icon-dropdown-scroll {
 	fill: var(--chat-icon-color-dropdown-scroll);
 }

src/themes/index.js

@@ -121,6 +121,7 @@ export const defaultThemeStyles = {
 			eye: '#fff',
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
+			dropdownRoom: '#67717a',
 			dropdownScroll: '#0a0a0a',
 			microphone: '#1976d2',
 			microphoneOff: '#eb4034'
@@ -248,6 +249,7 @@ export const defaultThemeStyles = {
 			eye: '#fff',
 			dropdownMessage: '#fff',
 			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
+			dropdownRoom: '#fff',
 			dropdownScroll: '#0a0a0a',
 			microphone: '#fff',
 			microphoneOff: '#eb4034'
@@ -382,6 +384,7 @@ export const cssThemeVars = ({
 		'--chat-icon-color-eye': icons.eye,
 		'--chat-icon-color-dropdown-message': icons.dropdownMessage,
 		'--chat-icon-bg-dropdown-message': icons.dropdownMessageBackground,
+		'--chat-icon-color-dropdown-room': icons.dropdownRoom,
 		'--chat-icon-color-dropdown-scroll': icons.dropdownScroll,
 		'--chat-icon-color-microphone': icons.microphone,
 		'--chat-icon-color-microphone-off': icons.microphoneOff