diff --git a/app/assets/javascripts/admin/templates/site_settings/setting_enum.hbs b/app/assets/javascripts/admin/templates/site_settings/setting_enum.hbs
index 9a9ff20fce1..b0f06e5b14e 100644
--- a/app/assets/javascripts/admin/templates/site_settings/setting_enum.hbs
+++ b/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}}
diff --git a/app/assets/javascripts/admin/views/site_setting_view.js b/app/assets/javascripts/admin/views/site_setting_view.js
index 0a3983bd24b..4f5719d17b1 100644
--- a/app/assets/javascripts/admin/views/site_setting_view.js
+++ b/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';
diff --git a/app/assets/javascripts/discourse/helpers/category-link.js.es6 b/app/assets/javascripts/discourse/helpers/category-link.js.es6
index 628771d424d..cff023f7364 100644
--- a/app/assets/javascripts/discourse/helpers/category-link.js.es6
+++ b/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) {
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 33ce6d2ef9a..7a9e50fdaee 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1436,3 +1436,7 @@ tr.not-activated {
}
}
}
+
+.preview {
+ margin-top: 5px;
+}
diff --git a/app/assets/stylesheets/common/components/badges.css.scss b/app/assets/stylesheets/common/components/badges.css.scss
index 0765de22a09..5ae23cbb5a7 100644
--- a/app/assets/stylesheets/common/components/badges.css.scss
+++ b/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
// --------------------------------------------------
diff --git a/app/models/category_style_setting.rb b/app/models/category_style_setting.rb
new file mode 100644
index 00000000000..d94475f2ba7
--- /dev/null
+++ b/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
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
index e4166e10d0b..b8470eb7864 100644
--- a/config/locales/server.en.yml
+++ b/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."
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 25acf591241..6967d21ab7b 100644
--- a/config/site_settings.yml
+++ b/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
diff --git a/lib/site_setting_extension.rb b/lib/site_setting_extension.rb
index 7f7466b62b5..ff994a48362 100644
--- a/lib/site_setting_extension.rb
+++ b/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