From e4c2b5e43087a8327991978b1e3dcbdbd1ac6147 Mon Sep 17 00:00:00 2001 From: Robin Ward Date: Fri, 28 Jul 2017 15:21:18 -0400 Subject: [PATCH] REFACTOR: CSS improvements to improve targetting and remove !important --- .../discourse/components/category-drop.js.es6 | 24 +++++++--- .../discourse/components/tag-drop.js.es6 | 2 +- .../discourse/helpers/category-link.js.es6 | 46 ++++++++++--------- .../templates/navigation/categories.hbs | 2 +- .../templates/navigation/default.hbs | 2 +- .../stylesheets/common/components/badges.scss | 16 +++---- 6 files changed, 54 insertions(+), 38 deletions(-) diff --git a/app/assets/javascripts/discourse/components/category-drop.js.es6 b/app/assets/javascripts/discourse/components/category-drop.js.es6 index 3e4c218b51c..53b49cd61ad 100644 --- a/app/assets/javascripts/discourse/components/category-drop.js.es6 +++ b/app/assets/javascripts/discourse/components/category-drop.js.es6 @@ -59,16 +59,28 @@ export default Ember.Component.extend({ }.property('category'), badgeStyle: function() { - var category = this.get('category'); + let category = this.get('category'); + + const categoryStyle = this.siteSettings.category_style; + if (categoryStyle === 'bullet') { + return; + } if (category) { - var color = get(category, 'color'), - textColor = get(category, 'text_color'); + let color = get(category, 'color'); + let textColor = get(category, 'text_color'); if (color || textColor) { - var style = ""; - if (color) { style += "background-color: #" + color + "; border-color: #" + color + ";"; } - if (textColor) { style += "color: #" + textColor + "; "; } + let style = ""; + if (color) { + if (categoryStyle === "bar") { + style += `border-color: #${color};`; + } else if (categoryStyle === "box") { + style += `background-color: #${color};`; + if (textColor) { style += "color: #" + textColor + "; "; } + } + } + return style.htmlSafe(); } } diff --git a/app/assets/javascripts/discourse/components/tag-drop.js.es6 b/app/assets/javascripts/discourse/components/tag-drop.js.es6 index c7532a9ac58..1a9bf346c3a 100644 --- a/app/assets/javascripts/discourse/components/tag-drop.js.es6 +++ b/app/assets/javascripts/discourse/components/tag-drop.js.es6 @@ -69,7 +69,7 @@ export default Ember.Component.extend({ @computed('tag') dropdownButtonClass() { - var result = 'badge-category category-dropdown-button'; + let result = 'badge-category category-dropdown-button'; if (Em.isNone(this.get('tag'))) { result += ' home'; } diff --git a/app/assets/javascripts/discourse/helpers/category-link.js.es6 b/app/assets/javascripts/discourse/helpers/category-link.js.es6 index 87aa1f7d77b..fc2524d0330 100644 --- a/app/assets/javascripts/discourse/helpers/category-link.js.es6 +++ b/app/assets/javascripts/discourse/helpers/category-link.js.es6 @@ -24,20 +24,20 @@ export function categoryBadgeHTML(category, opts) { if ((!category) || (!opts.allowUncategorized && - Em.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") && + Ember.get(category, 'id') === Discourse.Site.currentProp("uncategorized_category_id") && Discourse.SiteSettings.suppress_uncategorized_badge ) ) return ""; - var description = get(category, 'description_text'), - restricted = get(category, 'read_restricted'), - url = opts.url ? 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) : ''), - color = get(category, 'color'), - html = "", - parentCat = null; + let description = get(category, 'description_text'); + let restricted = get(category, 'read_restricted'); + let url = opts.url ? opts.url : Discourse.getURL("/c/") + Discourse.Category.slugFor(category); + let href = (opts.link === false ? '' : url); + let tagName = (opts.link === false || opts.link === "false" ? 'span' : 'a'); + let extraClasses = (opts.extraClasses ? (' ' + opts.extraClasses) : ''); + let color = get(category, 'color'); + let html = ""; + let parentCat = null; if (!opts.hideParent) { parentCat = Discourse.Category.findById(get(category, 'parent_category_id')); @@ -49,32 +49,36 @@ export function categoryBadgeHTML(category, opts) { html += categoryStripe(color, "badge-category-bg"); - var classNames = "badge-category clear-badge"; + let classNames = "badge-category clear-badge"; if (restricted) { classNames += " restricted"; } - var textColor = "#" + get(category, 'text_color'); + const categoryStyle = Discourse.SiteSettings.category_style; - html += ""; - var name = escapeExpression(get(category, 'name')); + let categoryName = escapeExpression(get(category, 'name')); if (restricted) { - html += iconHTML('lock') + " " + name; + html += iconHTML('lock') + " " + categoryName; } else { - html += name; + html += categoryName; } html += ""; - if(href){ - href = " href='" + href + "' "; + if (href) { + href = ` href="${href}" `; } - extraClasses = Discourse.SiteSettings.category_style ? Discourse.SiteSettings.category_style + extraClasses : extraClasses; - - return "<" + tagName + " class='badge-wrapper " + extraClasses + "' " + href + ">" + html + ""; + extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses; + return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}`; } export function categoryLinkHTML(category, options) { diff --git a/app/assets/javascripts/discourse/templates/navigation/categories.hbs b/app/assets/javascripts/discourse/templates/navigation/categories.hbs index 567e484a995..72204f60630 100644 --- a/app/assets/javascripts/discourse/templates/navigation/categories.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/categories.hbs @@ -1,4 +1,4 @@ -{{#d-section bodyClass="navigation-categories"}} +{{#d-section bodyClass="navigation-categories" class="navigation-categories"}} {{bread-crumbs categories=categories}} {{navigation-bar navItems=navItems filterMode=filterMode}} diff --git a/app/assets/javascripts/discourse/templates/navigation/default.hbs b/app/assets/javascripts/discourse/templates/navigation/default.hbs index 57f01646512..fbf412f7b24 100644 --- a/app/assets/javascripts/discourse/templates/navigation/default.hbs +++ b/app/assets/javascripts/discourse/templates/navigation/default.hbs @@ -1,4 +1,4 @@ -{{#d-section bodyClass="navigation-topics" scrollTop="false"}} +{{#d-section bodyClass="navigation-topics" class="navigation-topics" scrollTop="false"}} {{bread-crumbs categories=categories}} {{navigation-bar navItems=navItems filterMode=filterMode}} diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index 0dd3a5d3a4d..065f3c98fba 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -28,7 +28,7 @@ display: inline-flex; span.badge-category { - color: $primary !important; + color: $primary; padding: 3px; vertical-align: text-top; margin-top: -2px; //vertical alignment fix @@ -37,7 +37,7 @@ text-overflow: ellipsis; .extra-info-wrapper & { - color: $header-primary !important; + color: $header-primary; } } @@ -59,7 +59,7 @@ line-height: 15px; span.badge-category { - color: $primary !important; + color: $primary; display: inline-block; overflow: hidden; text-overflow: ellipsis; @@ -69,7 +69,7 @@ } .extra-info-wrapper & { - color: $header-primary !important; + color: $header-primary; } } @@ -169,13 +169,13 @@ } li.bar>.badge-category { - background: $primary-low !important; - color: $primary !important; + background: $primary-low; + color: $primary; } li.bullet>.badge-category { - background: $primary-low !important; - color: $primary !important; + background: $primary-low; + color: $primary; .badge-category-bg { width: 10px;