Merge branch 'feature/two-way-reply-navigation' into 'develop'

Feature/two way reply navigation

See merge request !88
This commit is contained in:
lambadalambda 2017-06-05 06:19:41 -04:00
commit 449a466ef2
4 changed files with 33 additions and 10 deletions

View file

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

View file

@ -8,7 +8,7 @@
</div>
<div class="panel-body">
<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>

View file

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

View file

@ -56,7 +56,7 @@
</small>
<template v-if="isReply && !expandable">
<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>
</template>
-
@ -67,6 +67,12 @@
</small>
</h4>
</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 class="heading-icons">
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
@ -159,6 +165,9 @@
display: flex;
flex-wrap: wrap;
}
.replies {
flex-basis: 100%;
}
}
.source_url {