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/
npm-debug.log*
yarn-debug.log*

View File

@ -90,7 +90,12 @@
>
<div class="scroll-down-arrow" />
</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" />
</div>
</div>
@ -133,6 +138,7 @@ export default {
props: {
network: Object,
channel: Object,
focused: String,
},
computed: {
specialComponent() {

View File

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

View File

@ -3,7 +3,11 @@
:id="'msg-' + message.id"
:class="[
'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-command="message.command"
@ -110,6 +114,7 @@ export default {
network: Object,
keepScrollPosition: Function,
isPreviousSource: Boolean,
focused: Boolean,
},
computed: {
timeFormat() {

View File

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

View File

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

View File

@ -1,5 +1,10 @@
<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>
<script>

View File

@ -56,18 +56,20 @@
aria-relevant="additions"
>
<template v-for="(message, id) in messages">
<DateMarker
v-if="shouldDisplayDateMarker(message, id)"
:key="message.date"
:message="message"
/>
<Message
:key="message.id"
:channel="channel"
:network="network"
:message="message"
:data-id="message.id"
/>
<div class="result" v-on:click="jump(message, id)">
<DateMarker
v-if="shouldDisplayDateMarker(message, id)"
:key="message.date"
:message="message"
/>
<Message
:key="message.id"
:channel="channel"
:network="network"
:message="message"
:data-id="message.id"
/>
</div>
</template>
</div>
</div>
@ -210,6 +212,20 @@ export default {
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>