FEATURE: restructure notification HTML layout

app/assets/javascripts/discourse/components/notification-item.js.es6

@@ -12,7 +12,8 @@ export default Ember.Component.extend({
 
   render: function(buffer) {
     var notification = this.get('notification'),
-        text = I18n.t(this.get('scope'), Em.getProperties(notification, 'link', 'username'));
+        text = I18n.t(this.get('scope'), Em.getProperties(notification, 'description', 'username'));
-    buffer.push('<span>' + text + '</span>');
+
+    buffer.push('<a href="' + notification.get('url') + '">' + text + '</a>');
   }
 });

app/assets/javascripts/discourse/controllers/notification.js.es6

@@ -1,33 +1,31 @@
 export default Discourse.ObjectController.extend({
-  scope: function() {
+
+  scope: function () {
     return "notifications." + Discourse.Site.currentProp("notificationLookup")[this.get("notification_type")];
-  }.property(),
+  }.property("notification_type"),
 
-  username: function() {
+  username: Em.computed.alias("data.display_username"),
-    return this.get("data.display_username");
-  }.property(),
 
-  safe: function(prop){
+  safe: function (prop) {
     var val = this.get(prop);
-    if(val) {
+    if (val) { val = Handlebars.Utils.escapeExpression(val); }
-      val = Handlebars.Utils.escapeExpression(val);
-    }
     return val;
   },
 
-  link: function() {
+  url: function () {
-
+    var badgeId = this.safe("data.badge_id");
-    var badgeId = this.safe('data.badge_id');
     if (badgeId) {
-      var badgeName = this.safe('data.badge_name');
+      var badgeName = this.safe("data.badge_name");
-      return '<a href="/badges/' + badgeId + '/' + badgeName.replace(/[^A-Za-z0-9_]+/g, '-').toLowerCase() + '">' + badgeName + '</a>';
+      return '/badges/' + badgeId + '/' + badgeName.replace(/[^A-Za-z0-9_]+/g, '-').toLowerCase();
+    } else {
+      return Discourse.Utilities.postUrl(this.safe("slug"), this.safe("topic_id"), this.safe("post_number"));
     }
+  }.property("data.@{badge_id, badge_name}", "slug", "topic_id", "post_number"),
 
-    if (this.blank("data.topic_title")) {
+  description: function () {
-      return "";
+    var badgeName = this.safe("data.badge_name");
-    }
+    if (badgeName) { return badgeName; }
+    return this.blank("data.topic_title") ? "" : this.safe("data.topic_title");
+  }.property("data.@{badge_name, topic_title}")
 
-    var url = Discourse.Utilities.postUrl(this.safe("slug"), this.safe("topic_id"), this.safe("post_number"));
-    return '<a href="' + url + '">' + this.safe("data.topic_title") + '</a>';
-  }.property()
 });

app/assets/stylesheets/common/base/header.scss

@@ -196,16 +196,21 @@
 
   // Notifications
   &#notifications-dropdown {
-    .fa {
+    .fa { color: scale-color($primary, $lightness: 50%); }
-      color: scale-color($primary, $lightness: 50%);
+    .icon { color: scale-color($primary, $lightness: 30%); }
-    }
     li {
       background-color: scale-color($tertiary, $lightness: 90%);
-      padding: 5px;
+      padding: 5px 0 0 5px;
-      &:hover a {background: transparent;}
+      i {
-    a {
+        float: left;
-      display: inline;
+        margin-right: 5px;
-      padding: 1px;
+      }
+      span { color: $primary; }
+      &:hover a { background: transparent; }
+      a { padding: 1px; }
+      p {
+        margin: 0;
+        overflow: hidden;
       }
     }
     .read {

config/locales/client.en.yml

@@ -671,19 +671,19 @@ en:
       title: "notifications of @name mentions, replies to your posts and topics, private messages, etc"
       none: "You have no notifications right now."
       more: "view older notifications"
-      mentioned: "<span title='mentioned' class='icon'>@</span> {{username}} {{link}}"
-      quoted: "<i title='quoted' class='fa fa-quote-right'></i> {{username}} {{link}}"
-      replied: "<i title='replied' class='fa fa-reply'></i> {{username}} {{link}}"
-      posted: "<i title='replied' class='fa fa-reply'></i> {{username}} {{link}}"
-      edited: "<i title='edited' class='fa fa-pencil'></i> {{username}} {{link}}"
-      liked: "<i title='liked' class='fa fa-heart'></i> {{username}} {{link}}"
-      private_message: "<i class='fa fa-envelope-o' title='private message'></i> {{username}} {{link}}"
-      invited_to_private_message: "<i class='fa fa-envelope-o' title='private message'></i> {{username}} {{link}}"
-      invitee_accepted: "<i title='accepted your invitation' class='fa fa-user'></i> {{username}} accepted your invitation"
-      moved_post: "<i title='moved post' class='fa fa-sign-out'></i> {{username}} moved {{link}}"
       total_flagged: "total flagged posts"
-      linked: "<i title='linked post' class='fa fa-arrow-left'></i> {{username}} {{link}}"
+      mentioned: "<i title='mentioned' class='icon'>@</i><p><span>{{username}}</span> {{description}}</p>"
-      granted_badge: "<i title='badge granted' class='fa fa-certificate'></i> You were granted {{link}}"
+      quoted: "<i title='quoted' class='fa fa-quote-right'></i><p><span>{{username}}</span> {{description}}</p>"
+      replied: "<i title='replied' class='fa fa-reply'></i><p><span>{{username}}</span> {{description}}</p>"
+      posted: "<i title='replied' class='fa fa-reply'></i><p><span>{{username}}</span> {{description}}</p>"
+      edited: "<i title='edited' class='fa fa-pencil'></i><p><span>{{username}}</span> {{description}}</p>"
+      liked: "<i title='liked' class='fa fa-heart'></i><p><span>{{username}}</span> {{description}}</p>"
+      private_message: "<i title='private message' class='fa fa-envelope-o'></i><p><span>{{username}}</span> {{description}}</p>"
+      invited_to_private_message: "<i title='private message' class='fa fa-envelope-o'></i><p><span>{{username}}</span> {{description}}</p>"
+      invitee_accepted: "<i title='accepted your invitation' class='fa fa-user'></i><p><span>{{username}}</span> accepted your invitation</p>"
+      moved_post: "<i title='moved post' class='fa fa-sign-out'></i><p><span>{{username}}</span> moved {{description}}</p>"
+      linked: "<i title='linked post' class='fa fa-arrow-left'></i><p><span>{{username}}</span> {{description}}</p>"
+      granted_badge: "<i title='badge granted' class='fa fa-certificate'></i><p>You were granted {{description}}</p>"
 
     upload_selector:
       title: "Add an image"

test/javascripts/controllers/notification-test.js.es6

@@ -21,14 +21,31 @@ test("username property is correct", function() {
   equal(controller.get("username"), "velesin");
 });
 
-test("link property returns empty string when there is no topic title", function() {
+test("description property returns badge name when there is one", function() {
-  var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, {data: {topic_title: ""}});
+  var fixtureWithBadgeName = _.extend({}, notificationFixture, { data: { badge_name: "badge" } });
-  var controller = this.subject(fixtureWithEmptyTopicTitle);
+  var controller = this.subject(fixtureWithBadgeName);
-  equal(controller.get("link"), "");
+  equal(controller.get("description"), "badge");
 });
 
-test("link property returns correctly built link when there is a topic title", function() {
+test("description property returns empty string when there is no topic title", function() {
-  var controller = this.subject(notificationFixture);
+  var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, { data: { topic_title: "" } });
-  ok(controller.get("link").indexOf('/t/a-slug/1234') !== -1, 'has the correct URL');
+  var controller = this.subject(fixtureWithEmptyTopicTitle);
-  ok(controller.get("link").indexOf('some title') !== -1, 'has the correct title');
+  equal(controller.get("description"), "");
+});
+
+test("description property returns topic title", function() {
+  var fixtureWithTopicTitle = _.extend({}, notificationFixture, { data: { topic_title: "topic" } });
+  var controller = this.subject(fixtureWithTopicTitle);
+  equal(controller.get("description"), "topic");
+});
+
+test("url property returns badge's url when there is a badge", function() {
+  var fixtureWithBadge = _.extend({}, notificationFixture, { data: { badge_id: 1, badge_name: "Badge Name"} });
+  var controller = this.subject(fixtureWithBadge);
+  equal(controller.get("url"), "/badges/1/badge-name");
+});
+
+test("url property returns topic's url when there is a topic", function() {
+  var controller = this.subject(notificationFixture);
+  equal(controller.get("url"), "/t/a-slug/1234");
 });