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.

This commit is contained in:
Shpuld Shpuldson 2017-04-12 18:25:19 +03:00
parent 7ee87c7618
commit a675cfbb3e
4 changed files with 49 additions and 9 deletions

View File

@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => {
} }
const conversation = { const conversation = {
data() {
return {
highlight: this.statusoid.id
}
},
props: [ props: [
'statusoid', 'statusoid',
'collapsable' 'collapsable'
@ -54,6 +59,9 @@ const conversation = {
} else { } else {
return (id === this.statusoid.id) return (id === this.statusoid.id)
} }
},
setHighlight(id) {
this.highlight = id
} }
} }
} }

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="timeline"> <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> </div>
</div> </div>

View File

@ -11,7 +11,8 @@ const Status = {
'statusoid', 'statusoid',
'expandable', 'expandable',
'inConversation', 'inConversation',
'focused' 'focused',
'highlight'
], ],
data: () => ({ data: () => ({
replying: false, replying: false,
@ -53,6 +54,15 @@ const Status = {
return { return {
borderBottomColor: this.$store.state.config.colors['base02'] 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: { components: {
@ -75,6 +85,10 @@ const Status = {
toggleReplying () { toggleReplying () {
this.replying = !this.replying this.replying = !this.replying
}, },
gotoOriginal () {
// only handled by conversation, not status_or_conversation
this.$emit('goto', this.status.in_reply_to_status_id)
},
toggleExpanded () { toggleExpanded () {
this.$emit('toggleExpanded') this.$emit('toggleExpanded')
}, },
@ -84,6 +98,26 @@ const Status = {
toggleUserExpanded () { toggleUserExpanded () {
this.userExpanded = !this.userExpanded 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'
})
}
}
} }
} }

View File

@ -1,5 +1,5 @@
<template> <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"> <template v-if="muted">
<div class="media status container 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> <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@ -35,11 +35,9 @@
{{status.in_reply_to_screen_name}} {{status.in_reply_to_screen_name}}
</router-link> </router-link>
</small> </small>
<template v-if="isReply"> <template v-if="isReply && !expandable">
<small> <small>
<router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }"> <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
<i class="icon-reply"></i>
</router-link>
</small> </small>
</template> </template>
- -