diff --git a/common/common.scss b/common/common.scss index 9984d70..ad6fc87 100644 --- a/common/common.scss +++ b/common/common.scss @@ -17,6 +17,18 @@ div[class^="category-title-header"] { .category-title { display: inline; } + + .category-icon-widget { + display: inline; + + .category-icon { + .d-icon { + height: 1.5em; + width: 1.5em; + margin-right: 0.75em; + } + } + } } .category-title-description { diff --git a/javascripts/discourse/widgets/category-header-widget.js.es6 b/javascripts/discourse/widgets/category-header-widget.js.es6 index 3099ebc..2998b8e 100644 --- a/javascripts/discourse/widgets/category-header-widget.js.es6 +++ b/javascripts/discourse/widgets/category-header-widget.js.es6 @@ -2,13 +2,21 @@ import { h } from "virtual-dom"; import { iconNode } from "discourse-common/lib/icon-library"; import { createWidget } from "discourse/widgets/widget"; -function buildCategory(category) { +function buildCategory(category, widget) { const content = []; if (category.read_restricted) { content.push(iconNode("lock")); } + if (settings.show_category_icon) { + try { + content.push(widget.attach("category-icon", { category })); + } catch { + // if widget attaching fails, ignore it as it's probably the missing component + } + } + content.push(h("h1.category-title", category.name)); if (settings.show_description) { @@ -63,7 +71,7 @@ export default createWidget("category-header-widget", { style: `background-color: #${category.color}; color: #${category.text_color};`, }, }, - h("div.category-title-contents", buildCategory(category)) + h("div.category-title-contents", buildCategory(category, this)) ); } } else { diff --git a/settings.yml b/settings.yml index 0d6bc77..aefa943 100644 --- a/settings.yml +++ b/settings.yml @@ -29,3 +29,7 @@ show_below_site_header: default: true type: bool description: "Display the banner in the below site header connector." + +show_category_icon: + default: false + description: "Show category icon from Discourse Category Icons component"