diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 8 | ||||
| -rw-r--r-- | src/App.vue | 1 | ||||
| -rw-r--r-- | src/components/notifications/notifications.js | 16 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 32 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 31 |
5 files changed, 85 insertions, 3 deletions
@@ -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 index 09013d18..dd05c569 100644 --- 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 new file mode 100644 index 00000000..10f987a8 --- /dev/null +++ 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 new file mode 100644 index 00000000..1257e751 --- /dev/null +++ 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 new file mode 100644 index 00000000..de5d9f00 --- /dev/null +++ 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> |