From 3330f5907cf2efad7531d16839289fd293682cab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9gis=20Hanol?= Date: Tue, 5 Aug 2014 23:36:37 +0200 Subject: [PATCH] FEATURE: restructure notification HTML layout --- .../components/notification-item.js.es6 | 5 ++- .../discourse/controllers/notification.js.es6 | 38 +++++++++---------- .../stylesheets/common/base/header.scss | 21 ++++++---- config/locales/client.en.yml | 24 ++++++------ .../controllers/notification-test.js.es6 | 33 ++++++++++++---- 5 files changed, 71 insertions(+), 50 deletions(-) diff --git a/app/assets/javascripts/discourse/components/notification-item.js.es6 b/app/assets/javascripts/discourse/components/notification-item.js.es6 index 81d8629cf..40bf11f02 100644 --- a/app/assets/javascripts/discourse/components/notification-item.js.es6 +++ b/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')); - buffer.push('' + text + ''); + text = I18n.t(this.get('scope'), Em.getProperties(notification, 'description', 'username')); + + buffer.push('' + text + ''); } }); diff --git a/app/assets/javascripts/discourse/controllers/notification.js.es6 b/app/assets/javascripts/discourse/controllers/notification.js.es6 index eaf9d8354..f4d6e970d 100644 --- a/app/assets/javascripts/discourse/controllers/notification.js.es6 +++ b/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() { - return this.get("data.display_username"); - }.property(), + username: Em.computed.alias("data.display_username"), - safe: function(prop){ + safe: function (prop) { var val = this.get(prop); - if(val) { - val = Handlebars.Utils.escapeExpression(val); - } + if (val) { val = Handlebars.Utils.escapeExpression(val); } return val; }, - link: function() { - - var badgeId = this.safe('data.badge_id'); + url: function () { + var badgeId = this.safe("data.badge_id"); if (badgeId) { - var badgeName = this.safe('data.badge_name'); - return '' + badgeName + ''; + var badgeName = this.safe("data.badge_name"); + 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")) { - return ""; - } + description: function () { + 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 '' + this.safe("data.topic_title") + ''; - }.property() }); diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 37f6ec11c..b26a78e3a 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -196,16 +196,21 @@ // Notifications &#notifications-dropdown { - .fa { - color: scale-color($primary, $lightness: 50%); - } + .fa { color: scale-color($primary, $lightness: 50%); } + .icon { color: scale-color($primary, $lightness: 30%); } li { background-color: scale-color($tertiary, $lightness: 90%); - padding: 5px; - &:hover a {background: transparent;} - a { - display: inline; - padding: 1px; + padding: 5px 0 0 5px; + i { + float: left; + margin-right: 5px; + } + span { color: $primary; } + &:hover a { background: transparent; } + a { padding: 1px; } + p { + margin: 0; + overflow: hidden; } } .read { diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 8277d4fde..1c44a2e94 100644 --- a/config/locales/client.en.yml +++ b/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: "@ {{username}} {{link}}" - quoted: " {{username}} {{link}}" - replied: " {{username}} {{link}}" - posted: " {{username}} {{link}}" - edited: " {{username}} {{link}}" - liked: " {{username}} {{link}}" - private_message: " {{username}} {{link}}" - invited_to_private_message: " {{username}} {{link}}" - invitee_accepted: " {{username}} accepted your invitation" - moved_post: " {{username}} moved {{link}}" total_flagged: "total flagged posts" - linked: " {{username}} {{link}}" - granted_badge: " You were granted {{link}}" + mentioned: "@

{{username}} {{description}}

" + quoted: "

{{username}} {{description}}

" + replied: "

{{username}} {{description}}

" + posted: "

{{username}} {{description}}

" + edited: "

{{username}} {{description}}

" + liked: "

{{username}} {{description}}

" + private_message: "

{{username}} {{description}}

" + invited_to_private_message: "

{{username}} {{description}}

" + invitee_accepted: "

{{username}} accepted your invitation

" + moved_post: "

{{username}} moved {{description}}

" + linked: "

{{username}} {{description}}

" + granted_badge: "

You were granted {{description}}

" upload_selector: title: "Add an image" diff --git a/test/javascripts/controllers/notification-test.js.es6 b/test/javascripts/controllers/notification-test.js.es6 index 1481593ee..45efb0992 100644 --- a/test/javascripts/controllers/notification-test.js.es6 +++ b/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() { - var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, {data: {topic_title: ""}}); - var controller = this.subject(fixtureWithEmptyTopicTitle); - equal(controller.get("link"), ""); +test("description property returns badge name when there is one", function() { + var fixtureWithBadgeName = _.extend({}, notificationFixture, { data: { badge_name: "badge" } }); + var controller = this.subject(fixtureWithBadgeName); + equal(controller.get("description"), "badge"); }); -test("link property returns correctly built link when there is a topic title", function() { - var controller = this.subject(notificationFixture); - ok(controller.get("link").indexOf('/t/a-slug/1234') !== -1, 'has the correct URL'); - ok(controller.get("link").indexOf('some title') !== -1, 'has the correct title'); +test("description property returns empty string when there is no topic title", function() { + var fixtureWithEmptyTopicTitle = _.extend({}, notificationFixture, { data: { topic_title: "" } }); + var controller = this.subject(fixtureWithEmptyTopicTitle); + 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"); });