From 18a1f5d62a72da45d62672043397a7471ab2c090 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Tue, 7 Jul 2020 18:30:05 +0300
Subject: Add the empty chat list placeholder.

Do not use full height when displaying the chat list.
Remove an unsued chat action.
---
 src/components/chat_list/chat_list.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

(limited to 'src/components/chat_list')

diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index e62f58e5..fa138f16 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -15,7 +15,10 @@
       </button>
     </div>
     <div class="panel-body">
-      <div class="timeline">
+      <div
+        v-if="sortedChatList.length > 0"
+        class="timeline"
+      >
         <List :items="sortedChatList">
           <template
             slot="item"
@@ -29,6 +32,12 @@
           </template>
         </List>
       </div>
+      <div
+        v-else
+        class="emtpy-chat-list-alert"
+      >
+        <span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -39,10 +48,24 @@
 @import '../../_variables.scss';
 
 .chat-list {
-  min-height: calc(100vh - 67px);
+  min-height: 25em;
   margin-bottom: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+
+  &::after {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.emtpy-chat-list-alert {
+  padding: 3em;
+  font-size: 1.2em;
+  display: flex;
+  justify-content: center;
+  color: $fallback--text;
+  color: var(--faint, $fallback--text);
 }
 
 </style>
-- 
cgit v1.2.3-70-g09d2