diff options
| author | eugenijm <eugenijm@protonmail.com> | 2020-07-07 18:30:05 +0300 |
|---|---|---|
| committer | eugenijm <eugenijm@protonmail.com> | 2020-07-08 15:21:31 +0300 |
| commit | 18a1f5d62a72da45d62672043397a7471ab2c090 (patch) | |
| tree | 103fdf3ea19f69f2c8b5e2af1191a9b3771badfb /src/components/chat_list/chat_list.vue | |
| parent | 45901c8da654bbeaae71cc484ea08f39a332baa7 (diff) | |
Add the empty chat list placeholder.
Do not use full height when displaying the chat list.
Remove an unsued chat action.
Diffstat (limited to 'src/components/chat_list/chat_list.vue')
| -rw-r--r-- | src/components/chat_list/chat_list.vue | 27 |
1 files changed, 25 insertions, 2 deletions
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> |