discourse/discourse-category-icons
1
0
Fork 0
mirror of https://github.com/discourse/discourse-category-icons.git synced 2025-03-09 13:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Include icons in category list

Browse Source
This commit is contained in:
tshenry 2019-08-09 17:00:25 -07:00
parent fe8b89ef20
commit 53f29486c9
2 changed files with 132 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
common/common.scss
View File

@ -1,12 +1,31 @@
span.category-badge-icon { span.category-badge-icon {
display: inline-flex; display: inline-flex;
align-self: center; align-self: center;
.d-icon { .d-icon {
opacity: 1; opacity: 1;
font-size: 1.3em; font-size: 1.3em;
} }
} }
.badge-wrapper .badge-category .d-icon { .categories .category h3,
.badge-wrapper .badge-category {
display: inline-flex;
.d-icon {
margin-right: 5px; margin-right: 5px;
&:not(.d-icon-lock) {
color: inherit;
}
}
}
.categories-list .category-box-heading h3 {
.d-icon {
margin: 0;
&:not(.d-icon-lock) {
color: inherit;
}
}
div {
display: inline;
}
} }

186
common/header.html
View File

@ -1,99 +1,123 @@
<script type="text/discourse-plugin" version="0.8.26"> <script type="text/discourse-plugin" version="0.8.26">
let categoryThemeList = settings.category_icon_list.split('|'); let categoryThemeList = settings.category_icon_list.split('|');
let lockIcon = settings.category_lock_icon || 'lock'; let lockIcon = settings.category_lock_icon || 'lock';
const { iconHTML } = require("discourse-common/lib/icon-library"); const { iconHTML, iconNode } = require("discourse-common/lib/icon-library");
const { isRTL } = require("discourse/lib/text-direction"); const { isRTL } = require("discourse/lib/text-direction");
const { h } = require("virtual-dom");
var get = Em.get, var get = Em.get,
escapeExpression = Handlebars.Utils.escapeExpression; escapeExpression = Handlebars.Utils.escapeExpression;
function categoryStripe(color, classes) { function categoryStripe(color, classes) {
var style = color ? "style='background-color: #" + color + ";'" : ""; var style = color ? "style='background-color: #" + color + ";'" : "";
return "<span class='" + classes + "' " + style + "></span>"; return "<span class='" + classes + "' " + style + "></span>";
} }
function categoryIconsRenderer(category, opts) { function getIconItem(categorySlug) {
let description = get(category, "description_text"); let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(categorySlug) > -1);
let restricted = get(category, "read_restricted"); if (categoryThemeItem) {
let url = opts.url let iconItem = categoryThemeItem.split(',');
? opts.url // Ensure exact match
: Discourse.getURL("/c/") + Discourse.Category.slugFor(category); if(iconItem[0] === categorySlug) {
let href = opts.link === false ? "" : url; return iconItem;
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;
let categoryDir = "";
if (!opts.hideParent) { function categoryIconsRenderer(category, opts) {
parentCat = Discourse.Category.findById( let description = get(category, "description_text");
get(category, "parent_category_id") 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;
let categoryDir = "";
const categoryStyle = if (!opts.hideParent) {
opts.categoryStyle || Discourse.SiteSettings.category_style; parentCat = Discourse.Category.findById(
if (categoryStyle !== "none") { get(category, "parent_category_id")
if (parentCat && parentCat !== category) { );
html += categoryStripe( }
get(parentCat, "color"),
"badge-category-parent-bg"
);
}
html += categoryStripe(color, "badge-category-bg");
}
let classNames = "badge-category clear-badge"; const categoryStyle =
if (restricted) { opts.categoryStyle || Discourse.SiteSettings.category_style;
classNames += " restricted"; if (categoryStyle !== "none") {
} if (parentCat && parentCat !== category) {
html += categoryStripe(
get(parentCat, "color"),
"badge-category-parent-bg"
);
}
html += categoryStripe(color, "badge-category-bg");
}
let style = ""; let classNames = "badge-category clear-badge";
if (categoryStyle === "box") { if (restricted) {
style = `style="color: #${get(category, "text_color")};"`; classNames += " restricted";
} }
html += let style = "";
`<span ${style} ` + if (categoryStyle === "box") {
'data-drop-close="true" class="' + style = `style="color: #${get(category, "text_color")};"`;
classNames + }
'"' +
(description ? 'title="' + escapeExpression(description) + '" ' : "") +
">";
/// Add custom category icon from theme settings html +=
let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(category.slug) > -1); `<span ${style} ` +
if (categoryThemeItem) { 'data-drop-close="true" class="' +
let iconItem = categoryThemeItem.split(','); classNames +
// Ensure exact match '"' +
if(iconItem[0] == category.slug) { (description ? 'title="' + escapeExpression(description) + '" ' : "") +
let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : ""; ">";
let itemIcon = iconItem[1] != '' ? iconHTML(iconItem[1]) : "";
html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
}
}
/// End custom category icon
let categoryName = escapeExpression(get(category, "name")); /// Add custom category icon from theme settings
let iconItem = getIconItem(category.slug);
if(iconItem) {
let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : "";
let itemIcon = iconItem[1] != '' ? iconHTML(iconItem[1]) : "";
html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
}
/// End custom category icon
if (Discourse.SiteSettings.support_mixed_text_direction) { let categoryName = escapeExpression(get(category, "name"));
categoryDir = isRTL(categoryName) ? 'dir="rtl"' : 'dir="ltr"';
}
if (restricted) { if (Discourse.SiteSettings.support_mixed_text_direction) {
html += iconHTML(lockIcon); categoryDir = isRTL(categoryName) ? 'dir="rtl"' : 'dir="ltr"';
} }
html += `<span class="category-name" ${categoryDir}>${categoryName}</span></span>`;
if (href) { if (restricted) {
href = ` href="${href}" `; html += iconHTML(lockIcon);
} }
html += `<span class="category-name" ${categoryDir}>${categoryName}</span></span>`;
extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses; if (href) {
return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`; href = ` href="${href}" `;
}; }
api.replaceCategoryLinkRenderer(categoryIconsRenderer); extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
};
api.replaceCategoryLinkRenderer(categoryIconsRenderer);
api.createWidget("category-icon", {
tagName: "div.category-icon-widget",
html(attrs) {
let iconItem = getIconItem(attrs.category.slug);
if(iconItem && !attrs.category.parent_category_id) {
let itemColor = iconItem[2] ? `color: ${iconItem[2]}` : "";
let itemIcon = iconItem[1] != '' ? iconNode(iconItem[1]) : "";
return h("span.category-icon", { "style": itemColor }, itemIcon);
}
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/category-title-before/category-icon-template">
{{mount-widget widget="category-icon" args=(hash category=category)}}
</script> </script>