[notifications] - Add notifications page. Close #1126

lib/boot/boot.js

@@ -30,6 +30,7 @@ import '../help/help.js';
 import '../signin/signin.js';
 import '../signup/signup.js';
 import '../forgot/forgot.js';
+import '../notifications-page/notifications.js';
 import '../logout/logout.js';
 import '../auth-facebook/auth-facebook';
 import '../settings/settings.js';

lib/boot/index.js

@@ -202,4 +202,5 @@ app.use(require('lib/help'));
 app.use(require('lib/homepage'));
 app.use(require('lib/topic'));
 app.use(require('lib/forum'));
+app.use(require('lib/notifications-page'));
 app.use(require('lib/404'));

lib/notifications-page/index.js

@@ -0,0 +1,8 @@
+/**
+ * Module Dependencies
+ */
+
+var express = require('express');
+var app = module.exports = express();
+
+app.get('/notifications', require('lib/layout'));

lib/notifications-page/notifications.js

@@ -0,0 +1,43 @@
+/**
+ * Module Dependencies
+ */
+
+import o from 'component-dom'
+import page from 'page'
+import t from 't-component'
+import title from '../title/title.js'
+import Notifications from './view.js'
+
+page('/notifications', notificationsMiddleware, (ctx, next) => {
+ o(document.body).addClass('notifications-page')
+ // Update page's title
+ title(t('notifications.title'))
+
+ // Empty container and render form
+ const notifications = new Notifications(ctx.notifications)
+ notifications.replace('#content')
+
+ notifications.find('table tr').on('click', function() {
+ const url = o(this).attr('data-url')
+ page(url)
+ })
+})
+
+function notificationsMiddleware(ctx, next) {
+ setTimeout(() => {
+ ctx.notifications = [{
+ text: 'Someone replied to your comment',
+ buttonIcon: 'glyphicon-comment',
+ when: '5 hours ago',
+ avatar: 'https://secure.gravatar.com/avatar/ff34dd3c0477cc61dde1cb3a265cdbc8?d=mm',
+ url: '/testy/topic/5637c25420ab6bda090e8759'
+ },
+ {
+ text: 'New topic "fdsafsadfdsa"',
+ buttonIcon: 'glyphicon-exclamation-sign',
+ when: '1 day ago',
+ url: '/testy/topic/5637c25420ab6bda090e8759'
+ }]
+ next() 
+ }, 500)
+}

lib/notifications-page/styles.styl

@@ -0,0 +1,25 @@
+.notifications-page
+ max-width 580px
+ margin 0 auto
+ @media only screen and (max-width: 600px)
+ max-width 100%
+ padding 0 10px
+
+ h1
+ color #666
+ font-weight 300
+ margin 1em 0 0.7em
+
+ table
+ tr
+ cursor pointer
+ td
+ vertical-align middle !important
+
+ img
+ max-height 40px
+ max-width 40px
+ border-radius 50%
+
+ .small
+ font-size 75%

lib/notifications-page/template.jade

@@ -0,0 +1,12 @@
+.notifications-page
+ h1=t('notifications.title')
+ table.table.table-hover
+ - each notification in notifications
+ tr(data-url=notification.url)
+ td.text-center
+ i.glyphicon(class=notification.buttonIcon)
+ td(colspan=notification.avatar ? 1 : 2)
+ | #{notification.text}
+ p.small.ago=notification.when
+ - if (notification.avatar)
+ td: img(src=notification.avatar)

lib/notifications-page/view.js

@@ -0,0 +1,12 @@
+/**
+ * Module Dependencies
+ */
+
+import template from './template.jade'
+import View from '../view/view'
+
+export default class NotificationsView extends View {
+ constructor (notifications) {
+ super(template, { notifications });
+ }
+}

lib/translations/lib/en.json

@@ -211,6 +211,7 @@
  "newsfeed.welcome.title": "Start your democracy now",
  "notifications.error": "Unable to connect to notifications engine",
  "notifications.error.connection-refused": "Unable to connect to notifications engine",
+ "notifications.title": "Notifications",
  "password": "Password",
  "password.new": "New Password",
  "password.repeat": "Repeat Password",

lib/translations/lib/es.json

@@ -211,6 +211,7 @@
  "newsfeed.welcome.title": "Empieza tu democracia hoy",
  "notifications.error": "No es posible conectarse al motor de notificaciones",
  "notifications.error.connection-refused": "No es posible conectarse al motor de notificaciones",
+ "notifications.title": "Notificaciones",
  "password": "Contraseña",
  "password.new": "Nueva contraseña",
  "password.repeat": "Repetir contraseña",

lib/user-badge/styles.styl

@@ -1,4 +1,5 @@
-.user-badge
+.user-badge,
+.notifications-badge
  position relative
 
  &.active
@@ -44,11 +45,13 @@
  background #2c3e50
  color white
 
- .profile
+ .profile,
+ .notifications
  img
  width 32px
  border-radius 100px
- span.name
+ span.name,
+ span.bell
  display inline
  margin-left 10px
  font-weight bold
@@ -57,5 +60,12 @@
  padding-top 4px
  padding-right 12px
  max-width 150px
+
+ span.bell
+ margin 0
+ padding-right 0
+ font-size 15px
+ &:before
+ transform s("rotate(%s)", -25deg)
  .caret
  margin-top -3px

lib/user-badge/template.jade

@@ -1,22 +1,28 @@
-.user-badge.pull-right
- a.btn.profile
- img(src=user.profilePicture())
- - var color = config.headerFontColor
- span.name.ellipsis(style=color ? 'color: #{color}' : '')=user.firstName
- span.caret
- ul.dropdown-list
- - if (config.multiForum)
- li: a(href='/settings/forums')= t('header.forums')
- - else
- - if (user.staff)
- li: a(href='/admin')= t('header.admin')
- li: a(href='/settings')= t('header.settings')
- - if (config.frequentlyAskedQuestions)
- li: a(href="/help/faq")= t('help.faq.title')
- - if (config.termsOfService)
- li: a(href="/help/terms-of-service")= t('help.tos.title')
- - if (config.privacyPolicy)
- li: a(href="/help/privacy-policy")= t('help.pp.title')
- - if (config.glossary)
- li: a(href="/help/glossary")= t('help.glossary.title')
- li: a(href='/logout')= t('header.logout')
+.user-wrapper
+ .notifications-badge.pull-left.hidden-xs
+ a.btn.notifications(href='/notifications')
+ span.icon-bell.bell
+ .user-badge.pull-right
+ a.btn.profile
+ img(src=user.profilePicture())
+ - var color = config.headerFontColor
+ span.name.ellipsis(style=color ? 'color: #{color}' : '')=user.firstName
+ span.caret
+ ul.dropdown-list
+ - if (config.multiForum)
+ li: a(href='/settings/forums')= t('header.forums')
+ - else
+ - if (user.staff)
+ li: a(href='/admin')= t('header.admin')
+ li.visible-xs
+ a(href='/Notifications')=t('notifications.title')
+ li: a(href='/settings')= t('header.settings')
+ - if (config.frequentlyAskedQuestions)
+ li: a(href="/help/faq")= t('help.faq.title')
+ - if (config.termsOfService)
+ li: a(href="/help/terms-of-service")= t('help.tos.title')
+ - if (config.privacyPolicy)
+ li: a(href="/help/privacy-policy")= t('help.pp.title')
+ - if (config.glossary)
+ li: a(href="/help/glossary")= t('help.glossary.title')
+ li: a(href='/logout')= t('header.logout')