init
This commit is contained in:
Carson Chang
parent
167cde2038
commit
c78db83a65
|
|
@ -1,17 +1,49 @@
|
|||
span.category-badge-icon {
|
||||
display: inline-flex;
|
||||
align-self: center;
|
||||
font-size: var(--font-up-2);
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.d-icon {
|
||||
opacity: 1;
|
||||
font-size: 1.3em;
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
}
|
||||
|
||||
.categories-list .category h3 .d-icon,
|
||||
.badge-wrapper .badge-category .d-icon,
|
||||
.select-kit .select-kit-header .selected-name .name .badge-wrapper .d-icon {
|
||||
margin-right: 5px;
|
||||
margin-left: 0px;
|
||||
.category-badge-icon__emoji {
|
||||
max-width: 1.25em;
|
||||
max-height: 1.25em;
|
||||
}
|
||||
|
||||
span.category-badge-logo {
|
||||
img {
|
||||
max-width: 2.25em;
|
||||
max-height: 2.25em;
|
||||
}
|
||||
margin-right: 0.375em;
|
||||
}
|
||||
|
||||
a.badge-wrapper {
|
||||
&:hover {
|
||||
.category-badge-icon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-wrapper .badge-category {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.badge-wrapper .badge-category {
|
||||
.category-badge-icon {
|
||||
margin-right: 5px;
|
||||
margin-left: 0px;
|
||||
.d-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-wrapper.bullet span.category-badge-icon .d-icon,
|
||||
|
|
|
|||
|
|
@ -11,12 +11,14 @@ import categoriesBoxesWithTopics from "discourse/components/categories-boxes-wit
|
|||
import I18n from "I18n";
|
||||
import { get } from "@ember/object";
|
||||
import { escapeExpression } from "discourse/lib/utilities";
|
||||
import { emojiBasePath } from "discourse/lib/settings";
|
||||
|
||||
export default {
|
||||
name: "category-icons",
|
||||
|
||||
initialize() {
|
||||
withPluginApi("0.8.26", (api) => {
|
||||
let useCategoryLogo = settings.use_category_logo;
|
||||
let categoryThemeList = settings.category_icon_list.split("|");
|
||||
let lockIcon = settings.category_lock_icon || "lock";
|
||||
|
||||
|
|
@ -80,6 +82,7 @@ export default {
|
|||
let html = "";
|
||||
let parentCat = null;
|
||||
let categoryDir = "";
|
||||
let categoryLogo = get(category, "uploaded_logo");
|
||||
|
||||
if (!opts.hideParent) {
|
||||
parentCat = Category.findById(get(category, "parent_category_id"));
|
||||
|
|
@ -116,18 +119,38 @@ export default {
|
|||
: "") +
|
||||
">";
|
||||
|
||||
/// Add custom category icon from theme settings
|
||||
let iconItem = getIconItem(category.slug);
|
||||
if (iconItem) {
|
||||
let itemColor = iconItem[2]
|
||||
? iconItem[2].match(/categoryColo(u*)r/)
|
||||
? `style="color: #${color}"`
|
||||
: `style="color: ${iconItem[2]}"`
|
||||
: "";
|
||||
let itemIcon = iconItem[1] !== "" ? iconHTML(iconItem[1]) : "";
|
||||
html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
|
||||
if (!useCategoryLogo) {
|
||||
/// Add custom category icon from theme settings
|
||||
let iconItem = getIconItem(category.slug);
|
||||
if (iconItem) {
|
||||
let itemColor = iconItem[2]
|
||||
? `style="color: ${iconItem[2]}"`
|
||||
: `style="color: #${color}"`;
|
||||
// check if native emoji
|
||||
const emojiSet = helperContext().siteSettings.emoji_set;
|
||||
let itemIcon = /\p{Extended_Pictographic}/u.test(iconItem[1])
|
||||
? iconItem[1]
|
||||
: // check if hosted emoji
|
||||
iconItem[1].charAt(0) == ":"
|
||||
? `<img class="category-badge-icon__emoji" src="` +
|
||||
getURL(
|
||||
`${emojiBasePath()}/${emojiSet}/${iconItem[1]
|
||||
.replace(/:t/, "/")
|
||||
.replace(/:/g, "")}.png`
|
||||
) +
|
||||
`" />`
|
||||
: iconItem[1] !== "" &&
|
||||
/\p{Extended_Pictographic}/u.test(iconItem[1]) === false
|
||||
? iconHTML(iconItem[1])
|
||||
: "";
|
||||
html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
|
||||
/// End custom category icon
|
||||
}
|
||||
} else if (categoryLogo) {
|
||||
html += `<span class="category-badge-logo"><img src="${categoryLogo.url}" /></span>`;
|
||||
}
|
||||
/// End custom category icon
|
||||
|
||||
// Add category logo from theme settings
|
||||
|
||||
let categoryName = escapeExpression(get(category, "name"));
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ category_icon_list:
|
|||
default: "help,question-circle,#CC0000,partial|"
|
||||
type: "list"
|
||||
list_type: "simple"
|
||||
description: 'Enter comma-delimited configuration for categories, in the format "slug,icon,color,match". Colour in format #123456 or "categoryColor" to use the default color for the category (same as the Badge color). If match is "partial" then the slug need only partially match the category-slug, otherwise an exact match is required'
|
||||
description: ' Enter comma-delimited configuration for categories<br>Format: "slug,icon,color,partial"<br>slug — The category slug.<br>icon — Can be either (1) Font Awesome icon, (2) a singular unicode character "😀", or (3) a forum emoji formatted like ":grinning:"<br>color (optional) — Color for the icon. Only works for Font Awesome, not emojis. Use a hex code with the "#" character. Default color is the category/badge color.<br>partial (optional) — Write "partial" if the slug only need only partially match the category-slug, otherwise an exact match is required. Useful for subcategories with identical names.'
|
||||
svg_icons:
|
||||
default: "question-circle"
|
||||
type: "list"
|
||||
|
|
@ -11,3 +11,7 @@ svg_icons:
|
|||
category_lock_icon:
|
||||
default: ""
|
||||
description: "Enter the name of a FontAwesome 5 icon to display instead of the lock icon next to private categories."
|
||||
use_category_logo:
|
||||
type: bool
|
||||
default: false
|
||||
description: "Use the category's uploaded logo as its icon.<br><br>Overrides Font Awesome icons and emojis.<br><br>Category logos can be uploaded through individual category settings."
|
||||
|
|
|
|||
Loading…
Reference in New Issue