diff options
| author | Marco Ambrosini <marcoambrosini@pm.me> | 2022-06-03 10:14:50 +0300 |
|---|---|---|
| committer | Joas Schilling <coding@schilljs.com> | 2022-08-02 16:51:11 +0300 |
| commit | 700315785144ad3661177d7212e42431e7edd94c (patch) | |
| tree | 80a4389b1e626a4b023bde14522f4082754e3393 | |
| parent | fcc56adee4b93c4f1e42c1227657986f3d6f276a (diff) | |
Fix messagebuttonsbar position for last read messagesbugfix/7219/messagebuttonbar-overlap
If the MessageButtonsBar belongs to the last read message, we need
to raise it to compensate for the shift in position brought by the
last read marker that's added to the message component.
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
| -rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 1 | ||||
| -rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue | 18 |
2 files changed, 18 insertions, 1 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index 6ea8da743..69fa93422 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -154,6 +154,7 @@ the main body of the message as well as a quote. :is-reactions-menu-open.sync="isReactionsMenuOpen" :message-api-data="messageApiData" :message-object="messageObject" + :is-last-read="isLastReadMessage" :can-react="canReact" v-bind="$props" :previous-message-id="previousMessageId" diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue index 28c03b8d2..a138e45c8 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue @@ -22,7 +22,8 @@ <template> <!-- Message Actions --> <div v-click-outside="handleClickOutside" - class="message-buttons-bar"> + class="message-buttons-bar" + :class="{ 'message-buttons-bar--last-read' : isLastRead }"> <template v-if="!isReactionsMenuOpen"> <Button v-if="canReact" type="tertiary" @@ -297,6 +298,16 @@ export default { type: Boolean, required: true, }, + + /** + * If the MessageButtonsBar belongs to the last read message, we need + * to raise it to compensate for the shift in position brought by the + * last read marker that's added to the message component. + */ + isLastRead: { + type: Boolean, + required: true, + }, }, data() { @@ -489,10 +500,15 @@ export default { background-color: var(--color-main-background); border-radius: calc($clickable-area / 2); box-shadow: 0 0 4px 0 var(--color-box-shadow); + height: 44px; & h6 { margin-left: auto; } + + &--last-read { + bottom: 36px; + } } </style> |