commit: 449a466ef2a071db07fb63dddf5b7dad704000ec
parent: a4493f05d319e31d677dcf9cf0835d945e37e998
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Mon, 5 Jun 2017 06:19:41 -0400
Merge branch 'feature/two-way-reply-navigation' into 'develop'
Feature/two way reply navigation
See merge request !88
Diffstat:
4 files changed, 33 insertions(+), 10 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -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 {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -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>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -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)
}
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -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}} </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 {