aboutsummaryrefslogtreecommitdiff
path: root/src/components/chat/chat.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/chat/chat.vue')
-rw-r--r--src/components/chat/chat.vue118
1 files changed, 58 insertions, 60 deletions
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 94a0097c..493c5d5a 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -26,73 +26,71 @@
/>
</div>
</div>
- <template>
+ <div
+ ref="scrollable"
+ class="scrollable-message-list"
+ :style="{ height: scrollableContainerHeight }"
+ @scroll="handleScroll"
+ >
+ <template v-if="!errorLoadingChat">
+ <ChatMessage
+ v-for="chatViewItem in chatViewItems"
+ :key="chatViewItem.id"
+ :author="recipient"
+ :chat-view-item="chatViewItem"
+ :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
+ @hover="onMessageHover"
+ />
+ </template>
<div
- ref="scrollable"
- class="scrollable-message-list"
- :style="{ height: scrollableContainerHeight }"
- @scroll="handleScroll"
+ v-else
+ class="chat-loading-error"
>
- <template v-if="!errorLoadingChat">
- <ChatMessage
- v-for="chatViewItem in chatViewItems"
- :key="chatViewItem.id"
- :author="recipient"
- :chat-view-item="chatViewItem"
- :hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
- @hover="onMessageHover"
- />
- </template>
- <div
- v-else
- class="chat-loading-error"
- >
- <div class="alert error">
- {{ $t('chats.error_loading_chat') }}
- </div>
+ <div class="alert error">
+ {{ $t('chats.error_loading_chat') }}
</div>
</div>
+ </div>
+ <div
+ ref="footer"
+ class="panel-body footer"
+ >
<div
- ref="footer"
- class="panel-body footer"
+ class="jump-to-bottom-button"
+ :class="{ 'visible': jumpToBottomButtonVisible }"
+ @click="scrollDown({ behavior: 'smooth' })"
>
- <div
- class="jump-to-bottom-button"
- :class="{ 'visible': jumpToBottomButtonVisible }"
- @click="scrollDown({ behavior: 'smooth' })"
- >
- <span>
- <FAIcon icon="chevron-down" />
- <div
- v-if="newMessageCount"
- class="badge badge-notification unread-chat-count unread-message-count"
- >
- {{ newMessageCount }}
- </div>
- </span>
- </div>
- <PostStatusForm
- :disable-subject="true"
- :disable-scope-selector="true"
- :disable-notice="true"
- :disable-lock-warning="true"
- :disable-polls="true"
- :disable-sensitivity-checkbox="true"
- :disable-submit="errorLoadingChat || !currentChat"
- :disable-preview="true"
- :optimistic-posting="true"
- :post-handler="sendMessage"
- :submit-on-enter="!mobileLayout"
- :preserve-focus="!mobileLayout"
- :auto-focus="!mobileLayout"
- :placeholder="formPlaceholder"
- :file-limit="1"
- max-height="160"
- emoji-picker-placement="top"
- @resize="handleResize"
- />
+ <span>
+ <FAIcon icon="chevron-down" />
+ <div
+ v-if="newMessageCount"
+ class="badge badge-notification unread-chat-count unread-message-count"
+ >
+ {{ newMessageCount }}
+ </div>
+ </span>
</div>
- </template>
+ <PostStatusForm
+ :disable-subject="true"
+ :disable-scope-selector="true"
+ :disable-notice="true"
+ :disable-lock-warning="true"
+ :disable-polls="true"
+ :disable-sensitivity-checkbox="true"
+ :disable-submit="errorLoadingChat || !currentChat"
+ :disable-preview="true"
+ :optimistic-posting="true"
+ :post-handler="sendMessage"
+ :submit-on-enter="!mobileLayout"
+ :preserve-focus="!mobileLayout"
+ :auto-focus="!mobileLayout"
+ :placeholder="formPlaceholder"
+ :file-limit="1"
+ max-height="160"
+ emoji-picker-placement="top"
+ @resize="handleResize"
+ />
+ </div>
</div>
</div>
</div>