* Fix conversation scroll behaviour

* Don't show unreads for own messages
This commit is contained in:
styppo 2023-01-28 01:28:48 +00:00
parent d82f0fdfdb
commit a6adc94c1c
No known key found for this signature in database
GPG Key ID: 3AAA685C50724C28
2 changed files with 9 additions and 4 deletions

View File

@ -17,7 +17,7 @@ export const useMessageStore = defineStore('message', {
const messages = this.getMessages(pubkey, counterparty) const messages = this.getMessages(pubkey, counterparty)
const latestMessage = messages.reduce((a, b) => a.createdAt > b.createdAt ? a : b, {createdAt: 0}) const latestMessage = messages.reduce((a, b) => a.createdAt > b.createdAt ? a : b, {createdAt: 0})
const lastRead = useMessageStatusStore().getLastRead(pubkey, counterparty) const lastRead = useMessageStatusStore().getLastRead(pubkey, counterparty)
const numUnread = messages.filter(msg => msg.createdAt > lastRead).length const numUnread = messages.filter(msg => msg.createdAt > lastRead && msg.author === counterparty).length
conversations.push({ conversations.push({
pubkey: counterparty, pubkey: counterparty,
latestMessage, latestMessage,

View File

@ -3,7 +3,7 @@
<UserCard :pubkey="counterparty" class="conversation-header" clickable /> <UserCard :pubkey="counterparty" class="conversation-header" clickable />
</PageHeader> </PageHeader>
<div class="conversation"> <div ref="conversation" class="conversation">
<div class="pusher"></div> <div class="pusher"></div>
<ChatMessage <ChatMessage
v-for="message in conversation" v-for="message in conversation"
@ -75,7 +75,12 @@ export default {
}, },
mounted() { mounted() {
this.markAsRead() this.markAsRead()
setTimeout(() => this.scrollToBottom(), 100)
this.resizeObserver = new ResizeObserver(this.scrollToBottom.bind(this))
this.resizeObserver.observe(this.$refs.conversation)
},
unmounted() {
this.resizeObserver.disconnect()
} }
} }
</script> </script>
@ -128,7 +133,7 @@ export default {
@media screen and (max-width: $phone) { @media screen and (max-width: $phone) {
.conversation { .conversation {
padding-bottom: 48px; padding-bottom: 62px;
} }
.conversation-reply { .conversation-reply {
width: 100%; width: 100%;