FEATURE: allow simple selection for category badge styles

clean up category badge styling

app/assets/javascripts/admin/templates/site_settings/setting_enum.hbs

@@ -3,6 +3,7 @@
 </div>
 <div class="setting-value">
   {{combo-box valueAttribute="value" content=validValues value=value none=allowsNone}}
+  {{view.preview}}
   <div class='desc'>{{unbound description}}</div>
 </div>
 {{#if dirty}}

app/assets/javascripts/admin/views/site_setting_view.js

@@ -9,6 +9,16 @@
 Discourse.SiteSettingView = Discourse.View.extend(Discourse.ScrollTop, {
   classNameBindings: [':row', ':setting', 'content.overridden'],
 
+  preview: function() {
+    var preview = this.get('content.preview');
+    if(preview){
+      return new Handlebars.SafeString("<div class='preview'>" +
+                                        preview.replace("{{value}}",this.get('content.value')) +
+                                        "</div>"
+                                        );
+    }
+  }.property('content.value'),
+
   templateName: function() {
     // If we're editing a boolean, show a checkbox
     if (this.get('content.type') === 'bool') return 'admin/templates/site_settings/setting_bool';

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -4,13 +4,9 @@ import { iconHTML } from 'discourse/helpers/fa-icon';
 var get = Em.get,
     escapeExpression = Handlebars.Utils.escapeExpression;
 
-function categoryStripe(tagName, category, extraClasses, href) {
-  if (!category) { return ""; }
-
-  var color = Em.get(category, 'color'),
-      style = color ? "style='background-color: #" + color + ";'" : "";
-
-  return "<" + tagName + " class='badge-category-parent" + extraClasses + "' " + style + " href=\"" + href + "\"></" + tagName + ">";
+function categoryStripe(color, classes) {
+  var style = color ? "style='background-color: #" + color + ";'" : "";
+  return "<span class='" + classes + "' " + style + "></span>";
 }
 
 export function categoryBadgeHTML(category, opts) {
@@ -28,35 +24,44 @@ export function categoryBadgeHTML(category, opts) {
       url = Discourse.getURL("/c/") + Discourse.Category.slugFor(category),
       href = (opts.link === false ? '' : url),
       tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a'),
-      extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : '');
+      extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''),
+      color = get(category, 'color'),
+      html = "",
+      parentCat = null;
 
-  var html = "";
-
-  var parentCat = Discourse.Category.findById(get(category, 'parent_category_id'));
-  if (opts.hideParent) { parentCat = null; }
-  html += categoryStripe(tagName, parentCat, extraClasses, href);
-
-  if (parentCat !== category) {
-    html += categoryStripe(tagName, category, extraClasses, href);
+  if (!opts.hideParent) {
+    parentCat = Discourse.Category.findById(get(category, 'parent_category_id'));
   }
 
-  var classNames = "badge-category clear-badge" + extraClasses;
+  if (parentCat && parentCat !== category) {
+    html += categoryStripe(get(parentCat,'color'), "badge-category-parent-bg");
+  }
+
+  html += categoryStripe(color, "badge-category-bg");
+
+  var classNames = "badge-category clear-badge";
   if (restricted) { classNames += " restricted"; }
 
-  html += "<" + tagName + ' href="' + href + '" ' +
+  var textColor = "#" + get(category, 'text_color');
+
+  html += "<span" + ' style="color: ' + textColor + ';" '+
              'data-drop-close="true" class="' + classNames + '"' +
              (description ? 'title="' + escapeExpression(description) + '" ' : '') +
           ">";
 
   var name = escapeExpression(get(category, 'name'));
   if (restricted) {
-    html += "<div>" + iconHTML('lock') + " " + name + "</div>";
+    html += "<span>" + iconHTML('lock') + " " + name + "</span>";
   } else {
     html += name;
   }
-  html += "</" + tagName + ">";
+  html += "</span>";
 
-  return "<span class='badge-wrapper'>" + html + "</span>";
+  if(href){
+    href = " href='" + href + "' ";
+  }
+
+  return "<" + tagName + " class='badge-wrapper " + Discourse.SiteSettings.category_style + extraClasses + "' " + href + ">" + html + "</" + tagName + ">";
 }
 
 export function categoryLinkHTML(category, options) {

app/assets/stylesheets/common/admin/admin_base.scss

@@ -1436,3 +1436,7 @@ tr.not-activated {
     }
   }
 }
+
+.preview {
+ margin-top: 5px;
+}

app/assets/stylesheets/common/components/badges.css.scss

@@ -15,26 +15,31 @@
 // Category badge
 // --------------------------------------------------
 
-.badge-category, .badge-category-parent {
+.badge-wrapper span {
   font-size: 0.857em;
   font-weight: bold;
   white-space: nowrap;
   display: inline-block;
   line-height: 1;
+  position: relative;
 }
+
 .badge-wrapper {
   white-space: nowrap;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
 }
 
 .badge-category {
-  padding: 6px;
-  color: $primary;
-  &[href] {
-  color: $primary;
-  }
+  padding: 0;
+  left: 3px;
+  top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.badge-category-parent {
+.badge-category-parent-bg, .badge-category-bg {
   padding: 6px 2px;
   width: 2px;
   .category-name {
@@ -47,7 +52,7 @@
 
 .d-dropdown .badge-category {
 &.restricted {
-    div {
+    span {
       display: inline-block;
       margin: 0;
     }
@@ -55,6 +60,26 @@
 
 h1 a.badge-category div {vertical-align: top;}
 
+// specific styles for badge categories
+
+.badge-wrapper.bar {
+  .badge-category {
+    color: $primary !important;
+  }
+}
+
+
+.badge-wrapper.box {
+  .badge-category-bg {
+    position: absolute;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+}
+
+
 
 // Notification badge
 // --------------------------------------------------

app/models/category_style_setting.rb

@@ -0,0 +1,19 @@
+# TODO all enums should probably move out of models
+# TODO we should be able to do this kind of stuff without a backing class
+require_dependency 'enum_site_setting'
+
+class CategoryStyleSetting < EnumSiteSetting
+
+  VALUES = ["bar", "box"]
+
+  def self.valid_value?(val)
+    VALUES.include?(val)
+  end
+
+  def self.values
+    VALUES.map do |l|
+      {name: l, value: l}
+    end
+  end
+
+end

config/locales/server.en.yml

@@ -912,6 +912,7 @@ en:
     min_body_similar_length: "The minimum length of a post's body before it will be checked for similar topics."
 
     category_colors: "A list of hexadecimal color values allowed for categories."
+    category_style: "Visual style for category badges."
 
     max_image_size_kb: "The maximum image upload size in kB. This must be configured in nginx (client_max_body_size) / apache or proxy as well."
     max_attachment_size_kb: "The maximum attachment files upload size in kB. This must be configured in nginx (client_max_body_size) / apache or proxy as well."

config/site_settings.yml

@@ -132,6 +132,11 @@ basic:
     client: true
     type: list
     default: 'BF1E2E|F1592A|F7941D|9EB83B|3AB54A|12A89D|25AAE2|0E76BD|652D90|92278F|ED207B|8C6238|231F20|808281|B3B5B4|283890'
+  category_style:
+    client: true
+    default: 'bar'
+    enum: 'CategoryStyleSetting'
+    preview: '<span class="badge-wrapper {{value}}"><span class="badge-category-parent-bg" style="background-color: #aaa;"></span><span class="badge-category-bg" style="background-color: #777;"></span><span style="color: #fff;" data-drop-close="true" class="badge-category clear-badge">Category</span></span>'
   enable_mobile_theme:
     client: true
     default: true

lib/site_setting_extension.rb

@@ -54,6 +54,10 @@ module SiteSettingExtension
     @refresh_settings ||= []
   end
 
+  def previews
+    @previews ||= {}
+  end
+
   def validators
     @validators ||= {}
   end
@@ -79,10 +83,15 @@ module SiteSettingExtension
       if opts[:hidden]
         hidden_settings << name
       end
+
       if opts[:refresh]
         refresh_settings << name
       end
 
+      if opts[:preview]
+        previews[name] = opts[:preview]
+      end
+
       if validator_type = validator_for(opts[:type] || get_data_type(name, defaults[name]))
         validators[name] = {class: validator_type, opts: opts}
       end
@@ -134,7 +143,8 @@ module SiteSettingExtension
           default: v.to_s,
           type: type.to_s,
           value: value.to_s,
-          category: categories[s]
+          category: categories[s],
+          preview: previews[s]
         }
         opts.merge!({valid_values: enum_class(s).values, translate_names: enum_class(s).translate_names?}) if type == :enum
         opts[:choices] = choices[s] if choices.has_key? s