(feat) add button to show/hide rooms list

Author: antoine92190

README.md

@@ -258,6 +258,7 @@ colors="{
   icons: {
     search: '#9ca6af',
     add: '#1976d2',
+    toggle: '#0a0a0a',
     menu: '#0a0a0a',
     close: '#9ca6af',
     closeImage: '#fff',

src/ChatWindow/ChatWindow.vue

@@ -6,6 +6,7 @@
 				:loadingRooms="loadingRooms"
 				:room="room"
 				:textMessages="t"
+				:showRoomsList="showRoomsList"
 				@fetchRoom="fetchRoom"
 				@addRoom="addRoom"
 			>
@@ -21,6 +22,8 @@
 				:showEmojis="showEmojis"
 				:showReactionEmojis="showReactionEmojis"
 				:textMessages="t"
+				:showRoomsList="showRoomsList"
+				@toggleRoomsList="showRoomsList = !showRoomsList"
 				@fetchMessages="fetchMessages"
 				@sendMessage="sendMessage"
 				@editMessage="editMessage"
@@ -75,7 +78,8 @@ export default {
 
 	data() {
 		return {
-			room: {}
+			room: {},
+			showRoomsList: true
 		}
 	},
 

src/ChatWindow/MessagesList.vue

@@ -1,6 +1,9 @@
 <template>
-	<div class="col-messages">
+	<div class="col-messages" :class="{ 'col-messages-full': !showRoomsList }">
 		<div class="room-header app-border-b">
+			<div class="svg-button toggle-button" @click="$emit('toggleRoomsList')">
+				<svg-icon name="toggle" />
+			</div>
 			<div
 				v-if="room.avatar"
 				class="room-avatar"
@@ -209,6 +212,7 @@ export default {
 	props: {
 		currentUserId: { type: String, required: true },
 		textMessages: { type: Object, required: true },
+		showRoomsList: { type: Boolean, required: true },
 		room: { type: Object, required: true },
 		messages: { type: Array, required: true },
 		messagesLoaded: { type: Boolean, required: true },
@@ -463,6 +467,11 @@ export default {
 	height: 100%;
 }
 
+.col-messages-full {
+	flex: 0 0 100%;
+	max-width: 100%;
+}
+
 .room-header {
 	align-items: center;
 	display: flex;
@@ -475,6 +484,10 @@ export default {
 	border-top-right-radius: 4px;
 }
 
+.toggle-button {
+	margin-right: 15px;
+}
+
 .room-name {
 	font-size: 17px;
 }

src/ChatWindow/RoomsList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="rooms-container app-border-r">
+	<div class="rooms-container app-border-r" v-if="showRoomsList">
 		<div class="box-search">
 			<div class="icon-search">
 				<svg-icon name="search" />
@@ -70,6 +70,7 @@ export default {
 
 	props: {
 		textMessages: { type: Object, required: true },
+		showRoomsList: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true },
 		room: { type: Object, required: true }

src/ChatWindow/SvgIcon.vue

@@ -36,6 +36,11 @@ export default {
 					path:
 						'M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'
 				},
+				{
+					name: 'toggle',
+					path: 'M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'
+				},
+
 				{
 					name: 'menu',
 					path:
@@ -107,6 +112,10 @@ export default {
 	fill: var(--chat-icon-color-add);
 }
 
+#chat-icon-toggle {
+	fill: var(--chat-icon-color-toggle);
+}
+
 #chat-icon-menu {
 	fill: var(--chat-icon-color-menu);
 }

src/themes/index.js

@@ -79,6 +79,7 @@ export const defaultThemeColors = {
 		icons: {
 			search: '#9ca6af',
 			add: '#1976d2',
+			toggle: '#0a0a0a',
 			menu: '#0a0a0a',
 			close: '#9ca6af',
 			closeImage: '#fff',
@@ -177,6 +178,7 @@ export const defaultThemeColors = {
 		icons: {
 			search: '#596269',
 			add: '#fff',
+			toggle: '#fff',
 			menu: '#fff',
 			close: '#9ca6af',
 			closeImage: '#fff',
@@ -283,6 +285,7 @@ export const cssThemeVars = ({
 		// icons
 		'--chat-icon-color-search': icons.search,
 		'--chat-icon-color-add': icons.add,
+		'--chat-icon-color-toggle': icons.toggle,
 		'--chat-icon-color-menu': icons.menu,
 		'--chat-icon-color-close': icons.close,
 		'--chat-icon-color-close-image': icons.closeImage,