UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 00:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Timeline component, add infinite scroll notifications

Browse source
This commit is contained in:
Daniel Supernault 2019-02-26 00:16:28 -07:00
parent 9b4dea1998
commit 2c0d240c8a
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
resources/assets/js/components/Timeline.vue
View file

@ -227,12 +227,12 @@
<a class="text-dark small" href="/account/activity">See All</a> <a class="text-dark small" href="/account/activity">See All</a>
</p> </p>
</div> </div>
<div class="card-body loader text-center" style="height: 170px;"> <div class="card-body loader text-center" style="height: 270px;">
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</div> </div>
<div class="card-body pt-2 contents" style="max-height: 170px; overflow-y: scroll;"> <div class="card-body pt-2 contents" style="max-height: 270px; overflow-y: scroll;">
<div v-if="notifications.length > 0" class="media mb-3 align-items-center" v-for="(n, index) in notifications"> <div v-if="notifications.length > 0" class="media mb-3 align-items-center" v-for="(n, index) in notifications">
<img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px"> <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px">
<div class="media-body font-weight-light small"> <div class="media-body font-weight-light small">
@ -262,7 +262,12 @@
</p> </p>
</div> </div>
</div> </div>
</div>
<div v-if="notifications.length">
<infinite-loading @infinite="infiniteNotifications">
<div slot="no-results" class="font-weight-bold"></div>
<div slot="no-more" class="font-weight-bold"></div>
</infinite-loading>
</div> </div>
<div v-if="notifications.length == 0" class="text-lighter text-center py-3"> <div v-if="notifications.length == 0" class="text-lighter text-center py-3">
<p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p> <p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
@ -318,6 +323,7 @@
min_id: 0, min_id: 0,
max_id: 0, max_id: 0,
notifications: {}, notifications: {},
notificationCursor: 2,
stories: {}, stories: {},
suggestions: {}, suggestions: {},
loading: true, loading: true,
@ -438,17 +444,44 @@
fetchNotifications() { fetchNotifications() {
axios.get('/api/v1/notifications') axios.get('/api/v1/notifications')
.then(res => { .then(res => {
this.notifications = res.data.filter(n => { let data = res.data.filter(n => {
if(n.type == 'share' && !status) { if(n.type == 'share' && !status) {
return false; return false;
} }
return true; return true;
}); });
this.notifications = data;
$('.notification-card .loader').addClass('d-none'); $('.notification-card .loader').addClass('d-none');
$('.notification-card .contents').removeClass('d-none'); $('.notification-card .contents').removeClass('d-none');
}); });
}, },
infiniteNotifications($state) {
if(this.notificationCursor > 10) {
$state.complete();
return;
}
axios.get('/api/v1/notifications', {
params: {
page: this.notificationCursor
}
}).then(res => {
if(res.data.length) {
let data = res.data.filter(n => {
if(n.type == 'share' && !status) {
return false;
}
return true;
});
this.notifications.push(...data);
this.notificationCursor++;
$state.loaded();
} else {
$state.complete();
}
});
},
reportUrl(status) { reportUrl(status) {
let type = status.in_reply_to ? 'comment' : 'post'; let type = status.in_reply_to ? 'comment' : 'post';
let id = status.id; let id = status.id;