(slots) add no-room-selected

Author: antoine92190

README.md

@@ -171,7 +171,7 @@ fetchMessages({ room, options }) {
 | rooms                      | Array            | -        | [ ]     |
 | loadingRooms (2)           | Boolean          | -        | false   |
 | roomId (3)                 | [String, Number] | -        | null    |
-| loadFirstRoom (4)         | Boolean          | -        | true    |
+| loadFirstRoom (4)          | Boolean          | -        | true    |
 | messages                   | Array            | -        | [ ]     |
 | roomMessage (5)            | Object           | -        | null    |
 | messagesLoaded (6)         | Boolean          | -        | false   |
@@ -184,7 +184,7 @@ fetchMessages({ room, options }) {
 | showEmojis                 | Boolean          | -        | true    |
 | showReactionEmojis         | Boolean          | -        | true    |
 | showNewMessagesDivider (9) | Boolean          | -        | true    |
-| textMessages (10)           | Object           | -        | null    |
+| textMessages (10)          | Object           | -        | null    |
 | textFormatting (11)        | Boolean          | -        | true    |
 | responsiveBreakpoint (12)  | Number           | -        | 900     |
 | singleRoom (13)            | Boolean          | -        | false   |
@@ -629,7 +629,8 @@ Example:
 | room-options               | Replace the template of the room options                    | -                             | menu-icon                                                                                            |
 | message                    | Replace the template of the message box                     | message                       | deleted-icon, eye-icon, document-icon, pencil-icon, checkmark-icon, dropdown-icon, emoji-picker-icon |
 | messages-empty             | Replace the empty message template                          | -                             | -                                                                                                    |
-| rooms-empty                | Replace the empty room template                             | -                             | -                                                                                                    |
+| rooms-empty                | Replace the empty rooms template                            | -                             | -                                                                                                    |
+| no-room-selected           | Replace the no room selected template                       | -                             | -                                                                                                    |
 | menu-icon                  | Replace the room menu icon                                  | -                             | -                                                                                                    |
 | toggle-icon                | Replace the toggle room list icon                           | -                             | -                                                                                                    |
 | scroll-icon                | Replace the scroll to newest message icon                   | -                             | -                                                                                                    |

src/ChatWindow/ChatWindow.vue

@@ -21,6 +21,7 @@
 			</rooms-list>
 
 			<room
+				v-if="room.roomId || loadFirstRoom"
 				:currentUserId="currentUserId"
 				:rooms="rooms"
 				:roomId="room.roomId || ''"
@@ -60,6 +61,11 @@
 					<slot :name="name" v-bind="data"></slot>
 				</template>
 			</room>
+			<slot v-else name="no-room-selected">
+				<div class="container-center room-empty">
+					{{ t.ROOM_EMPTY }}
+				</div>
+			</slot>
 		</div>
 	</div>
 </template>
@@ -320,4 +326,23 @@ a {
 		-webkit-appearance: none;
 	}
 }
+
+.container-center {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+
+.room-empty {
+	font-size: 14px;
+	color: #9ca6af;
+	font-style: italic;
+	padding: 0 10%;
+	line-height: 20px;
+	white-space: pre-line;
+}
 </style>

src/locales/index.js

@@ -1,5 +1,6 @@
 export default {
 	ROOMS_EMPTY: 'No rooms',
+	ROOM_EMPTY: 'No room selected',
 	NEW_MESSAGES: 'New Messages',
 	MESSAGE_DELETED: 'This message was deleted',
 	MESSAGES_EMPTY: 'No messages',