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

Update NotificationCard.vue component, add follow requests at top of card, remove card-header

Browse source
This commit is contained in:
Daniel Supernault 2020-04-27 21:23:13 -06:00
parent 36dc7fbac1
commit 5e48ffca63
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
resources/assets/js/components/NotificationCard.vue
View file

@ -2,19 +2,19 @@
<div> <div>
<transition name="fade"> <transition name="fade">
<div class="card notification-card shadow-none border"> <div class="card notification-card shadow-none border">
<div class="card-header bg-white">
<p class="mb-0 d-flex align-items-center justify-content-between">
<span data-toggle="tooltip" data-placement="bottom"><i class="fas fa-redo fa-lg text-white"></i></span>
<span class="small text-dark text-uppercase font-weight-bold">Alerts</span>
<a class="text-decoration-none text-muted" href="/account/activity"><i class="fas fa-inbox fa-lg"></i></a>
</p>
</div>
<div class="card-body loader text-center" style="height: 200px;"> <div class="card-body loader text-center" style="height: 200px;">
<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 px-0 py-0 contents" style="max-height: 200px; overflow-y: scroll;"> <div v-if="notifications.length > 0" class="card-body px-0 py-0 contents" style="max-height: 240px; overflow-y: scroll;">
<div v-if="profile.locked" class="media align-items-center mt-n2 px-3 py-2 border-bottom border-lighter bg-light cursor-pointer" @click="redirect('/account/follow-requests')">
<div class="media-body font-weight-light pt-2 small d-flex align-items-center justify-content-between">
<p class="mb-0 text-lighter"><i class="fas fa-cog text-light"></i></p>
<p class="text-center pt-1 mb-1 text-dark font-weight-bold"><strong>{{followRequests.count}}</strong> Follow Requests</p>
<p class="mb-0 text-lighter"><i class="fas fa-chevron-right"></i></p>
</div>
</div>
<div v-if="notifications.length > 0" class="media align-items-center px-3 py-2 border-bottom border-light" v-for="(n, index) in notifications"> <div v-if="notifications.length > 0" class="media align-items-center px-3 py-2 border-bottom border-light" 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" onerror="this.onerror=null;this.src='/storage/avatars/default.png';"> <img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png';">
<div class="media-body font-weight-light small"> <div class="media-body font-weight-light small">
@ -76,11 +76,20 @@
notifications: {}, notifications: {},
notificationCursor: 2, notificationCursor: 2,
notificationMaxId: 0, notificationMaxId: 0,
profile: {
locked: false
},
followRequests: null
}; };
}, },
mounted() { mounted() {
let self = this;
this.fetchNotifications(); this.fetchNotifications();
setTimeout(function() {
self.profile = window._sharedData.curUser;
self.fetchFollowRequests();
}, 500);
}, },
updated() { updated() {
@ -138,29 +147,7 @@
}, },
timeAgo(ts) { timeAgo(ts) {
let date = Date.parse(ts); return window.App.util.format.timeAgo(ts);
let seconds = Math.floor((new Date() - date) / 1000);
let interval = Math.floor(seconds / 31536000);
if (interval >= 1) {
return interval + "y";
}
interval = Math.floor(seconds / 604800);
if (interval >= 1) {
return interval + "w";
}
interval = Math.floor(seconds / 86400);
if (interval >= 1) {
return interval + "d";
}
interval = Math.floor(seconds / 3600);
if (interval >= 1) {
return interval + "h";
}
interval = Math.floor(seconds / 60);
if (interval >= 1) {
return interval + "m";
}
return Math.floor(seconds) + "s";
}, },
mentionUrl(status) { mentionUrl(status) {
@ -219,6 +206,19 @@
} }
} }
}); });
},
fetchFollowRequests() {
if(window._sharedData.curUser.locked == true) {
axios.get('/account/follow-requests.json')
.then(res => {
this.followRequests = res.data;
})
}
},
redirect(url) {
window.location.href = url;
} }
} }
} }