Page MenuHomePhorge
Files F85804806

No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/chat_view/chat_view.scss b/src/components/chat_view/chat_view.scss
index 8cc74567e3..c490546bc6 100644
--- a/src/components/chat_view/chat_view.scss
+++ b/src/components/chat_view/chat_view.scss
@@ -1,105 +1,117 @@
.chat-view {
display: flex;
- height: 100%;
+ margin-bottom: -1em;
+ margin-top: -1em;
+
+ .chat-list-wrapper {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
+
+ .top-spacer {
+ flex: 1 1 0;
+ min-height: 0;
+ }
.chat-view-inner {
height: auto;
width: 100%;
overflow: visible;
display: flex;
}
.chat-view-body {
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
min-height: calc(100vh - var(--navbar-height));
margin: 0;
border-radius: var(--roundness);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&::after {
border-radius: 0;
}
}
.message-list {
padding: 0 0.8em;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
}
.footer {
position: sticky;
bottom: 0;
z-index: 1;
}
.chat-view-heading {
grid-template-columns: auto minmax(50%, 1fr);
}
.go-back-button {
text-align: center;
line-height: 1;
height: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
}
.jump-to-bottom-button {
width: 2.5em;
height: 2.5em;
border-radius: 100%;
position: absolute;
right: 1.3em;
top: -3.2em;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
z-index: 10;
transition: 0.35s all;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
opacity: 0;
visibility: hidden;
cursor: pointer;
&.visible {
opacity: 1;
visibility: visible;
}
.unread-message-count {
font-size: 0.8em;
left: 50%;
margin-top: -1rem;
padding: 0.1em;
border-radius: 50px;
position: absolute;
}
.chat-loading-error {
width: 100%;
display: flex;
align-items: flex-end;
height: 100%;
.error {
width: 100%;
}
}
}
.reply-to-text {
text-align: center;
line-height: 1.2;
padding-top: 0.5em;
margin-bottom: -0.5em;
}
}
diff --git a/src/components/chat_view/chat_view.vue b/src/components/chat_view/chat_view.vue
index aa2d90cbc4..f24c892fdf 100644
--- a/src/components/chat_view/chat_view.vue
+++ b/src/components/chat_view/chat_view.vue
@@ -1,120 +1,123 @@
<template>
<div class="chat-view">
<div class="chat-view-inner">
<div
ref="inner"
class="panel-default panel chat-view-body"
>
<div
ref="header"
class="panel-heading -sticky chat-view-heading"
>
<button
class="button-unstyled go-back-button"
@click="goBack"
>
<FAIcon
size="lg"
icon="chevron-left"
/>
</button>
<div class="title text-center">
<template v-if="isConversation">
<RichContent
v-if="messages[0]?.summary"
:html="messages[0].summary"
/>
<template v-else>
{{ $t('timeline.conversation') }}
</template>
</template>
<ChatTitle
v-else
:user="recipient"
:with-avatar="true"
/>
</div>
</div>
- <ChatMessageList
- header-date
- :messages="messages"
- :pending-messages="pendingMessages"
- :replied-id="replyStatus?.id"
- :focused-id="statusId"
- @message-delete="deleteChatMessage"
- @reply-requested="e => explicitReplyStatus = e"
- />
+ <div class="chat-list-wrapper panel-body">
+ <div class="top-spacer" />
+ <ChatMessageList
+ header-date
+ :messages="messages"
+ :pending-messages="pendingMessages"
+ :replied-id="replyStatus?.id"
+ :focused-id="statusId"
+ @message-delete="deleteChatMessage"
+ @reply-requested="e => explicitReplyStatus = e"
+ />
+ </div>
<div
ref="footer"
class="panel-body footer"
>
<div
class="jump-to-bottom-button"
:class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })"
>
<span>
<FAIcon icon="chevron-down" />
<div
v-if="newMessageCount"
class="badge -notification unread-chat-count unread-message-count"
>
{{ newMessageCount }}
</div>
</span>
</div>
<div class="auto-reply-to-section">
<div class="reply-to-text">
{{ explicitReplyStatus ? $t('status.reply_to_selected') : $t('status.reply_to_last') }}
<button
v-if="explicitReplyStatus"
class="button-default"
@click="explicitReplyStatus = null"
>
<FAIcon icon="times" />
{{ $t('general.cancel') }}
</button>
</div>
</div>
<PostStatusForm
ref="postStatusForm"
:reply-to="replyStatus?.id"
:mentions-line="isConversation"
mentions-line-read-only
:attentions="replyStatus?.attentions"
:replied-user="replyStatus?.user"
:replied-subject="replyStatus?.summary"
:replied-scope="replyStatus?.visibility"
disable-quotes
disable-notice
disable-lock-warning
:disable-subject="!isConversation"
:disable-scope-selector="!isConversation"
:disable-polls="!isConversation"
:disable-sensitivity-checkbox="!isConversation"
:disable-preview="!isConversation"
:disable-draft="!isConversation"
:disable-submit="isConversation ? false : (errorLoadingChat || !chat)"
:optimistic-posting="!isConversation"
:submit-on-enter="!mobileLayout"
:preserve-focus="!mobileLayout"
:auto-focus="!mobileLayout"
:placeholder="formPlaceholder"
:file-limit="isConversation ? null : 1"
:max-height="160"
emoji-picker-placement="top"
:post-handler="isConversation ? null : sendMessage"
@resize="handleResize"
@posted="onPosted"
/>
</div>
</div>
</div>
</div>
</template>
<script src="./chat_view.js"></script>
<style src="./chat_view.scss" lang="scss" />

File Metadata

Mime Type
text/x-diff
Expires
Sat, Oct 10, 3:08 PM (1 d, 2 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1785288
Default Alt Text
(7 KB)

Event Timeline