client: lay some groundwork for jump to message

This commit is contained in:
Mary Strodl 2021-01-26 17:51:22 -05:00 committed by Nachtalb
parent 283ef445e5
commit e6856a9e7d
No known key found for this signature in database
GPG Key ID: E48DF13C07055D92
8 changed files with 59 additions and 15 deletions

6
.gitignore vendored
View File

@ -1,3 +1,9 @@
# Emacs/Vim turds
.\#*\#
\#*\#
*~
.tern-port
node_modules/ node_modules/
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

View File

@ -90,7 +90,12 @@
> >
<div class="scroll-down-arrow" /> <div class="scroll-down-arrow" />
</div> </div>
<MessageList ref="messageList" :network="network" :channel="channel" /> <MessageList
ref="messageList"
:network="network"
:channel="channel"
:focused="focused"
/>
<ChatUserList v-if="channel.type === 'channel'" :channel="channel" /> <ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
</div> </div>
</div> </div>
@ -133,6 +138,7 @@ export default {
props: { props: {
network: Object, network: Object,
channel: Object, channel: Object,
focused: String,
}, },
computed: { computed: {
specialComponent() { specialComponent() {

View File

@ -17,6 +17,7 @@ export default {
name: "DateMarker", name: "DateMarker",
props: { props: {
message: Object, message: Object,
focused: Boolean,
}, },
computed: { computed: {
localeDate() { localeDate() {

View File

@ -3,7 +3,11 @@
:id="'msg-' + message.id" :id="'msg-' + message.id"
:class="[ :class="[
'msg', 'msg',
{self: message.self, highlight: message.highlight, 'previous-source': isPreviousSource}, {
self: message.self,
highlight: message.highlight || focused,
'previous-source': isPreviousSource,
},
]" ]"
:data-type="message.type" :data-type="message.type"
:data-command="message.command" :data-command="message.command"
@ -110,6 +114,7 @@ export default {
network: Object, network: Object,
keepScrollPosition: Function, keepScrollPosition: Function,
isPreviousSource: Boolean, isPreviousSource: Boolean,
focused: Boolean,
}, },
computed: { computed: {
timeFormat() { timeFormat() {

View File

@ -30,6 +30,7 @@ export default {
network: Object, network: Object,
messages: Array, messages: Array,
keepScrollPosition: Function, keepScrollPosition: Function,
focused: Boolean,
}, },
data() { data() {
return { return {

View File

@ -23,6 +23,7 @@
v-if="shouldDisplayDateMarker(message, id)" v-if="shouldDisplayDateMarker(message, id)"
:key="message.id + '-date'" :key="message.id + '-date'"
:message="message" :message="message"
:focused="message.id == focused"
/> />
<div <div
v-if="shouldDisplayUnreadMarker(message.id)" v-if="shouldDisplayUnreadMarker(message.id)"
@ -38,6 +39,7 @@
:network="network" :network="network"
:keep-scroll-position="keepScrollPosition" :keep-scroll-position="keepScrollPosition"
:messages="message.messages" :messages="message.messages"
:focused="message.id == focused"
/> />
<Message <Message
v-else v-else
@ -47,6 +49,7 @@
:message="message" :message="message"
:keep-scroll-position="keepScrollPosition" :keep-scroll-position="keepScrollPosition"
:is-previous-source="isPreviousSource(message, id)" :is-previous-source="isPreviousSource(message, id)"
:focused="message.id == focused"
@toggle-link-preview="onLinkPreviewToggle" @toggle-link-preview="onLinkPreviewToggle"
/> />
</template> </template>
@ -75,6 +78,7 @@ export default {
props: { props: {
network: Object, network: Object,
channel: Object, channel: Object,
focused: String,
}, },
computed: { computed: {
condensedMessages() { condensedMessages() {

View File

@ -1,5 +1,10 @@
<template> <template>
<Chat v-if="activeChannel" :network="activeChannel.network" :channel="activeChannel.channel" /> <Chat
v-if="activeChannel"
:network="activeChannel.network"
:channel="activeChannel.channel"
:focused="this.$route.query.focused"
/>
</template> </template>
<script> <script>

View File

@ -56,6 +56,7 @@
aria-relevant="additions" aria-relevant="additions"
> >
<template v-for="(message, id) in messages"> <template v-for="(message, id) in messages">
<div class="result" v-on:click="jump(message, id)">
<DateMarker <DateMarker
v-if="shouldDisplayDateMarker(message, id)" v-if="shouldDisplayDateMarker(message, id)"
:key="message.date" :key="message.date"
@ -68,6 +69,7 @@
:message="message" :message="message"
:data-id="message.id" :data-id="message.id"
/> />
</div>
</template> </template>
</div> </div>
</div> </div>
@ -210,6 +212,20 @@ export default {
el.scrollTop = el.scrollHeight; el.scrollTop = el.scrollHeight;
}); });
}, },
jump(message, id) {
// TODO: Implement jumping to messages!
// This is difficult because it means client will need to handle a potentially nonlinear message set
// (loading IntersectionObserver both before AND after the messages)
// this.$router.push({
// name: "MessageList",
// params: {
// id: this.chan.id,
// },
// query: {
// focused: id
// }
// });
},
}, },
}; };
</script> </script>