Add an option to automatically show new posts when scrolled to the top, also add fade-in animation for posts.

This commit is contained in:
shpuld 2017-11-13 01:06:48 +02:00
parent c682a4b007
commit 46f23b7de7
6 changed files with 50 additions and 1 deletions

View file

@ -9,6 +9,7 @@ const settings = {
hideNsfwLocal: this.$store.state.config.hideNsfw, hideNsfwLocal: this.$store.state.config.hideNsfw,
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: this.$store.state.config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: this.$store.state.config.autoLoad,
streamingLocal: this.$store.state.config.streaming,
hoverPreviewLocal: this.$store.state.config.hoverPreview hoverPreviewLocal: this.$store.state.config.hoverPreview
} }
}, },
@ -33,6 +34,9 @@ const settings = {
autoLoadLocal (value) { autoLoadLocal (value) {
this.$store.dispatch('setOption', { name: 'autoLoad', value }) this.$store.dispatch('setOption', { name: 'autoLoad', value })
}, },
streamingLocal (value) {
this.$store.dispatch('setOption', { name: 'streaming', value })
},
hoverPreviewLocal (value) { hoverPreviewLocal (value) {
this.$store.dispatch('setOption', { name: 'hoverPreview', value }) this.$store.dispatch('setOption', { name: 'hoverPreview', value })
}, },

View file

@ -32,6 +32,10 @@
<input type="checkbox" id="autoLoad" v-model="autoLoadLocal"> <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
<label for="autoLoad">{{$t('settings.autoload')}}</label> <label for="autoLoad">{{$t('settings.autoload')}}</label>
</li> </li>
<li>
<input type="checkbox" id="streaming" v-model="streamingLocal">
<label for="streaming">{{$t('settings.streaming')}}</label>
</li>
<li> <li>
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal"> <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label> <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>

View file

@ -14,7 +14,7 @@
</div> </div>
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/> <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
</div> </div>
<div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > <div class="status-el base00-background base03-border status-fadein" v-else-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>
@ -226,6 +226,20 @@
} }
} }
.status-fadein {
animation-duration: 0.5s;
animation-name: fadein;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.greentext { .greentext {
color: green; color: green;
} }

View file

@ -11,6 +11,11 @@ const Timeline = {
'userId', 'userId',
'tag' 'tag'
], ],
data () {
return {
paused: false
}
},
computed: { computed: {
timelineError () { return this.$store.state.statuses.error }, timelineError () { return this.$store.state.statuses.error },
followers () { followers () {
@ -21,6 +26,9 @@ const Timeline = {
}, },
viewing () { viewing () {
return this.timeline.viewing return this.timeline.viewing
},
newStatusCount () {
return this.timeline.newStatusCount
} }
}, },
components: { components: {
@ -56,6 +64,7 @@ const Timeline = {
methods: { methods: {
showNewStatuses () { showNewStatuses () {
this.$store.commit('showNewStatuses', { timeline: this.timelineName }) this.$store.commit('showNewStatuses', { timeline: this.timelineName })
this.paused = false
}, },
fetchOlderStatuses () { fetchOlderStatuses () {
const store = this.$store const store = this.$store
@ -90,6 +99,21 @@ const Timeline = {
this.fetchOlderStatuses() this.fetchOlderStatuses()
} }
} }
},
watch: {
newStatusCount (count) {
if (!this.$store.state.config.streaming) {
return
}
if (count > 0) {
// only 'stream' them when you're scrolled to the top
if (window.pageYOffset < 15 && !this.paused) {
this.showNewStatuses()
} else {
this.paused = true
}
}
}
} }
} }

View file

@ -103,6 +103,7 @@ const fi = {
hide_attachments_in_convo: 'Piilota liitteet keskusteluissa', hide_attachments_in_convo: 'Piilota liitteet keskusteluissa',
nsfw_clickthrough: 'Piilota NSFW liitteet klikkauksen taakse.', nsfw_clickthrough: 'Piilota NSFW liitteet klikkauksen taakse.',
autoload: 'Lataa vanhempia viestejä automaattisesti ruudun pohjalla', autoload: 'Lataa vanhempia viestejä automaattisesti ruudun pohjalla',
streaming: 'Näytä uudet viestit automaattisesti ollessasi ruudun huipulla',
reply_link_preview: 'Keskusteluiden vastauslinkkien esikatselu' reply_link_preview: 'Keskusteluiden vastauslinkkien esikatselu'
}, },
notifications: { notifications: {
@ -186,6 +187,7 @@ const en = {
hide_attachments_in_convo: 'Hide attachments in conversations', hide_attachments_in_convo: 'Hide attachments in conversations',
nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
autoload: 'Enable automatic loading when scrolled to the bottom', autoload: 'Enable automatic loading when scrolled to the bottom',
streaming: 'Enable automatic streaming of new posts when scrolled to the top',
reply_link_preview: 'Enable reply-link preview on mouse hover' reply_link_preview: 'Enable reply-link preview on mouse hover'
}, },
notifications: { notifications: {

View file

@ -8,6 +8,7 @@ const defaultState = {
hideAttachmentsInConv: false, hideAttachmentsInConv: false,
hideNsfw: true, hideNsfw: true,
autoLoad: true, autoLoad: true,
streaming: false,
hoverPreview: true, hoverPreview: true,
muteWords: [] muteWords: []
} }