UX: Remove background color from new badge. DRY up lots of repeated code

for rendering badges on topics.

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'));
+  }
+});

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}}
+              {{topic-post-badges unread=unread
-                <a href="{{unbound topic.lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unbound topic.unread}}</a>
+                                  newPosts=topic.new_posts
-              {{/if}}
+                                  unseen=topic.unseen
-              {{#if topic.new_posts}}
+                                  url=topic.lastUnreadUrl}}
-                <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}}
             </td>
 
             {{#unless controller.hideCategory}}

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}}
+                {{topic-post-badges unread=totalUnread unseen=unseen url=lastUnreadUrl}}
-                  <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}}
 
                 {{#if controller.latestTopicOnly}}
                   <div class='last-user-info'>

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}}
+  {{topic-post-badges unread=unread newPosts=displayNewPosts unseen=unseen url=lastUnreadUrl}}
-    <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}}
 
   {{#if hasExcerpt}}
     <div class="topic-excerpt">

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>
+              {{topic-post-badges unread=unread
-              {{/if}}
+                                  newPosts=topic.new_posts
-              {{#if displayNewPosts}}
+                                  unseen=topic.unseen
-                <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new_posts count="displayNewPosts"}}'>{{displayNewPosts}}</a>
+                                  url=topic.lastUnreadUrl}}
-              {{/if}}
+
-              {{#if unseen}}
-                <a href="{{lastUnreadUrl}}" class='badge new-posts badge-notification' title='{{i18n topic.new}}'><i class='fa fa-asterisk'></i></a>
-              {{/if}}
               {{#if hasExcerpt}}
                 <div class="topic-excerpt">
                   {{excerpt}}

app/assets/javascripts/discourse/templates/mobile/discovery/categories.js.handlebars

@@ -22,16 +22,7 @@
               {{topic-status topic=this}}
               {{{topic-link this}}}
 
-              {{#if unread}}
+              {{topic-post-badges unread=unread newPosts=new_posts unseen=unseen url=lastUnreadUrl}}
-                <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}}
-
               {{#if hasExcerpt}}
                 <div class="topic-excerpt">
                   {{{excerpt}}}

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}}
+  {{topic-post-badges unread=unread
-    <a href="{{lastUnreadUrl}}" class='badge unread badge-notification' title='{{i18n topic.unread_posts count="unread"}}'>{{unread}}</a>
+                      newPosts=displayNewPosts
-  {{/if}}
+                      unseen=unseen
-  {{#if displayNewPosts}}
+                      url=lastUnreadUrl}}
-    <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}}
 
   {{#if hasExcerpt}}
     <div class="topic-excerpt">

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