From a675cfbb3ebd9c4c093a4535cc5cd0e672a45500 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 12 Apr 2017 18:25:19 +0300 Subject: 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/status/status.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) (limited to 'src/components/status/status.js') 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' + }) + } + } } } -- cgit v1.2.3-70-g09d2 From 3f477986cfe3dcf0077f45c263b152d0b96cb0f0 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 12 Apr 2017 18:47:47 +0300 Subject: Removed smooth scrolling, does not work in other browsers than FF --- src/components/status/status.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/components/status/status.js b/src/components/status/status.js index b06bc08d..11e4430f 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -104,18 +104,10 @@ const Status = { if(this.status.id == newfocus) { let rect = this.$el.getBoundingClientRect() if(rect.top < 100) - window.scrollBy({ - left: 0, - top: rect.top - 200, - behavior: 'smooth' - }) + window.scrollBy(0, rect.top - 200) // 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' - }) + window.scrollBy(0, rect.bottom + 200) } } } -- cgit v1.2.3-70-g09d2 From c9891703219607c19069ff26a4956a7636e5ab3a Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 12 Apr 2017 19:07:55 +0300 Subject: lint fixes --- src/components/conversation/conversation.js | 6 +++--- src/components/status/status.js | 21 ++++++++++++--------- 2 files changed, 15 insertions(+), 12 deletions(-) (limited to 'src/components/status/status.js') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index fa042d23..f3aeb216 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -8,7 +8,7 @@ const sortAndFilterConversation = (conversation) => { } const conversation = { - data() { + data () { return { highlight: this.statusoid.id } @@ -60,8 +60,8 @@ const conversation = { return (id === this.statusoid.id) } }, - setHighlight(id) { - this.highlight = id + setHighlight (id) { + this.highlight = Number(id) } } } diff --git a/src/components/status/status.js b/src/components/status/status.js index 11e4430f..82de0fd2 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -57,12 +57,13 @@ const Status = { }, isFocused () { // retweet or root of an expanded conversation - if(this.focused) + if (this.focused) { return true - // use conversation highlight only when in conversation - else if(!this.inConversation) + } else if (!this.inConversation) { return false - return this.highlight == this.status.id + } + // use conversation highlight only when in conversation + return this.status.id === this.highlight } }, components: { @@ -100,14 +101,16 @@ const Status = { } }, watch: { - 'highlight': function (newfocus) { - if(this.status.id == newfocus) { + 'highlight': function (id) { + id = Number(id) + if (this.status.id === id) { let rect = this.$el.getBoundingClientRect() - if(rect.top < 100) + if (rect.top < 100) { window.scrollBy(0, rect.top - 200) - // will be useful when scrolling down to replies or root posts is in - else if(rect.bottom > window.innerHeight - 100) + } 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) + } } } } -- cgit v1.2.3-70-g09d2 From d8a01454dc4c0613fc2310beea6c9a82da8e679f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 12 Apr 2017 19:10:38 +0300 Subject: another lint fix --- src/components/status/status.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/status/status.js') diff --git a/src/components/status/status.js b/src/components/status/status.js index 82de0fd2..5e7bde53 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -107,7 +107,7 @@ const Status = { let rect = this.$el.getBoundingClientRect() if (rect.top < 100) { window.scrollBy(0, rect.top - 200) - } else if(rect.bottom > window.innerHeight - 100) { + } 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) } -- cgit v1.2.3-70-g09d2