From a675cfbb3ebd9c4c093a4535cc5cd0e672a45500 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 12 Apr 2017 18:25:19 +0300 Subject: [PATCH] Goto-original-arrow button now sets conversation highlight/focus even when inline, setting focus now scrolls you to the focused post smoothly. Hide the arrow button when not expanded. --- src/components/conversation/conversation.js | 8 +++++ src/components/conversation/conversation.vue | 2 +- src/components/status/status.js | 36 +++++++++++++++++++- src/components/status/status.vue | 12 +++---- 4 files changed, 49 insertions(+), 9 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 281b0183..fa042d23 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => { } const conversation = { + data() { + return { + highlight: this.statusoid.id + } + }, props: [ 'statusoid', 'collapsable' @@ -54,6 +59,9 @@ const conversation = { } else { return (id === this.statusoid.id) } + }, + setHighlight(id) { + this.highlight = id } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 726cfb65..8b1e00ac 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 bb026fe1..b06bc08d 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -11,7 +11,8 @@ const Status = { 'statusoid', 'expandable', 'inConversation', - 'focused' + 'focused', + 'highlight' ], data: () => ({ replying: false, @@ -53,6 +54,15 @@ const Status = { return { borderBottomColor: this.$store.state.config.colors['base02'] } + }, + isFocused () { + // retweet or root of an expanded conversation + if(this.focused) + return true + // use conversation highlight only when in conversation + else if(!this.inConversation) + return false + return this.highlight == this.status.id } }, components: { @@ -75,6 +85,10 @@ const Status = { toggleReplying () { this.replying = !this.replying }, + gotoOriginal () { + // only handled by conversation, not status_or_conversation + this.$emit('goto', this.status.in_reply_to_status_id) + }, toggleExpanded () { this.$emit('toggleExpanded') }, @@ -84,6 +98,26 @@ const Status = { toggleUserExpanded () { this.userExpanded = !this.userExpanded } + }, + watch: { + 'highlight': function (newfocus) { + if(this.status.id == newfocus) { + let rect = this.$el.getBoundingClientRect() + if(rect.top < 100) + window.scrollBy({ + left: 0, + top: rect.top - 200, + behavior: 'smooth' + }) + // will be useful when scrolling down to replies or root posts is in + else if(rect.bottom > window.innerHeight - 100) + window.scrollBy({ + left: 0, + top: rect.bottom + 200, + behavior: 'smooth' + }) + } + } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b471888a..db33a200 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,5 @@