github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 10:59:51 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FEATURE: restructure notification HTML layout

Browse Source
This commit is contained in:
Régis Hanol 2014-08-05 23:36:37 +02:00
parent c2ed765396
commit 3330f5907c
5 changed files with 71 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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('<span>' + text + '</span>');
text = I18n.t(this.get('scope'), Em.getProperties(notification, 'description', 'username'));
buffer.push('<a href="' + notification.get('url') + '">' + text + '</a>');
}
});

38
app/assets/javascripts/discourse/controllers/notification.js.es6
View File

@ -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 '<a href="/badges/' + badgeId + '/' + badgeName.replace(/[^A-Za-z0-9_]+/g, '-').toLowerCase() + '">' + badgeName + '</a>';
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 '<a href="' + url + '">' + this.safe("data.topic_title") + '</a>';
}.property()
});

21
app/assets/stylesheets/common/base/header.scss
View File

@ -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 {

24
config/locales/client.en.yml
View File

@ -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}}"
granted_badge: "<i title='badge granted' class='fa fa-certificate'></i> You were granted {{link}}"
mentioned: "<i title='mentioned' class='icon'>@</i><p><span>{{username}}</span> {{description}}</p>"
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"

33
test/javascripts/controllers/notification-test.js.es6
View File

@ -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");
});