UX: When oneboxing a topic, use the stripe category badge

app/helpers/user_notifications_helper.rb

@@ -1,3 +1,5 @@
+require_dependency 'category_badge'
+
 module UserNotificationsHelper
 
   def indent(text, by=2)
@@ -59,21 +61,6 @@ module UserNotificationsHelper
   end
 
   def email_category(category, opts=nil)
-    opts = opts || {}
-
-    # If there is no category, bail
-    return "" if category.blank?
-
-    # By default hide uncategorized
-    return "" if category.uncategorized? && !opts[:show_uncategorized]
-
-    result = ""
-
-    category_url = "#{Discourse.base_url}#{category.url}"
-
-    result << "<a href='#{category_url}' style='background-color: ##{category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
-    result << "<a href='#{category_url}' style='font-size: 12px; font-weight: bold; margin-left: 3px; color: #222;'>#{category.name}</a>"
-
-    result.html_safe
+    CategoryBadge.html_for(category, opts).html_safe
   end
 end

lib/category_badge.rb

@@ -0,0 +1,28 @@
+module CategoryBadge
+
+  def self.html_for(category, opts=nil)
+    opts = opts || {}
+
+    # If there is no category, bail
+    return "" if category.blank?
+
+    # By default hide uncategorized
+    return "" if category.uncategorized? && !opts[:show_uncategorized]
+
+    category_url = "#{Discourse.base_url}#{category.url}"
+
+    result = ""
+
+    result << "<a href='#{category_url}' style='background-color: ##{category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
+
+    unless category.parent_category_id.nil?
+      parent_category = Category.find_by(id: category.parent_category_id)
+      result << "<a href='#{category_url}' style='background-color: ##{parent_category.color}; font-size: 12px; padding: 2px 1px; font-weight: bold; margin: 0; width: 2px; white-space:nowrap;'>&nbsp;</a>"
+    end
+
+    result << "<a href='#{category_url}' style='font-size: 12px; font-weight: bold; margin-left: 3px; color: #222;'>#{category.name}</a>"
+
+    "<span class='badge-wrapper'>#{result}</span>"
+  end
+
+end

lib/onebox/engine/discourse_local_onebox.rb

@@ -14,7 +14,6 @@ module Onebox
         uri = URI::parse(@url)
         route = Rails.application.routes.recognize_path(uri.path)
 
-        args = {original_url: @url}
 
         # Figure out what kind of onebox to show based on the URL
         case route[:controller]
@@ -57,37 +56,23 @@ module Onebox
               }
             end
 
-            category_name = ''
-            parent_category_name = ''
-            category = topic.category
-            if category && !category.uncategorized?
-              category_name = "<a href=\"#{category.url}\" class=\"badge badge-category\" style=\"background-color: ##{category.color}; color: ##{category.text_color}\">#{category.name}</a>"
-              if !category.parent_category_id.nil?
-                parent_category = Category.find_by(id: category.parent_category_id)
-                parent_category_name = "<a href=\"#{parent_category.url}\" class=\"badge badge-category\" style=\"background-color: ##{parent_category.color}; color: ##{parent_category.text_color}\">#{parent_category.name}</a>"
-              end
-            end
-
             quote = post.excerpt(SiteSetting.post_onebox_maxlength)
-            args.merge! title: topic.title,
-                        avatar: PrettyText.avatar_img(topic.user.avatar_template, 'tiny'),
-                        posts_count: topic.posts_count,
-                        last_post: FreedomPatches::Rails4.time_ago_in_words(topic.last_posted_at, false, scope: :'datetime.distance_in_words_verbose'),
-                        age: FreedomPatches::Rails4.time_ago_in_words(topic.created_at, false, scope: :'datetime.distance_in_words_verbose'),
-                        views: topic.views,
-                        posters: posters,
-                        quote: quote,
-                        category_name: category_name,
-                        parent_category_name: parent_category_name,
-                        topic: topic.id
+            args = { original_url: @url,
+                     title: topic.title,
+                     avatar: PrettyText.avatar_img(topic.user.avatar_template, 'tiny'),
+                     posts_count: topic.posts_count,
+                     last_post: FreedomPatches::Rails4.time_ago_in_words(topic.last_posted_at, false, scope: :'datetime.distance_in_words_verbose'),
+                     age: FreedomPatches::Rails4.time_ago_in_words(topic.created_at, false, scope: :'datetime.distance_in_words_verbose'),
+                     views: topic.views,
+                     posters: posters,
+                     quote: quote,
+                     category_html: CategoryBadge.html_for(topic.category),
+                     topic: topic.id }
 
-            @template = 'topic'
+            return Mustache.render(File.read("#{Rails.root}/lib/onebox/templates/discourse_topic_onebox.hbs"), args)
           end
-
         end
 
-        return nil unless @template
-        Mustache.render(File.read("#{Rails.root}/lib/onebox/templates/discourse_#{@template}_onebox.hbs"), args)
       rescue ActionController::RoutingError
         nil
       end

lib/onebox/templates/discourse_topic_onebox.hbs

@@ -2,7 +2,7 @@
   <div class='title'>
     <div class='quote-controls'></div>
     {{{avatar}}}
-    <a href="{{original_url}}">{{title}}</a> {{{parent_category_name}}} {{{category_name}}}
+    <a href="{{original_url}}">{{title}}</a> {{{category_html}}}
   </div>
   <blockquote>{{{quote}}}
     <div class='topic-info'>