Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/sidepanel-independent-scrolling

This commit is contained in:
Shpuld Shpuldson 2017-04-13 16:32:15 +03:00
commit ff9142d7ab
6 changed files with 47 additions and 13 deletions

View file

@ -2,7 +2,7 @@
> A Qvitter-style frontend for certain GS servers.
![screenshot](http://i.imgur.com/3q30Zxt.jpg)
![screenshot](https://my.mixtape.moe/kjzioz.PNG)
# FOR ADMINS

View file

@ -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)
}
}
}

View file

@ -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>

View file

@ -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)
}
}
}
}
}

View file

@ -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>

View file

@ -79,9 +79,8 @@
return this.$store.state.users.currentUser
},
dailyAvg () {
return Math.round(
this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
)
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
return Math.round(this.user.statuses_count / days)
}
},
methods: {