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 9a9ff20fc..b0f06e5b1 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 @@
{{combo-box valueAttribute="value" content=validValues value=value none=allowsNone}} + {{view.preview}}
{{unbound description}}
{{#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 0a3983bd2..4f5719d17 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("
" + + preview.replace("{{value}}",this.get('content.value')) + + "
" + ); + } + }.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 628771d42..cff023f73 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 + "\">"; +function categoryStripe(color, classes) { + var style = color ? "style='background-color: #" + color + ";'" : ""; + return ""; } 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 += ""; var name = escapeExpression(get(category, 'name')); if (restricted) { - html += "
" + iconHTML('lock') + " " + name + "
"; + html += "" + iconHTML('lock') + " " + name + ""; } else { html += name; } - html += ""; + html += ""; - return "" + html + ""; + if(href){ + href = " href='" + href + "' "; + } + + return "<" + tagName + " class='badge-wrapper " + Discourse.SiteSettings.category_style + extraClasses + "' " + href + ">" + html + ""; } 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 33ce6d2ef..7a9e50fda 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 0765de22a..5ae23cbb5 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 000000000..d94475f2b --- /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 e4166e10d..b8470eb78 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 25acf5912..6967d21ab 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: 'Category' enable_mobile_theme: client: true default: true diff --git a/lib/site_setting_extension.rb b/lib/site_setting_extension.rb index 7f7466b62..ff994a483 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