commit: e8c85434b7b884a9fa398d75694691548bc35aa3
parent: e1c50303112713c83e15c9d71cf6a5af737458e3
Author: Roger Braun <roger@rogerbraun.net>
Date: Sun, 27 Nov 2016 19:44:56 +0100
Add basic notification support.
Diffstat:
5 files changed, 85 insertions(+), 3 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -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})` } }
}
}
diff --git a/src/App.vue b/src/App.vue
@@ -9,6 +9,7 @@
<sidebar>
<user-panel></user-panel>
<nav-panel></nav-panel>
+ <notifications v-if="currentUser"></notifications>
</sidebar>
<router-view></router-view>
</div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -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
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -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
+ }
+}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -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>