Add basic notification support.

This commit is contained in:
Roger Braun 2016-11-27 19:44:56 +01:00
parent e1c5030311
commit e8c85434b7
5 changed files with 85 additions and 3 deletions

View file

@ -1,14 +1,16 @@
import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue'
export default {
name: 'app',
components: {
UserPanel,
NavPanel
NavPanel,
Notifications
},
computed: {
user () { return this.$store.state.users.currentUser || {} },
style () { return { 'background-image': `url(${this.user.background_image})` } }
currentUser () { return this.$store.state.users.currentUser },
style () { return { 'background-image': `url(${this.currentUser.background_image})` } }
}
}

View file

@ -9,6 +9,7 @@
<sidebar>
<user-panel></user-panel>
<nav-panel></nav-panel>
<notifications v-if="currentUser"></notifications>
</sidebar>
<router-view></router-view>
</div>

View file

@ -0,0 +1,16 @@
import { sortBy, take } from 'lodash'
const Notifications = {
data () {
return {
visibleNotificationCount: 20
}
},
computed: {
visibleNotifications () {
return take(sortBy(this.$store.state.statuses.notifications, ({action}) => -action.id), this.visibleNotificationCount)
}
}
}
export default Notifications

View file

@ -0,0 +1,32 @@
.notification {
padding: 0.5em;
padding-left: 1em;
display: flex;
border-bottom: 1px solid silver;
.text {
h1 {
margin: 0;
padding: 0;
font-size: 1em;
}
padding-left: 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.5em;
}
}
.avatar {
padding-top: 3px;
width: 32px;
height: 32px;
border-radius: 50%;
}
&:last-child {
border: none
}
}

View file

@ -0,0 +1,31 @@
<template>
<div class="notifications">
<div class="panel panel-default">
<div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification">
<a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original">
</a>
<div class='text'>
<div v-if="notification.type === 'favorite'">
<h1>{{ notification.action.user.name }} favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p>
</div>
<div v-if="notification.type === 'repeat'">
<h1>{{ notification.action.user.name }} repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
<p>{{ notification.status.text }}</p>
</div>
<div v-if="notification.type === 'mention'">
<h1>{{ notification.action.user.name }} <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
<p>{{ notification.status.text }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="./notifications.js"></script>
<style lang="scss" src="./notifications.scss"></style>