forked from AkkomaGang/akkoma-fe
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:
parent
a4493f05d3
commit
4fabeda3ec
4 changed files with 39 additions and 12 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}} </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 {
|
||||||
|
|
Loading…
Reference in a new issue