ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prevent loading previous from scrolling ui to top

Browse Source
This commit is contained in:
liamcottle
2024-07-05 23:31:14 +12:00
parent e2142e83e0
commit 7398119e61
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/public/text-messages-embed.html
View File

@ -33,8 +33,9 @@
<button @click="loadPrevious" type="button" class="w-full bg-gray-200 p-2 border-b hover:bg-gray-300">Load Previous</button> <button @click="loadPrevious" type="button" class="w-full bg-gray-200 p-2 border-b hover:bg-gray-300">Load Previous</button>
<!-- messages --> <!-- messages -->
<div id="messages" class="h-full flex flex-col space-y-3 p-3 overflow-y-scroll"> <!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui -->
<div :key="message.id" v-for="message of messages" class="flex flex-col max-w-xl items-start"> <div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
<div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5">
<!-- sender --> <!-- sender -->
<div class="text-xs text-gray-500">{{ getNodeName(message.from) }}</div> <div class="text-xs text-gray-500">{{ getNodeName(message.from) }}</div>
@ -250,6 +251,10 @@
}, },
}, },
computed: { computed: {
reversedMessages() {
// ensure a copy of the array is returned in reverse order
return this.messages.map((message) => message).reverse();
},
oldestMessageId() { oldestMessageId() {
if(this.messages.length > 0){ if(this.messages.length > 0){