Discource-C
/
discourse-category-icons
mirror of https://github.com/discourse/discourse-category-icons.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Include icons in category list

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

21
common/common.scss
View File

@ -7,6 +7,25 @@ span.category-badge-icon {
}
}
.badge-wrapper .badge-category .d-icon {
.categories .category h3,
.badge-wrapper .badge-category {
display: inline-flex;
.d-icon {
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;
}
}

56
common/header.html
View File

@ -1,19 +1,31 @@
<script type="text/discourse-plugin" version="0.8.26">
let categoryThemeList = settings.category_icon_list.split('|');
let lockIcon = settings.category_lock_icon || 'lock';
let categoryThemeList = settings.category_icon_list.split('|');
let lockIcon = settings.category_lock_icon || 'lock';
const { iconHTML } = require("discourse-common/lib/icon-library");
const { isRTL } = require("discourse/lib/text-direction");
const { iconHTML, iconNode } = require("discourse-common/lib/icon-library");
const { isRTL } = require("discourse/lib/text-direction");
const { h } = require("virtual-dom");
var get = Em.get,
var get = Em.get,
escapeExpression = Handlebars.Utils.escapeExpression;
function categoryStripe(color, classes) {
function categoryStripe(color, classes) {
var style = color ? "style='background-color: #" + color + ";'" : "";
return "<span class='" + classes + "' " + style + "></span>";
}
}
function categoryIconsRenderer(category, opts) {
function getIconItem(categorySlug) {
let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(categorySlug) > -1);
if (categoryThemeItem) {
let iconItem = categoryThemeItem.split(',');
// Ensure exact match
if(iconItem[0] === categorySlug) {
return iconItem;
}
}
}
function categoryIconsRenderer(category, opts) {
let description = get(category, "description_text");
let restricted = get(category, "read_restricted");
let url = opts.url
@ -64,16 +76,12 @@ function categoryIconsRenderer(category, opts) {
">";
/// Add custom category icon from theme settings
let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(category.slug) > -1);
if (categoryThemeItem) {
let iconItem = categoryThemeItem.split(',');
// Ensure exact match
if(iconItem[0] == category.slug) {
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
let categoryName = escapeExpression(get(category, "name"));
@ -93,7 +101,23 @@ function categoryIconsRenderer(category, opts) {
extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
};
};
api.replaceCategoryLinkRenderer(categoryIconsRenderer);
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>