Add list of replies under the name/links in conversation statuses, clicking them will highlight the statuses and scroll you to them, expanding a status will scroll you to that status once the conversation has opened.

This commit is contained in:
Shpuld Shpuldson 2017-06-04 23:58:15 +03:00
parent a4493f05d3
commit 4fabeda3ec
4 changed files with 39 additions and 12 deletions

View file

@ -10,7 +10,8 @@ const sortAndFilterConversation = (conversation) => {
const conversation = { const conversation = {
data () { data () {
return { return {
highlight: null highlight: null,
statuses: []
} }
}, },
props: [ props: [
@ -27,8 +28,8 @@ const conversation = {
const conversationId = this.status.statusnet_conversation_id const conversationId = this.status.statusnet_conversation_id
const statuses = this.$store.state.statuses.allStatuses const statuses = this.$store.state.statuses.allStatuses
const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
this.statuses = sortAndFilterConversation(conversation)
return sortAndFilterConversation(conversation) return this.statuses
} }
}, },
components: { components: {
@ -46,6 +47,7 @@ const conversation = {
const conversationId = this.status.statusnet_conversation_id const conversationId = this.status.statusnet_conversation_id
this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
.then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
.then(() => this.setHighlight(this.statusoid.id))
} else { } else {
const id = this.$route.params.id const id = this.$route.params.id
this.$store.state.api.backendInteractor.fetchStatus({id}) this.$store.state.api.backendInteractor.fetchStatus({id})
@ -53,7 +55,21 @@ const conversation = {
.then(() => this.fetchConversation()) .then(() => this.fetchConversation())
} }
}, },
focused: function (id) { getReplies (id) {
let res = []
id = Number(id)
let i
for (i = 0; i < this.statuses.length; i++) {
if (Number(this.statuses[i].in_reply_to_status_id) === id) {
res.push({
name: `#${i}`,
id: this.statuses[i].id
})
}
}
return res
},
focused (id) {
if (this.statusoid.retweeted_status) { if (this.statusoid.retweeted_status) {
return (id === this.statusoid.retweeted_status.id) return (id === this.statusoid.retweeted_status.id)
} else { } else {

View file

@ -8,7 +8,7 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="timeline"> <div class="timeline">
<status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status> <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
</div> </div>
</div> </div>
</div> </div>

View file

@ -13,7 +13,8 @@ const Status = {
'inConversation', 'inConversation',
'focused', 'focused',
'highlight', 'highlight',
'compact' 'compact',
'replies'
], ],
data: () => ({ data: () => ({
replying: false, replying: false,
@ -87,12 +88,14 @@ const Status = {
toggleReplying () { toggleReplying () {
this.replying = !this.replying this.replying = !this.replying
}, },
gotoOriginal () { gotoOriginal (id) {
// only handled by conversation, not status_or_conversation // only handled by conversation, not status_or_conversation
this.$emit('goto', this.status.in_reply_to_status_id) //this.$emit('goto', this.status.in_reply_to_status_id)
this.$emit('goto', id)
}, },
toggleExpanded () { toggleExpanded () {
this.$emit('toggleExpanded') this.$emit('toggleExpanded')
//console.log(this.replies)
}, },
toggleMute () { toggleMute () {
this.unmuted = !this.unmuted this.unmuted = !this.unmuted
@ -108,9 +111,8 @@ const Status = {
let rect = this.$el.getBoundingClientRect() let rect = this.$el.getBoundingClientRect()
if (rect.top < 100) { if (rect.top < 100) {
window.scrollBy(0, rect.top - 200) window.scrollBy(0, rect.top - 200)
} else if (rect.bottom > window.innerHeight - 100) { } else if (rect.bottom > window.innerHeight - 50) {
// will be useful when scrolling down to replies or root posts is in window.scrollBy(0, rect.bottom - window.innerHeight + 50)
window.scrollBy(0, rect.bottom + 200)
} }
} }
} }

View file

@ -56,7 +56,7 @@
</small> </small>
<template v-if="isReply && !expandable"> <template v-if="isReply && !expandable">
<small> <small>
<a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a> <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
</small> </small>
</template> </template>
- -
@ -67,6 +67,12 @@
</small> </small>
</h4> </h4>
</div> </div>
<h4 class="replies" v-if="inConversation">
<small v-if="replies.length">Replies:</small>
<small v-for="reply in replies">
<a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
</small>
</h4>
</div> </div>
<div class="heading-icons"> <div class="heading-icons">
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a> <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
@ -159,6 +165,9 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.replies {
flex-basis: 80%;
}
} }
.source_url { .source_url {