Merge branch 'feat/dont-show-load-more-when-bottomed-out' into 'develop'

fix #292 dont show "load more" when bottomed out

Closes #292

See merge request pleroma/pleroma-fe!496
This commit is contained in:
lambda 2019-01-30 17:49:27 +00:00
commit 1717e70046
10 changed files with 59 additions and 10 deletions

View file

@ -425,6 +425,12 @@ main-router {
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
.faint {
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
a { a {
color: $fallback--link; color: $fallback--link;
color: var(--panelLink, $fallback--link) color: var(--panelLink, $fallback--link)

View file

@ -13,6 +13,11 @@ const Notifications = {
notificationsFetcher.startFetching({ store, credentials }) notificationsFetcher.startFetching({ store, credentials })
}, },
data () {
return {
bottomedOut: false
}
},
computed: { computed: {
notifications () { notifications () {
return notificationsFromStore(this.$store) return notificationsFromStore(this.$store)
@ -28,6 +33,9 @@ const Notifications = {
}, },
unseenCount () { unseenCount () {
return this.unseenNotifications.length return this.unseenNotifications.length
},
loading () {
return this.$store.state.statuses.notifications.loading
} }
}, },
components: { components: {
@ -49,10 +57,16 @@ const Notifications = {
fetchOlderNotifications () { fetchOlderNotifications () {
const store = this.$store const store = this.$store
const credentials = store.state.users.currentUser.credentials const credentials = store.state.users.currentUser.credentials
store.commit('setNotificationsLoading', { value: true })
notificationsFetcher.fetchAndUpdate({ notificationsFetcher.fetchAndUpdate({
store, store,
credentials, credentials,
older: true older: true
}).then(notifs => {
store.commit('setNotificationsLoading', { value: false })
if (notifs.length === 0) {
this.bottomedOut = true
}
}) })
} }
} }

View file

@ -18,10 +18,15 @@
</div> </div>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading"> <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
{{$t('notifications.no_more_notifications')}}
</div>
<a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
<div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div> <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
</a> </a>
<div class="new-status-notification text-center panel-footer" v-else>...</div> <div v-else class="new-status-notification text-center panel-footer">
<i class="icon-spin3 animate-spin"/>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -16,7 +16,8 @@ const Timeline = {
data () { data () {
return { return {
paused: false, paused: false,
unfocused: false unfocused: false,
bottomedOut: false
} }
}, },
computed: { computed: {
@ -95,7 +96,12 @@ const Timeline = {
showImmediately: true, showImmediately: true,
userId: this.userId, userId: this.userId,
tag: this.tag tag: this.tag
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) }).then(statuses => {
store.commit('setLoading', { timeline: this.timelineName, value: false })
if (statuses.length === 0) {
this.bottomedOut = true
}
})
}, 1000, this), }, 1000, this),
scrollLoad (e) { scrollLoad (e) {
const bodyBRect = document.body.getBoundingClientRect() const bodyBRect = document.body.getBoundingClientRect()

View file

@ -20,10 +20,15 @@
</div> </div>
</div> </div>
<div :class="classes.footer"> <div :class="classes.footer">
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
{{$t('timeline.no_more_statuses')}}
</div>
<a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
<div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
</a> </a>
<div class="new-status-notification text-center panel-footer" v-else>...</div> <div v-else class="new-status-notification text-center panel-footer">
<i class="icon-spin3 animate-spin"/>
</div>
</div> </div>
</div> </div>
</template> </template>

View file

@ -49,7 +49,8 @@
"load_older": "Load older notifications", "load_older": "Load older notifications",
"notifications": "Notifications", "notifications": "Notifications",
"read": "Read!", "read": "Read!",
"repeated_you": "repeated your status" "repeated_you": "repeated your status",
"no_more_notifications": "No more notifications"
}, },
"post_status": { "post_status": {
"new_status": "Post new status", "new_status": "Post new status",
@ -318,7 +319,8 @@
"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated", "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
"repeated": "repeated", "repeated": "repeated",
"show_new": "Show new", "show_new": "Show new",
"up_to_date": "Up-to-date" "up_to_date": "Up-to-date",
"no_more_statuses": "No more statuses"
}, },
"user_card": { "user_card": {
"approve": "Approve", "approve": "Approve",

View file

@ -26,7 +26,8 @@
"followed_you": "seuraa sinua", "followed_you": "seuraa sinua",
"notifications": "Ilmoitukset", "notifications": "Ilmoitukset",
"read": "Lue!", "read": "Lue!",
"repeated_you": "toisti viestisi" "repeated_you": "toisti viestisi",
"no_more_notifications": "Ei enempää ilmoituksia"
}, },
"post_status": { "post_status": {
"default": "Tulin juuri saunasta.", "default": "Tulin juuri saunasta.",
@ -77,7 +78,8 @@
"load_older": "Lataa vanhempia viestejä", "load_older": "Lataa vanhempia viestejä",
"repeated": "toisti", "repeated": "toisti",
"show_new": "Näytä uudet", "show_new": "Näytä uudet",
"up_to_date": "Ajantasalla" "up_to_date": "Ajantasalla",
"no_more_statuses": "Ei enempää viestejä"
}, },
"user_card": { "user_card": {
"follow": "Seuraa", "follow": "Seuraa",

View file

@ -28,6 +28,7 @@ export const defaultState = {
minId: Number.POSITIVE_INFINITY, minId: Number.POSITIVE_INFINITY,
data: [], data: [],
idStore: {}, idStore: {},
loading: false,
error: false error: false
}, },
favorites: new Set(), favorites: new Set(),
@ -348,6 +349,9 @@ export const mutations = {
setError (state, { value }) { setError (state, { value }) {
state.error = value state.error = value
}, },
setNotificationsLoading (state, { value }) {
state.notifications.loading = value
},
setNotificationsError (state, { value }) { setNotificationsError (state, { value }) {
state.notifications.error = value state.notifications.error = value
}, },
@ -376,6 +380,9 @@ const statuses = {
setError ({ rootState, commit }, { value }) { setError ({ rootState, commit }, { value }) {
commit('setError', { value }) commit('setError', { value })
}, },
setNotificationsLoading ({ rootState, commit }, { value }) {
commit('setNotificationsLoading', { value })
},
setNotificationsError ({ rootState, commit }, { value }) { setNotificationsError ({ rootState, commit }, { value }) {
commit('setNotificationsError', { value }) commit('setNotificationsError', { value })
}, },

View file

@ -24,6 +24,7 @@ const fetchAndUpdate = ({store, credentials, older = false}) => {
return apiService.fetchTimeline(args) return apiService.fetchTimeline(args)
.then((notifications) => { .then((notifications) => {
update({store, notifications, older}) update({store, notifications, older})
return notifications
}, () => store.dispatch('setNotificationsError', { value: true })) }, () => store.dispatch('setNotificationsError', { value: true }))
.catch(() => store.dispatch('setNotificationsError', { value: true })) .catch(() => store.dispatch('setNotificationsError', { value: true }))
} }

View file

@ -35,6 +35,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId }) store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
} }
update({store, statuses, timeline, showImmediately, userId}) update({store, statuses, timeline, showImmediately, userId})
return statuses
}, () => store.dispatch('setError', { value: true })) }, () => store.dispatch('setError', { value: true }))
} }