FEATURE: remove category badge style options, set bullet style as default (#24198)

lib/category_badge.rb

@@ -1,31 +1,6 @@
 # frozen_string_literal: true
 
 module CategoryBadge
-  def self.category_stripe(color, classes)
-    style = color ? "style='background-color: ##{color};'" : ""
-    "<span class='#{classes}' #{style}></span>"
-  end
-
-  def self.inline_category_stripe(color, styles = "", insert_blank = false)
-    "<span style='background-color: ##{color};#{styles}'>#{insert_blank ? "&nbsp;" : ""}</span>"
-  end
-
-  def self.inline_badge_wrapper_style(category)
-    style =
-      case (SiteSetting.category_style || :box).to_sym
-      when :bar
-        "line-height: 1.25; margin-right: 5px;"
-      when :box
-        "background-color:##{category.color}; line-height: 1.5; margin-top: 5px; margin-right: 5px;"
-      when :bullet
-        "line-height: 1; margin-right: 10px;"
-      when :none
-        ""
-      end
-
-    " style='font-size: 0.857em; white-space: nowrap; display: inline-block; position: relative; #{style}'"
-  end
-
   def self.html_for(category, opts = nil)
     opts = opts || {}
 
@@ -35,90 +10,32 @@ module CategoryBadge
     # By default hide uncategorized
     return "" if category.uncategorized? && !opts[:show_uncategorized]
 
-    extra_classes = "#{opts[:extra_classes]} #{SiteSetting.category_style}"
+    extra_classes = "#{opts[:extra_classes]}"
 
     result = +""
 
-    # parent span
-    unless category.parent_category_id.nil? || opts[:hide_parent]
-      parent_category = Category.find_by(id: category.parent_category_id)
-      result << if opts[:inline_style]
-        case (SiteSetting.category_style || :box).to_sym
-        when :bar
-          inline_category_stripe(
-            parent_category.color,
-            "display: inline-block; padding: 1px;",
-            true,
-          )
-        when :box
-          inline_category_stripe(
-            parent_category.color,
-            "display: inline-block; padding: 0 1px;",
-            true,
-          )
-        when :bullet
-          inline_category_stripe(
-            parent_category.color,
-            "display: inline-block; width: 5px; height: 10px; line-height: 1;",
-          )
-        when :none
-          ""
-        end
-      else
-        category_stripe(parent_category.color, "badge-category-parent-bg")
-      end
-    end
-
-    # sub parent or main category span
-    result << if opts[:inline_style]
-      case (SiteSetting.category_style || :box).to_sym
-      when :bar
-        inline_category_stripe(category.color, "display: inline-block; padding: 1px;", true)
-      when :box
-        ""
-      when :bullet
-        inline_category_stripe(
-          category.color,
-          "display: inline-block; width: #{category.parent_category_id.nil? ? 10 : 5}px; height: 10px;",
-        )
-      when :none
-        ""
-      end
-    else
-      category_stripe(category.color, "badge-category-bg")
-    end
+    # parent class
+    parent_category =
+      Category.find_by(id: category.parent_category_id) unless category.parent_category_id.nil?
+    has_parent_class = parent_category ? "--has-parent" : ""
 
     # category name
-    class_names = "badge-category clear-badge"
+    class_names = "badge-category #{has_parent_class}"
     description = category.description_text ? "title='#{category.description_text}'" : ""
     category_url =
       opts[:absolute_url] ? "#{Discourse.base_url_no_prefix}#{category.url}" : category.url
 
-    extra_span_classes =
-      if opts[:inline_style]
-        case (SiteSetting.category_style || :box).to_sym
-        when :bar
-          "color: #222222; padding: 3px; vertical-align: text-top; margin-top: -3px; display: inline-block;"
-        when :box
-          "color: ##{category.text_color}; padding: 0 5px;"
-        when :bullet
-          "color: #222222; vertical-align: text-top; line-height: 1; margin-left: 4px; padding-left: 2px; display: inline;"
-        when :none
-          ""
-        end + "max-width: 150px; overflow: hidden; text-overflow: ellipsis;"
-      elsif (SiteSetting.category_style).to_sym == :box
-        "color: ##{category.text_color}"
-      else
-        ""
-      end
-    result << "<span style='#{extra_span_classes}' data-drop-close='true' class='#{class_names}'
-                 #{description}>"
-
-    result << ERB::Util.html_escape(category.name) << "</span>"
+    # category badge structure
+    result << "<span data-category-id='#{category.id}'"
+    result << " data-parent-category-id='#{parent_category.id}'" if parent_category
+    result << " data-drop-close='true' class='#{class_names}' #{description}>"
+    result << "<span class='badge-category__name'>"
+    result << ERB::Util.html_escape(category.name)
+    result << "</span></span>"
 
+    # wrapping link
     result =
-      "<a class='badge-wrapper #{extra_classes}' href='#{category_url}'" +
-        (opts[:inline_style] ? inline_badge_wrapper_style(category) : "") + ">#{result}</a>"
+      "<a class='badge-category__wrapper #{extra_classes}' href='#{category_url}'>#{result}</a>"
 
     result.html_safe
   end

lib/onebox/templates/discourse_category_onebox.mustache

@@ -4,11 +4,9 @@
       <img src="{{logo_url}}" class="thumbnail" />
     {{/logo_url}}
     <h3>
-      <a class="badge-wrapper bullet" href="{{url}}">
-        {{#color}}
-          <span class="badge-category-bg" style="background-color: #{{color}}"></span>
-        {{/color}}
-        <span class="clear-badge"><span>{{name}}</span></span>
+      <a class="badge-category__wrapper" href="{{url}}">
+         <span class="badge-category__name">{{{name}}}</span>
+       </span>
       </a>
     </h3>
     {{#description}}
@@ -22,9 +20,9 @@
       <div class="subcategories">
         {{#subcategories}}
           <span class="subcategory">
-            <a class="badge-wrapper bullet" href="{{url}}">
-              <span class="badge-category-bg" style="background-color: #{{color}}"></span>
-              <span class="badge-category clear-badge"><span class="category-name">{{name}}</span></span>
+            <a class="badge-category__wrapper" href="{{url}}">
+              <span class="badge-category-bg" style="background-color: #{{{color}}}"></span>
+              <span class="badge-category clear-badge"><span class="category-name">{{{name}}}</span></span>
             </a>
           </span>
         {{/subcategories}}