(prop) add show-search

Author: antoine92190

README.md

@@ -194,6 +194,7 @@ fetchMessages({ room, options }) {
 | `room-actions`(8)                   | Array            | -        | `[]`                                    |
 | `menu-actions`(9)                   | Array            | -        | `[]`                                    |
 | `message-actions`(10)               | Array            | -        | (10)                                    |
+| `show-search`                       | Boolean          | -        | `true`                                  |
 | `show-add-room`                     | Boolean          | -        | `true`                                  |
 | `show-send-icon`                    | Boolean          | -        | `true`                                  |
 | `show-files`                        | Boolean          | -        | `true`                                  |

src/ChatWindow/ChatWindow.vue

@@ -10,6 +10,7 @@
 				:room="room"
 				:room-actions="roomActions"
 				:text-messages="t"
+				:show-search="showSearch"
 				:show-add-room="showAddRoom"
 				:show-rooms-list="showRoomsList"
 				:text-formatting="textFormatting"
@@ -118,6 +119,7 @@ export default {
 				{ name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
 			]
 		},
+		showSearch: { type: Boolean, default: true },
 		showAddRoom: { type: Boolean, default: true },
 		showSendIcon: { type: Boolean, default: true },
 		showFiles: { type: Boolean, default: true },

src/ChatWindow/RoomsList/RoomsList.vue

@@ -11,6 +11,7 @@
 				:rooms="rooms"
 				:loading-rooms="loadingRooms"
 				:text-messages="textMessages"
+				:show-search="showSearch"
 				:show-add-room="showAddRoom"
 				@search-room="searchRoom"
 				@add-room="$emit('add-room')"
@@ -94,6 +95,7 @@ export default {
 		currentUserId: { type: [String, Number], required: true },
 		textMessages: { type: Object, required: true },
 		showRoomsList: { type: Boolean, required: true },
+		showSearch: { type: Boolean, required: true },
 		showAddRoom: { type: Boolean, required: true },
 		textFormatting: { type: Boolean, required: true },
 		linkOptions: { type: Object, required: true },

src/ChatWindow/RoomsList/RoomsSearch.vue

@@ -1,18 +1,25 @@
 <template>
-	<div class="vac-box-search">
-		<div v-if="!loadingRooms && rooms.length" class="vac-icon-search">
-			<slot name="search-icon">
-				<svg-icon name="search" />
-			</slot>
-		</div>
-		<input
-			v-if="!loadingRooms && rooms.length"
-			type="search"
-			:placeholder="textMessages.SEARCH"
-			autocomplete="off"
-			class="vac-input"
-			@input="$emit('search-room', $event)"
-		/>
+	<div
+		:class="{
+			'vac-box-search': showSearchBar,
+			'vac-box-empty': !showSearchBar
+		}"
+	>
+		<template v-if="showSearch">
+			<div v-if="!loadingRooms && rooms.length" class="vac-icon-search">
+				<slot name="search-icon">
+					<svg-icon name="search" />
+				</slot>
+			</div>
+			<input
+				v-if="!loadingRooms && rooms.length"
+				type="search"
+				:placeholder="textMessages.SEARCH"
+				autocomplete="off"
+				class="vac-input"
+				@input="$emit('search-room', $event)"
+			/>
+		</template>
 		<div
 			v-if="showAddRoom"
 			class="vac-svg-button vac-add-icon"
@@ -34,14 +41,29 @@ export default {
 
 	props: {
 		textMessages: { type: Object, required: true },
+		showSearch: { type: Boolean, required: true },
 		showAddRoom: { type: Boolean, required: true },
 		rooms: { type: Array, required: true },
 		loadingRooms: { type: Boolean, required: true }
+	},
+
+	computed: {
+		showSearchBar() {
+			return this.showSearch || this.showAddRoom
+		}
 	}
 }
 </script>
 
 <style lang="scss">
+.vac-box-empty {
+	margin-top: 10px;
+
+	@media only screen and (max-width: 768px) {
+		margin-top: 7px;
+	}
+}
+
 .vac-box-search {
 	position: sticky;
 	display: flex;