From 4fabeda3ecbd0f194f3951a2394849de504b1a89 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Sun, 4 Jun 2017 23:58:15 +0300 Subject: [PATCH] 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. --- src/components/conversation/conversation.js | 24 ++++++++++++++++---- src/components/conversation/conversation.vue | 2 +- src/components/status/status.js | 14 +++++++----- src/components/status/status.vue | 11 ++++++++- 4 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index e89fa84f..b4bd6296 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -10,7 +10,8 @@ const sortAndFilterConversation = (conversation) => { const conversation = { data () { return { - highlight: null + highlight: null, + statuses: [] } }, props: [ @@ -27,8 +28,8 @@ 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) + this.statuses = sortAndFilterConversation(conversation) + return this.statuses } }, components: { @@ -46,6 +47,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 +55,21 @@ const conversation = { .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) { return (id === this.statusoid.retweeted_status.id) } else { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 8b1e00ac..96e8a5d7 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -8,7 +8,7 @@
- +
diff --git a/src/components/status/status.js b/src/components/status/status.js index 183838a8..7b8f304b 100644 --- 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,12 +88,14 @@ 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', this.status.in_reply_to_status_id) + this.$emit('goto', id) }, toggleExpanded () { this.$emit('toggleExpanded') + //console.log(this.replies) }, toggleMute () { this.unmuted = !this.unmuted @@ -108,9 +111,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 index cf84d177..5d2c0c30 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -56,7 +56,7 @@ - @@ -67,6 +67,12 @@ +

+ Replies: + + {{reply.name}}  + +

@@ -159,6 +165,9 @@ display: flex; flex-wrap: wrap; } + .replies { + flex-basis: 80%; + } } .source_url {