commit: 7a948ba3a56e2d4e7122b0ef23e2f9c4f0cb94d8
parent: 9ed445fff07f0b0315d7895a2fd3acf1be1bd529
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Wed, 12 Apr 2017 13:14:43 -0400
Merge branch 'feature/reply-navigation' into 'develop'
Reply navigation (up only)
See merge request !70
Diffstat:
4 files changed, 44 insertions(+), 9 deletions(-)
diff --git 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 = Number(id)
}
}
}
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" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
+ <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
</div>
</div>
</div>
diff --git 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,16 @@ const Status = {
return {
borderBottomColor: this.$store.state.config.colors['base02']
}
+ },
+ isFocused () {
+ // retweet or root of an expanded conversation
+ if (this.focused) {
+ return true
+ } else if (!this.inConversation) {
+ return false
+ }
+ // use conversation highlight only when in conversation
+ return this.status.id === this.highlight
}
},
components: {
@@ -75,6 +86,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 +99,20 @@ const Status = {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
}
+ },
+ watch: {
+ 'highlight': function (id) {
+ id = Number(id)
+ if (this.status.id === id) {
+ 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)
+ }
+ }
+ }
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -1,5 +1,5 @@
<template>
- <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': focused }, { 'status-conversation': inConversation }]" >
+ <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
<template v-if="muted">
<div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -35,12 +35,10 @@
{{status.in_reply_to_screen_name}}
</router-link>
</small>
- <template v-if="isReply">
- <small>
- <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
- <i class="icon-reply"></i>
- </router-link>
- </small>
+ <template v-if="isReply && !expandable">
+ <small>
+ <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+ </small>
</template>
-
<small>