From e8c85434b7b884a9fa398d75694691548bc35aa3 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Sun, 27 Nov 2016 19:44:56 +0100 Subject: [PATCH] Add basic notification support. --- src/App.js | 8 +++-- src/App.vue | 1 + src/components/notifications/notifications.js | 16 ++++++++++ .../notifications/notifications.scss | 32 +++++++++++++++++++ .../notifications/notifications.vue | 31 ++++++++++++++++++ 5 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 src/components/notifications/notifications.js create mode 100644 src/components/notifications/notifications.scss create mode 100644 src/components/notifications/notifications.vue diff --git a/src/App.js b/src/App.js index c3e5164a..93f8f361 100644 --- 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 index 09013d18..dd05c569 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,6 +9,7 @@ + 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 @@ + + + +