From 0b6c84e2929987372d6bbf2711925baddd8381c6 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 3 Sep 2014 12:22:18 -0400
Subject: [PATCH] UX: Remove background color from new badge. DRY up lots of
 repeated code for rendering badges on topics.

---
 .../components/topic-post-badges.js.es6       | 22 +++++++++++++++++++
 .../components/basic-topic-list.js.handlebars | 13 ++++-------
 .../discovery/categories.js.handlebars        |  7 +-----
 .../list/topic_list_item.js.handlebars        | 10 +--------
 .../components/basic-topic-list.js.handlebars | 15 +++++--------
 .../mobile/discovery/categories.js.handlebars | 11 +---------
 .../mobile/list/topic_list_item.js.handlebars | 13 ++++-------
 .../common/components/badges.css.scss         |  6 ++++-
 8 files changed, 44 insertions(+), 53 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/topic-post-badges.js.es6

diff --git a/app/assets/javascripts/discourse/components/topic-post-badges.js.es6 b/app/assets/javascripts/discourse/components/topic-post-badges.js.es6
new file mode 100644
index 00000000000..cf21baa2a41
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/topic-post-badges.js.es6
@@ -0,0 +1,22 @@
+
+// Creates a link
+function link(buffer, prop, url, cssClass, i18nKey, text) {
+  if (!prop) { return; }
+
+  var title = I18n.t("topic." + i18nKey, {count: prop});
+  buffer.push("<a href='" + url + "' class='badge " + cssClass + " badge-notification' title='" + title + "'>" + (text || prop) + "</a>\n");
+}
+
+export default Ember.Component.extend({
+  tagName: 'span',
+  classNameBindings: [':topic-post-badges'],
+  _shouldRerender: Discourse.View.renderIfChanged('url', 'unread', 'newPosts', 'unseen'),
+
+  render: function(buffer) {
+    var url = this.get('url');
+
+    link(buffer, this.get('unread'), url, 'unread', 'unread_posts');
+    link(buffer, this.get('newPosts'), url, 'new-posts', 'new_posts');
+    link(buffer, this.get('unseen'), url, 'new-topic', 'new', I18n.t('filters.new.lower_title'));
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars b/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars
index 25ea859ea92..4cfb562989c 100644
--- a/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/components/basic-topic-list.js.handlebars
@@ -22,15 +22,10 @@
             <td class='main-link'>
               {{topic-status topic=topic}}
               <a class='title' href="{{unbound topic.lastUnreadUrl}}">{{{unbound topic.fancy_title}}}</a>
-              {{#if unread}}
-                <a href="{{unbound topic.lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unbound topic.unread}}</a>
-              {{/if}}
-              {{#if topic.new_posts}}
-                <a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{unbound topic.new_posts}}</a>
-              {{/if}}
-              {{#if topic.unseen}}
-                <a href="{{unbound topic.lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>{{i18n filters.new.lower_title}}</a>
-              {{/if}}
+              {{topic-post-badges unread=unread
+                                  newPosts=topic.new_posts
+                                  unseen=topic.unseen
+                                  url=topic.lastUnreadUrl}}
             </td>
 
             {{#unless controller.hideCategory}}
diff --git a/app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars b/app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars
index b2360ab39b5..9acc57189dc 100644
--- a/app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/discovery/categories.js.handlebars
@@ -48,12 +48,7 @@
               <div class="featured-topic">
                 {{topic-status topic=this}}
                 <a class='title' href="{{unbound lastUnreadUrl}}">{{{unbound fancy_title}}}</a>
-                {{#if totalUnread}}
-                  <a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.total_unread_posts count="totalUnread"}}'>{{totalUnread}}</a>
-                {{/if}}
-                {{#if unseen}}
-                  <a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>{{i18n filters.new.lower_title}}</a>
-                {{/if}}
+                {{topic-post-badges unread=totalUnread unseen=unseen url=lastUnreadUrl}}
 
                 {{#if controller.latestTopicOnly}}
                   <div class='last-user-info'>
diff --git a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
index 825c91db5af..f7d0277f73e 100644
--- a/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/list/topic_list_item.js.handlebars
@@ -13,15 +13,7 @@
 <td class='main-link clearfix' {{bind-attr colspan="titleColSpan"}}>
   {{topic-status topic=this.model}}
   {{{topic-link this}}}
-  {{#if unread}}
-    <a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
-  {{/if}}
-  {{#if displayNewPosts}}
-    <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
-  {{/if}}
-  {{#if unseen}}
-    <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'>{{i18n filters.new.lower_title}}</a>
-  {{/if}}
+  {{topic-post-badges unread=unread newPosts=displayNewPosts unseen=unseen url=lastUnreadUrl}}
 
   {{#if hasExcerpt}}
     <div class="topic-excerpt">
diff --git a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars
index 6f83f79a301..d5c1492fa48 100644
--- a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.js.handlebars
@@ -7,15 +7,12 @@
             <div class='main-link clearfix'>
               {{topic-status topic=this}}
               {{{topic-link this}}}
-              {{#if unread}}
-                <a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
-              {{/if}}
-              {{#if displayNewPosts}}
-                <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
-              {{/if}}
-              {{#if unseen}}
-                <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
-              {{/if}}
+
+              {{topic-post-badges unread=unread
+                                  newPosts=topic.new_posts
+                                  unseen=topic.unseen
+                                  url=topic.lastUnreadUrl}}
+
               {{#if hasExcerpt}}
                 <div class="topic-excerpt">
                   {{excerpt}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.js.handlebars
index f8214c91b3f..ebfdc0285f0 100644
--- a/app/assets/javascripts/discourse/templates/mobile/discovery/categories.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/mobile/discovery/categories.js.handlebars
@@ -22,16 +22,7 @@
               {{topic-status topic=this}}
               {{{topic-link this}}}
 
-              {{#if unread}}
-                <a href="{{unbound lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unbound unread}}</a>
-              {{/if}}
-              {{#if new_posts}}
-                <a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="new_posts"}}'>{{unbound new_posts}}</a>
-              {{/if}}
-              {{#if unseen}}
-                <a href="{{unbound lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
-              {{/if}}
-
+              {{topic-post-badges unread=unread newPosts=new_posts unseen=unseen url=lastUnreadUrl}}
               {{#if hasExcerpt}}
                 <div class="topic-excerpt">
                   {{{excerpt}}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars
index 7575f0a177f..a710a9f9f9c 100644
--- a/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/mobile/list/topic_list_item.js.handlebars
@@ -2,15 +2,10 @@
 <div class='main-link clearfix'>
   {{topic-status topic=this}}
   {{{topic-link this}}}
-  {{#if unread}}
-    <a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
-  {{/if}}
-  {{#if displayNewPosts}}
-    <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
-  {{/if}}
-  {{#if unseen}}
-    <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
-  {{/if}}
+  {{topic-post-badges unread=unread
+                      newPosts=displayNewPosts
+                      unseen=unseen
+                      url=lastUnreadUrl}}
 
   {{#if hasExcerpt}}
     <div class="topic-excerpt">
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index b3d916cdcb2..e33e1bbb1a5 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/app/assets/stylesheets/common/components/badges.css.scss
@@ -80,7 +80,11 @@ h1 a.badge-category div {vertical-align: top;}
     font-weight: normal;
   }
 
-
+  &.new-topic {
+    background-color: transparent;
+    color: scale-color($tertiary, $lightness: 50%);
+    font-weight: normal;
+  }
 
   // Click count