diff --git a/app/assets/javascripts/admin/addon/mixins/setting-component.js b/app/assets/javascripts/admin/addon/mixins/setting-component.js index 53fce908e7f..ab24c65993f 100644 --- a/app/assets/javascripts/admin/addon/mixins/setting-component.js +++ b/app/assets/javascripts/admin/addon/mixins/setting-component.js @@ -5,7 +5,6 @@ import Mixin from "@ember/object/mixin"; import { inject as service } from "@ember/service"; import { htmlSafe } from "@ember/template"; import { isNone } from "@ember/utils"; -import { categoryLinkHTML } from "discourse/helpers/category-link"; import { ajax } from "discourse/lib/ajax"; import { fmt, propertyNotEqual } from "discourse/lib/computed"; import { splitString } from "discourse/lib/utilities"; @@ -113,14 +112,6 @@ export default Mixin.create({ @discourseComputed("setting", "buffered.value") preview(setting, value) { - // A bit hacky, but allows us to use helpers - if (setting.setting === "category_style") { - const category = this.site.get("categories.firstObject"); - if (category) { - return categoryLinkHTML(category, { categoryStyle: value }); - } - } - const preview = setting.preview; if (preview) { const escapedValue = preview.replace(/\{\{value\}\}/g, value); diff --git a/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs index d288b48d764..28cb478ea6f 100644 --- a/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs +++ b/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs @@ -15,7 +15,21 @@ {{#each this.categoryBreadcrumbs as |breadcrumb|}} {{#if breadcrumb.hasOptions}} -
  • +
  • diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js index c3fe0f57e27..9098d9d0478 100644 --- a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js +++ b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js @@ -1,5 +1,4 @@ import Component from "@ember/component"; -import { equal } from "@ember/object/computed"; import { isEmpty } from "@ember/utils"; import discourseComputed from "discourse-common/utils/decorators"; @@ -9,7 +8,6 @@ export default Component.extend({ ":category-boxes-with-topics", "anyLogos:with-logos:no-logos", ], - noCategoryStyle: equal("siteSettings.category_style", "none"), lockIcon: "lock", @discourseComputed("categories.[].uploaded_logo.url") diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/components/categories-boxes.hbs index cddedd2a074..d2a295d35ca 100644 --- a/app/assets/javascripts/discourse/app/components/categories-boxes.hbs +++ b/app/assets/javascripts/discourse/app/components/categories-boxes.hbs @@ -5,13 +5,12 @@ />
    {{#unless c.isMuted}} diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes.js b/app/assets/javascripts/discourse/app/components/categories-boxes.js index 3f5818841d5..5dd093922dd 100644 --- a/app/assets/javascripts/discourse/app/components/categories-boxes.js +++ b/app/assets/javascripts/discourse/app/components/categories-boxes.js @@ -1,5 +1,4 @@ import Component from "@ember/component"; -import { equal } from "@ember/object/computed"; import { isEmpty } from "@ember/utils"; import discourseComputed from "discourse-common/utils/decorators"; @@ -10,7 +9,6 @@ export default Component.extend({ "anyLogos:with-logos:no-logos", "hasSubcategories:with-subcategories", ], - noCategoryStyle: equal("siteSettings.category_style", "none"), lockIcon: "lock", @discourseComputed("categories.[].uploaded_logo.url") diff --git a/app/assets/javascripts/discourse/app/components/categories-only.js b/app/assets/javascripts/discourse/app/components/categories-only.js index bcc6de8ad39..22deee2c6e9 100644 --- a/app/assets/javascripts/discourse/app/components/categories-only.js +++ b/app/assets/javascripts/discourse/app/components/categories-only.js @@ -1,12 +1,10 @@ import Component from "@ember/component"; import { action } from "@ember/object"; -import { equal } from "@ember/object/computed"; import discourseComputed from "discourse-common/utils/decorators"; export default Component.extend({ tagName: "", showMuted: false, - noCategoryStyle: equal("siteSettings.category_style", "none"), @discourseComputed("showMutedCategories", "filteredCategories.length") mutedToggleIcon(showMutedCategories, filteredCategoriesLength) { diff --git a/app/assets/javascripts/discourse/app/components/edit-category-general.hbs b/app/assets/javascripts/discourse/app/components/edit-category-general.hbs index 75916c4dfe9..ab7d6ed51f2 100644 --- a/app/assets/javascripts/discourse/app/components/edit-category-general.hbs +++ b/app/assets/javascripts/discourse/app/components/edit-category-general.hbs @@ -62,43 +62,36 @@ {{/if}}
    - {{#if this.noCategoryStyle}} - - {{else}} - -
    - {{html-safe this.categoryBadgePreview}} + +
    + {{html-safe this.categoryBadgePreview}} -
    - {{i18n "category.background_color"}}: -
    - - -
    -
    +
    + {{i18n "category.background_color"}}: +
    + + +
    +
    -
    - {{i18n "category.foreground_color"}}: -
    - - -
    -
    -
    - {{/if}} +
    + {{i18n "category.foreground_color"}}: +
    + + +
    +
    +
    \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/edit-category-general.js b/app/assets/javascripts/discourse/app/components/edit-category-general.js index db922c7acaa..bd36507a19a 100644 --- a/app/assets/javascripts/discourse/app/components/edit-category-general.js +++ b/app/assets/javascripts/discourse/app/components/edit-category-general.js @@ -53,11 +53,6 @@ export default buildCategoryPanel("general", { .uniq(); }, - @discourseComputed - noCategoryStyle() { - return this.siteSettings.category_style === "none"; - }, - @discourseComputed("category.id", "category.color") usedBackgroundColors(categoryId, categoryColor) { const categories = this.site.get("categoriesList"); @@ -91,6 +86,7 @@ export default buildCategoryPanel("general", { const c = Category.create({ name, color, + id: category.id, text_color: textColor, parent_category_id: parseInt(parentCategoryId, 10), read_restricted: category.get("read_restricted"), diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs index 151bf4d8f91..7c414641438 100644 --- a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs +++ b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs @@ -15,13 +15,8 @@ {{if this.category.uploaded_logo.url 'has-logo' 'no-logo'}}" > "; -} - let _extraIconRenderers = []; export function addExtraIconRenderer(renderer) { @@ -85,9 +80,6 @@ export function categoryLinkHTML(category, options) { if (options.hideParent) { categoryOptions.hideParent = true; } - if (options.categoryStyle) { - categoryOptions.categoryStyle = options.categoryStyle; - } if (options.recursive) { categoryOptions.recursive = true; } @@ -114,10 +106,12 @@ export function defaultCategoryLinkRenderer(category, opts) { 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 = ""; + let dataAttributes = category + ? `data-category-id="${get(category, "id")}"` + : ""; if (!opts.hideParent) { parentCat = Category.findById(get(category, "parent_category_id")); @@ -125,34 +119,22 @@ export function defaultCategoryLinkRenderer(category, opts) { let siteSettings = helperContext().siteSettings; - const categoryStyle = opts.categoryStyle || siteSettings.category_style; - if (categoryStyle !== "none") { - 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"; + let classNames = `badge-category`; if (restricted) { classNames += " restricted"; } - let style = ""; - if (categoryStyle === "box") { - style = `style="color: #${get(category, "text_color")};"`; + if (parentCat) { + classNames += ` --has-parent`; + dataAttributes += ` data-parent-category-id="${parentCat.id}"`; } - html += - `"; + html += ``; let categoryName = escapeExpression(get(category, "name")); @@ -169,10 +151,10 @@ export function defaultCategoryLinkRenderer(category, opts) { html += iconHTML(iconName); } }); - html += `${categoryName}`; + html += `${categoryName}`; html += ""; - if (opts.topicCount && categoryStyle !== "box") { + if (opts.topicCount) { html += buildTopicCount(opts.topicCount); } @@ -180,11 +162,14 @@ export function defaultCategoryLinkRenderer(category, opts) { href = ` href="${href}" `; } - extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses; - let afterBadgeWrapper = ""; - if (opts.topicCount && categoryStyle === "box") { - afterBadgeWrapper += buildTopicCount(opts.topicCount); + + if (opts.plusSubcategories && opts.lastSubcategory) { + afterBadgeWrapper += ` + ${I18n.t("category_row.plus_subcategories", { + count: opts.plusSubcategories, + })} + `; } - return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}${afterBadgeWrapper}`; + return `<${tagName} class="badge-category__wrapper ${extraClasses}" ${href}>${html}${afterBadgeWrapper}`; } diff --git a/app/assets/javascripts/discourse/app/instance-initializers/category-badge-css-generator.js b/app/assets/javascripts/discourse/app/instance-initializers/category-badge-css-generator.js new file mode 100644 index 00000000000..66d233f63c5 --- /dev/null +++ b/app/assets/javascripts/discourse/app/instance-initializers/category-badge-css-generator.js @@ -0,0 +1,33 @@ +import { get } from "@ember/object"; +import Category from "discourse/models/category"; + +export default { + after: "category-color-css-generator", + + // This generates badge CSS for each category, which is used to render category-specific elements. + initialize(owner) { + this.site = owner.lookup("service:site"); + + // If the site is login_required and the user is anon there will be no categories preloaded. + if (!this.site.categories) { + return; + } + + const generatedCss = this.site.categories.map((category) => { + let parentCategory = Category.findById( + get(category, "parent_category_id") + ); + let badgeCss = `.badge-category[data-category-id="${category.id}"] { --category-badge-color: var(--category-${category.id}-color); --category-badge-text-color: #${category.text_color}; }`; + if (parentCategory) { + badgeCss += `.badge-category[data-parent-category-id="${parentCategory.id}"] { --parent-category-badge-color: var(--category-${parentCategory.id}-color); }`; + } + return badgeCss; + }); + + const cssTag = document.createElement("style"); + cssTag.type = "text/css"; + cssTag.id = "category-badge-css-generator"; + cssTag.innerHTML = generatedCss.join("\n"); + document.head.appendChild(cssTag); + }, +}; diff --git a/app/assets/javascripts/discourse/app/lib/render-tags.js b/app/assets/javascripts/discourse/app/lib/render-tags.js index 7a2e6a86678..9b5de0fdc05 100644 --- a/app/assets/javascripts/discourse/app/lib/render-tags.js +++ b/app/assets/javascripts/discourse/app/lib/render-tags.js @@ -68,7 +68,7 @@ export default function (topic, params) { isPrivateMessage, tagsForUser, tagName, - }) + " "; + }) + ""; } } diff --git a/app/assets/javascripts/discourse/app/widgets/header-topic-info.js b/app/assets/javascripts/discourse/app/widgets/header-topic-info.js index 627eef2e345..f37b38c4a00 100644 --- a/app/assets/javascripts/discourse/app/widgets/header-topic-info.js +++ b/app/assets/javascripts/discourse/app/widgets/header-topic-info.js @@ -156,7 +156,9 @@ export default createWidget("header-topic-info", { this.attach("category-link", { category: parentCategory }) ); } - categories.push(this.attach("category-link", { category })); + categories.push( + this.attach("category-link", { category, hideParent: true }) + ); this.headerElements.push(h("div.categories-wrapper", categories)); } diff --git a/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js b/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js index 7861f70a4ea..6340f09ab0d 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js @@ -7,9 +7,15 @@ acceptance("CSS Generator", function (needs) { needs.site({ categories: [ - { id: 1, color: "ff0000", name: "category1" }, - { id: 2, color: "333", name: "category2" }, - { id: 4, color: "2B81AF", parentCategory: { id: 1 }, name: "category3" }, + { id: 1, color: "ff0000", text_color: "ffffff", name: "category1" }, + { id: 2, color: "333", text_color: "ffffff", name: "category2" }, + { + id: 4, + color: "2B81AF", + text_color: "ffffff", + parentCategory: { id: 1 }, + name: "category3", + }, ], }); @@ -30,6 +36,15 @@ acceptance("CSS Generator", function (needs) { ".hashtag-color--category-1 {\n background: linear-gradient(-90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n background: linear-gradient(-90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n background: linear-gradient(-90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}" ); }); + + test("category badge CSS variables are generated", async function (assert) { + await visit("/"); + const cssTag = document.querySelector("style#category-badge-css-generator"); + assert.equal( + cssTag.innerHTML, + '.badge-category[data-category-id="1"] { --category-badge-color: var(--category-1-color); --category-badge-text-color: #ffffff; }\n.badge-category[data-category-id="2"] { --category-badge-color: var(--category-2-color); --category-badge-text-color: #ffffff; }\n.badge-category[data-category-id="4"] { --category-badge-color: var(--category-4-color); --category-badge-text-color: #ffffff; }' + ); + }); }); acceptance( @@ -37,13 +52,21 @@ acceptance( function (needs) { needs.site({ categories: null }); needs.settings({ login_required: true }); - test("category CSS variables are not generated", async function (assert) { await visit("/"); + const cssTag = document.querySelector( "style#category-color-css-generator" ); assert.notOk(exists(cssTag)); }); + + test("category badge CSS variables are not generated", async function (assert) { + await visit("/"); + const cssTag = document.querySelector( + "style#category-badge-css-generator" + ); + assert.notOk(exists(cssTag)); + }); } ); diff --git a/app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js b/app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js index 5a15e913926..f6d8a8b3556 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/glimmer-search-test.js @@ -203,13 +203,13 @@ acceptance("Search - Glimmer - Anonymous", function (needs) { ); assert.strictEqual( - secondOption.querySelector(".category-name").textContent.trim(), + secondOption.querySelector(".badge-category__name").textContent.trim(), "bug", "second option includes category slug" ); assert.ok( - exists(`${contextSelector} span.badge-wrapper`), + exists(`${contextSelector} span.badge-category__wrapper`), "category badge is a span (i.e. not a link)" ); }); @@ -706,7 +706,7 @@ acceptance("Search - Glimmer - with tagging enabled", function (needs) { query( ".search-menu .results ul li:nth-of-type(1) .discourse-tags" ).textContent.trim(), - "dev slow", + "devslow", "tags displayed in search results" ); }); @@ -741,8 +741,9 @@ acceptance("Search - Glimmer - with tagging enabled", function (needs) { await click("#search-button"); assert.strictEqual( - query(".search-menu .results ul.search-menu-assistant .category-name") - .innerText, + query( + ".search-menu .results ul.search-menu-assistant .badge-category__name" + ).innerText, "bug", "Category is displayed" ); @@ -769,8 +770,9 @@ acceptance("Search - Glimmer - with tagging enabled", function (needs) { ); assert.strictEqual( - query(".search-menu .results ul.search-menu-assistant .category-name") - .innerText, + query( + ".search-menu .results ul.search-menu-assistant .badge-category__name" + ).innerText, "bug" ); @@ -996,7 +998,7 @@ acceptance("Search - Glimmer - assistant", function (needs) { assert.strictEqual( query( - ".search-menu .results ul.search-menu-assistant .search-link .category-name" + ".search-menu .results ul.search-menu-assistant .search-link .badge-category__name" ).innerText, "support" ); @@ -1095,7 +1097,7 @@ acceptance("Search - Glimmer - assistant", function (needs) { const firstCategory = ".search-menu .results ul.search-menu-assistant .search-link"; const firstCategoryName = query( - `${firstCategory} .category-name` + `${firstCategory} .badge-category__name` ).innerText; await click(firstCategory); diff --git a/app/assets/javascripts/discourse/tests/acceptance/review-test.js b/app/assets/javascripts/discourse/tests/acceptance/review-test.js index 1bde7a44c88..cde6e957836 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/review-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/review-test.js @@ -138,7 +138,7 @@ acceptance("Review", function (needs) { await visit("/review"); assert.ok(exists(`${topic} .reviewable-action.approve`)); - assert.ok(!exists(`${topic} .category-name`)); + assert.ok(!exists(`${topic} .badge-category__name`)); assert.strictEqual( query(`${topic} .discourse-tag:nth-of-type(1)`).innerText, @@ -220,7 +220,7 @@ acceptance("Review", function (needs) { "new raw contents" ); assert.strictEqual( - query(`${topic} .category-name`).innerText.trim(), + query(`${topic} .badge-category__name`).innerText.trim(), "support" ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-test.js index f579b60d624..68afbd79665 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/search-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/search-test.js @@ -154,7 +154,7 @@ acceptance("Search - Anonymous", function (needs) { ); assert.ok( - exists(`${contextSelector} span.badge-wrapper`), + exists(`${contextSelector} span.badge-category__wrapper`), "category badge is a span (i.e. not a link)" ); @@ -584,7 +584,7 @@ acceptance("Search - with tagging enabled", function (needs) { query( ".search-menu .results ul li:nth-of-type(1) .discourse-tags" ).textContent.trim(), - "dev slow", + "devslow", "tags displayed in search results" ); }); @@ -831,7 +831,7 @@ acceptance("Search - assistant", function (needs) { assert.ok(exists(query(firstCategory))); const firstResultSlug = query( - `${firstCategory} .category-name` + `${firstCategory} .badge-category__name` ).textContent.trim(); await click(firstCategory); @@ -857,8 +857,9 @@ acceptance("Search - assistant", function (needs) { await click("#search-button"); assert.strictEqual( - query(".search-menu .results ul.search-menu-assistant .category-name") - .innerText, + query( + ".search-menu .results ul.search-menu-assistant .badge-category__name" + ).innerText, "bug", "Category is displayed" ); @@ -885,8 +886,9 @@ acceptance("Search - assistant", function (needs) { ); assert.strictEqual( - query(".search-menu .results ul.search-menu-assistant .category-name") - .innerText, + query( + ".search-menu .results ul.search-menu-assistant .badge-category__name" + ).innerText, "bug" ); diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js index 35dfa484736..62c3891196b 100644 --- a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js +++ b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js @@ -240,6 +240,7 @@ export function testCleanup(container, app) { function cleanupCssGeneratorTags() { document.querySelector("style#category-color-css-generator")?.remove(); + document.querySelector("style#category-badge-css-generator")?.remove(); document.querySelector("style#hashtag-css-generator")?.remove(); } diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/hamburger-menu-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/hamburger-menu-test.js deleted file mode 100644 index 31593f0f0e7..00000000000 --- a/app/assets/javascripts/discourse/tests/integration/components/widgets/hamburger-menu-test.js +++ /dev/null @@ -1,215 +0,0 @@ -import { render } from "@ember/test-helpers"; -import { hbs } from "ember-cli-htmlbars"; -import { module, test } from "qunit"; -import { NotificationLevels } from "discourse/lib/notification-levels"; -import { setupRenderingTest } from "discourse/tests/helpers/component-test"; -import { count, exists, queryAll } from "discourse/tests/helpers/qunit-helpers"; - -const topCategoryIds = [2, 3, 1]; -let mutedCategoryIds = []; -let unreadCategoryIds = []; -let categoriesByCount = []; - -module("Integration | Component | Widget | hamburger-menu", function (hooks) { - setupRenderingTest(hooks); - - test("prioritize faq", async function (assert) { - this.siteSettings.faq_url = "http://example.com/faq"; - this.currentUser.set("read_faq", false); - - await render(hbs``); - - assert.ok(exists(".faq-priority")); - assert.ok(!exists(".faq-link")); - }); - - test("prioritize faq - user has read", async function (assert) { - this.siteSettings.faq_url = "http://example.com/faq"; - this.currentUser.set("read_faq", true); - - await render(hbs``); - - assert.ok(!exists(".faq-priority")); - assert.ok(exists(".faq-link")); - }); - - test("staff menu - not staff", async function (assert) { - this.currentUser.setProperties({ admin: false, moderator: false }); - - await render(hbs``); - - assert.ok(!exists(".admin-link")); - }); - - test("staff menu - moderator", async function (assert) { - this.currentUser.set("moderator", true); - this.currentUser.set("can_review", true); - - await render(hbs``); - - assert.ok(exists(".admin-link")); - assert.ok(exists(".review")); - assert.ok(!exists(".settings-link")); - }); - - test("staff menu - admin", async function (assert) { - this.currentUser.setProperties({ admin: true }); - - await render(hbs``); - - assert.ok(exists(".settings-link")); - }); - - test("logged in links", async function (assert) { - await render(hbs``); - - assert.ok(exists(".new-topics-link")); - assert.ok(exists(".unread-topics-link")); - }); - - test("general links", async function (assert) { - this.owner.unregister("service:current-user"); - - await render(hbs``); - - assert.ok(!exists("li[class='']")); - assert.ok(exists(".latest-topics-link")); - assert.ok(!exists(".new-topics-link")); - assert.ok(!exists(".unread-topics-link")); - assert.ok(exists(".top-topics-link")); - assert.ok(exists(".badge-link")); - assert.ok(exists(".category-link")); - assert.ok(exists(".about-link")); - assert.ok(exists(".keyboard-shortcuts-link")); - }); - - let maxCategoriesToDisplay; - - test("top categories - anonymous", async function (assert) { - this.owner.unregister("service:current-user"); - this.siteSettings.header_dropdown_category_count = 8; - - await render(hbs``); - - assert.strictEqual(count(".category-link"), 8); - assert.deepEqual( - [...queryAll(".category-link .category-name")].map((el) => el.innerText), - this.site - .get("categoriesByCount") - .reject((c) => c.id === this.site.uncategorized_category_id) - .slice(0, 8) - .map((c) => c.name) - ); - }); - - test("top categories - allow_uncategorized_topics", async function (assert) { - this.owner.unregister("service:current-user"); - this.siteSettings.allow_uncategorized_topics = true; - this.siteSettings.header_dropdown_category_count = 8; - - await render(hbs``); - - assert.strictEqual(count(".category-link"), 8); - assert.deepEqual( - [...queryAll(".category-link .category-name")].map((el) => el.innerText), - this.site - .get("categoriesByCount") - .slice(0, 8) - .map((c) => c.name) - ); - }); - - test("top categories", async function (assert) { - this.siteSettings.header_dropdown_category_count = 8; - maxCategoriesToDisplay = this.siteSettings.header_dropdown_category_count; - categoriesByCount = this.site - .get("categoriesByCount") - .reject((c) => c.id === this.site.uncategorized_category_id) - .slice(); - categoriesByCount.every((c) => { - if (!topCategoryIds.includes(c.id)) { - if (mutedCategoryIds.length === 0) { - mutedCategoryIds.push(c.id); - c.set("notification_level", NotificationLevels.MUTED); - } else if (unreadCategoryIds.length === 0) { - unreadCategoryIds.push(c.id); - for (let i = 0; i < 5; i++) { - c.topicTrackingState.modifyState(123 + i, { - category_id: c.id, - last_read_post_number: 1, - highest_post_number: 2, - notification_level: NotificationLevels.TRACKING, - }); - } - } else { - unreadCategoryIds.splice(0, 0, c.id); - for (let i = 0; i < 10; i++) { - c.topicTrackingState.modifyState(321 + i, { - category_id: c.id, - last_read_post_number: null, - created_in_new_period: true, - }); - } - return false; - } - } - return true; - }); - this.currentUser.set("top_category_ids", topCategoryIds); - - await render(hbs``); - - assert.strictEqual( - count(".category-link"), - maxCategoriesToDisplay, - "categories displayed limited by header_dropdown_category_count" - ); - - categoriesByCount = categoriesByCount.filter( - (c) => !mutedCategoryIds.includes(c.id) - ); - let ids = [ - ...unreadCategoryIds, - ...topCategoryIds, - ...categoriesByCount.map((c) => c.id), - ] - .uniq() - .slice(0, maxCategoriesToDisplay); - - assert.deepEqual( - [...queryAll(".category-link .category-name")].map((el) => el.innerText), - ids.map( - (id) => categoriesByCount.find((category) => category.id === id).name - ), - "top categories are in the correct order" - ); - }); - - test("badges link - disabled", async function (assert) { - this.siteSettings.enable_badges = false; - - await render(hbs``); - - assert.ok(!exists(".badge-link")); - }); - - test("badges link", async function (assert) { - await render(hbs``); - - assert.ok(exists(".badge-link")); - }); - - test("user directory link", async function (assert) { - await render(hbs``); - - assert.ok(exists(".user-directory-link")); - }); - - test("user directory link - disabled", async function (assert) { - this.siteSettings.enable_user_directory = false; - - await render(hbs``); - - assert.ok(!exists(".user-directory-link")); - }); -}); diff --git a/app/assets/javascripts/discourse/tests/integration/helpers/category-badge-test.js b/app/assets/javascripts/discourse/tests/integration/helpers/category-badge-test.js index 1c2a8767ea0..bbeaba056f0 100644 --- a/app/assets/javascripts/discourse/tests/integration/helpers/category-badge-test.js +++ b/app/assets/javascripts/discourse/tests/integration/helpers/category-badge-test.js @@ -14,7 +14,7 @@ module("Integration | Helper | category-badge", function (hooks) { await render(hbs`{{category-badge this.category}}`); assert.strictEqual( - query(".category-name").innerText.trim(), + query(".badge-category__name").innerText.trim(), this.category.name ); }); @@ -26,7 +26,7 @@ module("Integration | Helper | category-badge", function (hooks) { assert.ok( exists( - `a.badge-wrapper[href="/c/${this.category.slug}/${this.category.id}"]` + `a.badge-category__wrapper[href="/c/${this.category.slug}/${this.category.id}"]` ) ); }); diff --git a/app/assets/javascripts/discourse/tests/unit/lib/category-badge-test.js b/app/assets/javascripts/discourse/tests/unit/lib/category-badge-test.js index ff91c88b60a..c783da8d27b 100644 --- a/app/assets/javascripts/discourse/tests/unit/lib/category-badge-test.js +++ b/app/assets/javascripts/discourse/tests/unit/lib/category-badge-test.js @@ -26,11 +26,11 @@ module("Unit | Utility | category-badge", function (hooks) { assert.strictEqual(tag.tagName, "A", "it creates a `a` wrapper tag"); assert.strictEqual( tag.className.trim(), - "badge-wrapper bullet", + "badge-category__wrapper", "it has the correct class" ); - const label = tag.children[1]; + const label = tag.children[0]; assert.strictEqual( label.title, "cool description", @@ -108,11 +108,12 @@ module("Unit | Utility | category-badge", function (hooks) { }); let tag = $.parseHTML(categoryBadgeHTML(rtlCategory))[0]; - let dirSpan = tag.children[1].children[0]; + + let dirSpan = tag.children[0].children[0]; assert.strictEqual(dirSpan.dir, "rtl"); tag = $.parseHTML(categoryBadgeHTML(ltrCategory))[0]; - dirSpan = tag.children[1].children[0]; + dirSpan = tag.children[0].children[0]; assert.strictEqual(dirSpan.dir, "ltr"); }); diff --git a/app/assets/javascripts/select-kit/addon/components/category-drop.js b/app/assets/javascripts/select-kit/addon/components/category-drop.js index 654524ae871..246544a3d81 100644 --- a/app/assets/javascripts/select-kit/addon/components/category-drop.js +++ b/app/assets/javascripts/select-kit/addon/components/category-drop.js @@ -15,11 +15,9 @@ export const ALL_CATEGORIES_ID = "all-categories"; export default ComboBoxComponent.extend({ pluginApiIdentifiers: ["category-drop"], - classNameBindings: ["categoryStyle"], classNames: ["category-drop"], value: readOnly("category.id"), content: readOnly("categoriesWithShortcuts.[]"), - categoryStyle: readOnly("siteSettings.category_style"), noCategoriesLabel: I18n.t("categories.no_subcategory"), navigateToEdit: false, editingCategory: false, diff --git a/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js b/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js index a3df706fd67..82c2c03c6b3 100644 --- a/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js +++ b/app/assets/javascripts/select-kit/addon/components/category-drop/category-drop-header.js @@ -1,13 +1,8 @@ -import { readOnly } from "@ember/object/computed"; -import { schedule } from "@ember/runloop"; -import { htmlSafe } from "@ember/template"; import discourseComputed from "discourse-common/utils/decorators"; import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header"; export default ComboBoxSelectBoxHeaderComponent.extend({ classNames: ["category-drop-header"], - classNameBindings: ["categoryStyleClass"], - categoryStyleClass: readOnly("site.category_style"), @discourseComputed("selectedContent.color") categoryBackgroundColor(categoryColor) { @@ -18,45 +13,4 @@ export default ComboBoxSelectBoxHeaderComponent.extend({ categoryTextColor(categoryTextColor) { return categoryTextColor || "#333"; }, - - @discourseComputed( - "selectedContent", - "categoryBackgroundColor", - "categoryTextColor" - ) - categoryStyle(category, categoryBackgroundColor, categoryTextColor) { - const categoryStyle = this.siteSettings.category_style; - - if (categoryStyle === "bullet") { - return; - } - - if (category) { - if (categoryBackgroundColor || categoryTextColor) { - let style = ""; - if (categoryBackgroundColor) { - if (categoryStyle === "box") { - style += `border-color: #${categoryBackgroundColor}; background-color: #${categoryBackgroundColor};`; - if (categoryTextColor) { - style += `color: #${categoryTextColor};`; - } - } - } - return htmlSafe(style); - } - } - }, - - didInsertElement() { - this._super(...arguments); - - schedule("afterRender", () => { - if (this.categoryStyle) { - this.element.setAttribute("style", this.categoryStyle); - this.element - .querySelector(".caret-icon") - .setAttribute("style", this.categoryStyle); - } - }); - }, }); diff --git a/app/assets/javascripts/select-kit/addon/components/tag-drop.js b/app/assets/javascripts/select-kit/addon/components/tag-drop.js index 69918cba370..7e93649e458 100644 --- a/app/assets/javascripts/select-kit/addon/components/tag-drop.js +++ b/app/assets/javascripts/select-kit/addon/components/tag-drop.js @@ -15,10 +15,9 @@ const MORE_TAGS_COLLECTION = "MORE_TAGS_COLLECTION"; export default ComboBoxComponent.extend(TagsMixin, { pluginApiIdentifiers: ["tag-drop"], - classNameBindings: ["categoryStyle", "tagClass"], + classNameBindings: ["tagClass"], classNames: ["tag-drop"], value: readOnly("tagId"), - categoryStyle: setting("category_style"), maxTagSearchResults: setting("max_tag_search_results"), sortTagsAlphabetically: setting("tags_sort_alphabetically"), maxTagsInFilterList: setting("max_tags_in_filter_list"), diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss index fa936bd64dd..bd18a115f87 100644 --- a/app/assets/stylesheets/common/base/_topic-list.scss +++ b/app/assets/stylesheets/common/base/_topic-list.scss @@ -3,11 +3,6 @@ .list-controls { background: var(--d-content-background); - a.badge-category { - padding: 3px 12px; - font-size: var(--font-up-1); - } - .combo-box .combo-box-header { background: var(--secondary); color: var(--primary); @@ -129,10 +124,11 @@ a.title:not(.badge-notification) { color: var(--primary-medium); } - span.badge-category { + .badge-category { color: var(--primary-medium); } - a.discourse-tag { + .discourse-tag, + .discourse-tag:visited { color: var(--primary-medium); } } @@ -258,10 +254,10 @@ display: flex; flex-wrap: wrap; align-items: center; + gap: 0.5em; .discourse-tags { flex-wrap: wrap; } - a.badge-wrapper.box, a.discourse-tag.box { padding-top: 0; padding-bottom: 0; diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss index 861c4f62ca4..82e0c1b5369 100644 --- a/app/assets/stylesheets/common/base/category-list.scss +++ b/app/assets/stylesheets/common/base/category-list.scss @@ -227,7 +227,7 @@ align-items: center; @include ellipsis; margin-bottom: 0.6em; - .badge-wrapper { + .badge-category__wrapper { overflow: hidden; } .subcategory-image-placeholder { diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index bf999028417..b1eba184d7e 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -278,11 +278,12 @@ html.composer-open { max-width: 100%; overflow: hidden; display: flex; - .badge-wrapper { + gap: 0 0.5em; + .badge-category__wrapper { overflow: hidden; } // This prevents the first category from being too-truncated at the expense of a long subcategory - .badge-wrapper:first-of-type:not(:last-of-type) { + .badge-category__wrapper:first-of-type:not(:last-of-type) { flex: 1 0 auto; max-width: 50%; } diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss index 44580fed63f..e750db85e0e 100644 --- a/app/assets/stylesheets/common/base/faqs.scss +++ b/app/assets/stylesheets/common/base/faqs.scss @@ -9,7 +9,7 @@ max-width: 700px; } .about.category-moderators { - .badge-wrapper.bullet .badge-category { + .badge-category__wrapper .badge-category { color: var(--primary); } } diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index e14cacbe9b9..1f1573c065c 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/app/assets/stylesheets/common/base/header.scss @@ -290,6 +290,7 @@ "categories extra"; grid-template-columns: auto minmax(2em, 1fr); // min must be as wide as ellipsis align-items: baseline; + gap: 0 0.5em; .header-title { grid-area: title; } @@ -322,22 +323,14 @@ .categories-wrapper { display: inline-flex; flex: 0 1 auto; + gap: 0 0.5em; @include ellipsis; - .badge-wrapper { - @include ellipsis; - } } - .badge-wrapper { - margin-right: 0.7em; + .badge-category__wrapper { min-width: 2.75em; // min needed for ellipsis - } - .badge-wrapper { - &.bullet, - &.bar, - &.none { - span.badge-category { - color: var(--header_primary-high); - } + @include ellipsis; + .badge-category { + color: var(--header_primary-high); } } .topic-header-extra { diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss index 59d4bc37f47..6119e56551c 100644 --- a/app/assets/stylesheets/common/base/history.scss +++ b/app/assets/stylesheets/common/base/history.scss @@ -48,9 +48,6 @@ flex-wrap: wrap; align-items: center; gap: 0.5em; - .badge-wrapper { - margin: 0; - } } #display-modes { @@ -170,9 +167,6 @@ #revisions { word-wrap: break-word; - .badge-wrapper { - margin: 0; - } table { margin-top: 10px; tr { diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 3aefabf6421..d7dd9317614 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -274,10 +274,6 @@ .panel-body { overflow-y: auto; } - - span.badge-category { - max-width: 100px; - } } .menu-links.columned { @@ -370,22 +366,6 @@ font-size: var(--font-down-1); line-height: var(--line-height-large); } - .badge-wrapper { - &.bar, - &.bullet { - color: var(--primary); - padding: 0 0 0 0.15em; - } - &.box { - color: var(--secondary); - + a.badge.badge-notification { - padding-top: 2px; - } - span { - z-index: z("base") * -1; - } - } - } } // note these topic counts only appear for anons in the category hamburger drop down diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 989282a71b8..6113d9260e6 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -611,6 +611,9 @@ max-width: 90%; } .topic-categories { + display: flex; + font-weight: normal; + gap: 0.5em; width: 100%; } } diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss index bda5490e890..8738f3f5e74 100644 --- a/app/assets/stylesheets/common/base/not-found.scss +++ b/app/assets/stylesheets/common/base/not-found.scss @@ -49,7 +49,7 @@ display: none; } } - a:not(.badge-wrapper) { + a:not(.badge-category__wrapper) { flex-basis: 100%; } } diff --git a/app/assets/stylesheets/common/base/reorder-categories.scss b/app/assets/stylesheets/common/base/reorder-categories.scss index e325842aa96..7b51fcc23f2 100644 --- a/app/assets/stylesheets/common/base/reorder-categories.scss +++ b/app/assets/stylesheets/common/base/reorder-categories.scss @@ -25,7 +25,7 @@ } } } - .badge-wrapper span.badge-category { + .badge-category__wrapper .badge-category { max-width: 20em; @include breakpoint(mobile-extra-large) { max-width: 30vw; diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss index 737d9ed72b2..232f2911d02 100644 --- a/app/assets/stylesheets/common/base/search-menu.scss +++ b/app/assets/stylesheets/common/base/search-menu.scss @@ -112,13 +112,7 @@ $search-pad-horizontal: 0.5em; display: flex; flex-wrap: wrap; align-items: baseline; - - .badge-wrapper { - margin-right: 0.5em; - } - .discourse-tags .discourse-tag { - margin-right: 0.35em; - } + gap: 0 0.5em; } } @@ -255,9 +249,8 @@ $search-pad-horizontal: 0.5em; .search-item-prefix { margin-right: 0.33em; } - .badge-wrapper { + .badge-category__wrapper { font-size: var(--font-0); - margin-right: 0.5em; } .search-link { display: flex; diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss index 222b36d1b22..ef3ab38c518 100644 --- a/app/assets/stylesheets/common/base/search.scss +++ b/app/assets/stylesheets/common/base/search.scss @@ -301,7 +301,8 @@ display: flex; flex-wrap: wrap; margin-top: 0.25em; - .badge-wrapper { + gap: 0 0.5em; + .badge-category__wrapper { max-width: 100%; } } @@ -313,7 +314,6 @@ .discourse-tag.simple { font-size: var(--font-down-1); - margin-right: 0.25em; } } @@ -363,7 +363,6 @@ .discourse-tag.simple { font-size: var(--font-down-1); - margin-right: 0.25em; } } diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 3dd4fd76d6d..f6988d3c264 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -69,11 +69,11 @@ height: 15px; } - .badge-wrapper { + .badge-category__wrapper { font-size: 100%; width: 100%; - .category-name { + .badge-category__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 7e1fd655622..6d9623ce36f 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -38,6 +38,7 @@ display: flex; flex-wrap: wrap; align-items: center; + gap: 0.5em; .topic-header-extra { display: inline-flex; diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss index 6a9243afd7e..1347b0e8783 100644 --- a/app/assets/stylesheets/common/base/topic-admin-menu.scss +++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss @@ -65,9 +65,6 @@ &:not(:last-of-type) { border-bottom: 1px solid var(--primary-low); } - .badge-wrapper { - margin-right: 0; - } .desc { display: inline-block; vertical-align: middle; @@ -114,7 +111,7 @@ max-width: 90%; margin: 0; } - .badge-wrapper { + .badge-category__wrapper { white-space: nowrap; overflow: hidden; max-width: 19em; diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 06aa23e5de3..1982b42227a 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -470,10 +470,6 @@ aside.quote { margin-top: 1em; margin-bottom: 1em; - .badge-wrapper { - margin-left: 5px; - } - .title { @include post-aside; @@ -1279,11 +1275,6 @@ span.mention { .topics { padding-bottom: 15px; } - .suggested-topics-message { - .badge-wrapper { - margin-right: 0; - } - } } .large-image-placeholder { diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 9b2a8f465ea..32439173cd8 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -265,10 +265,6 @@ $topic-progress-height: 42px; } } -a.badge-category { - margin-top: 5px; -} - #topic-title { .title-wrapper { display: flex; @@ -282,9 +278,7 @@ a.badge-category { margin-bottom: 0; width: 100%; } - a.badge-category { - margin-top: 5px; - } + a.edit-topic .d-icon { font-size: 0.8em; } diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss index 818c5576f23..221c31e9d2d 100644 --- a/app/assets/stylesheets/common/components/badges.scss +++ b/app/assets/stylesheets/common/components/badges.scss @@ -15,7 +15,10 @@ // Category badges // -------------------------------------------------- -.badge-wrapper { +.badge-category__wrapper { + color: var(--primary-high); + overflow: hidden; + text-overflow: ellipsis; font-size: var(--font-down-1); white-space: nowrap; position: relative; @@ -25,138 +28,42 @@ .badge-category { display: inline-flex; align-items: baseline; - .category-name { - text-overflow: ellipsis; - overflow: hidden; - } - .d-icon { - margin-right: 3px; - width: 0.74em; - height: 0.74em; - color: inherit; - } - } - - // ----- Bullet - - &.bullet { - margin-right: 12px; - span.badge-category { - color: var(--primary-high); - overflow: hidden; - .extra-info-wrapper & { - color: var(--header-primary); - } - } - .badge-category-parent-bg, - .badge-category-bg { - flex: 0 0 auto; - width: 9px; - height: 9px; - margin-right: 5px; - display: inline-block; - } - .badge-category-parent-bg { - // Subcategories - width: 5px; - margin-right: 0; - + .badge-category-bg { - width: 5px; - } - } - .d-icon { - color: var(--primary-medium); - } - } - - // ----- Box - - &.box { - margin-right: 5px; - padding: 2px 4px 2px 4px; - display: inline-flex; - span { - overflow: hidden; - text-overflow: ellipsis; - &.badge-category-bg, - &.badge-category-parent-bg { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - &.badge-category-parent-bg { - // Subcategories - width: calc(100% - 5px); - & + .badge-category-bg { - left: 5px; - width: calc(100% - 5px); - & + .badge-category { - margin-left: 5px; - } - } - } - - &.badge-category { - position: relative; - } - } - + .topic-header-extra { - padding: 2px 4px 2px 4px; - } - } - - // ----- Bar - - &.bar { - margin-right: 5px; - - span.badge-category { - color: var(--primary-high); - padding-left: 4px; - overflow: hidden; - text-overflow: ellipsis; - - .extra-info-wrapper & { - color: var(--header-primary); - } - } - - .badge-category-parent-bg, - .badge-category-bg { - display: inline-block; - padding-left: 1px; - padding-right: 1px; - - &:before { - content: "\a0"; - } - } - } - - // ----- No category style - - &.none { + gap: 0.33em; color: var(--primary-high); - margin-right: 5px; - .badge-category { + + &:before { + content: ""; + background: var(--category-badge-color); + flex: 0 0 auto; + width: 0.67rem; // fixed dimensions because otherwise they may not be square + height: 0.67rem; + } + + &__name { + color: currentColor; + text-overflow: ellipsis; overflow: hidden; } - } -} -// Category badge dropdown -// -------------------------------------------------- - -.list-controls { - .category-breadcrumb { - a.badge-category { - display: inline-block; - padding: 6px 8px; - line-height: var(--line-height-medium); + &.--has-parent { + &:before { + background: linear-gradient( + 90deg, + var(--parent-category-badge-color) 50%, + var(--category-badge-color) 50% + ); + } } + + .extra-info-wrapper & { + color: var(--header_primary-high); + } + } + + .d-icon { + width: 0.74em; + height: 0.74em; + color: var(--primary-medium); } } diff --git a/app/assets/stylesheets/common/components/more-topics.scss b/app/assets/stylesheets/common/components/more-topics.scss index ddf146baef1..63a3dd3186b 100644 --- a/app/assets/stylesheets/common/components/more-topics.scss +++ b/app/assets/stylesheets/common/components/more-topics.scss @@ -56,31 +56,12 @@ } // Target the .badge-category text, the bullet icon needs to maintain `display: block` - .suggested-topics-message .badge-wrapper.bullet span.badge-category, - .suggested-topics-message .badge-wrapper.box span, - .suggested-topics-message .badge-wrapper.bar span { + .suggested-topics-message .badge-category__wrapper .badge-category { display: inline; - } - - .suggested-topics-message .badge-wrapper.bullet span.badge-category { - // Override vertical-align: text-top from `badges.css.scss` vertical-align: baseline; line-height: var(--line-height-medium); - } - - .suggested-topics-message .badge-wrapper.bullet { margin-right: 0; - } - - .suggested-topics-message .badge-wrapper.bullet, - .suggested-topics-message .badge-wrapper.bullet span.badge-category-parent-bg, - .suggested-topics-message .badge-wrapper.bullet span.badge-category-bg { - // Top of bullet aligns with top of line - adjust line height to vertically align bullet. line-height: 0.8; - } - - .suggested-topics-message .badge-wrapper.bullet span.badge-category, - .suggested-topics-message .badge-wrapper.bar span.badge-category { max-width: 150px; } } diff --git a/app/assets/stylesheets/common/printer-friendly.scss b/app/assets/stylesheets/common/printer-friendly.scss index 58649c225e3..86e95b259ce 100644 --- a/app/assets/stylesheets/common/printer-friendly.scss +++ b/app/assets/stylesheets/common/printer-friendly.scss @@ -32,7 +32,6 @@ #footer, .alert-info, .badge-category, - .badge-category-bg, .badge-notification.clicks, .crawler-nav, .powered-by-link, diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss index b7cbcbe549a..d5d746e7f9d 100644 --- a/app/assets/stylesheets/common/select-kit/category-drop.scss +++ b/app/assets/stylesheets/common/select-kit/category-drop.scss @@ -3,37 +3,16 @@ &.category-drop { min-width: auto; - .badge-wrapper { + .badge-category__wrapper { font-size: var(--font-0); font-weight: normal; max-width: 260px; - - &.box { - margin: 0; - - span.badge-category { - margin: 0; - .d-icon-lock { - margin-right: 5px; - } - } - } - } - - &.box.has-selection .category-drop-header { - .badge-wrapper.box { - padding: 0; - } } .category-drop-header { &.is-none .selected-name { color: inherit; } - - .badge-wrapper { - margin-right: 0; - } } .select-kit-row { @@ -62,14 +41,6 @@ color: var(--primary-medium); font-size: var(--font-down-1); } - - .badge-wrapper { - margin: 0; - - &:nth-child(2) { - margin-left: 10px; - } - } } } } diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss index 5ada7d72175..03a9c137360 100644 --- a/app/assets/stylesheets/common/select-kit/category-row.scss +++ b/app/assets/stylesheets/common/select-kit/category-row.scss @@ -8,16 +8,11 @@ align-items: center; max-width: 100%; flex: 1 1 auto; + gap: 0 0.5em; } .category-desc p { margin: 0; } - .category-status { - .badge-wrapper.box { - margin-bottom: 1px; - margin-top: 1px; - } - } .category-desc { margin: 0; font-size: var(--font-down-1); diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss index 972be8bae4a..c4b9169fdff 100644 --- a/app/assets/stylesheets/common/select-kit/category-selector.scss +++ b/app/assets/stylesheets/common/select-kit/category-selector.scss @@ -1,21 +1,28 @@ .select-kit, .select-kit-box { &.category-selector { - .select-kit-selected-name { - .badge-wrapper { - &.box { - margin: 2px; - padding: 0; - } - } - } - .category-row { max-width: 100%; + .category-status { + gap: 0 0.5em; + } + .topic-count { margin-left: 0.25em; } } + + .selected-choice-category { + .badge-category .d-icon { + margin: 0; + } + &:hover, + &:focus { + .badge-category { + color: var(--secondary); + } + } + } } } diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 254d6e1410c..e38c400026f 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -128,10 +128,6 @@ border-bottom-width: 5px; border-bottom-style: solid; } - - .badge-wrapper { - font-size: inherit; - } } .btn-clear { diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss index 9b8b0b06cb1..bc5c108cd76 100644 --- a/app/assets/stylesheets/desktop/category-list.scss +++ b/app/assets/stylesheets/desktop/category-list.scss @@ -59,9 +59,6 @@ align-items: baseline; margin-right: 0.3em; } - .badge-wrapper { - margin-right: 0.5em; - } .badge-notification.unread-posts { display: block; padding: 0; diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss index 03178789a34..2672450beab 100644 --- a/app/assets/stylesheets/desktop/latest-topic-list.scss +++ b/app/assets/stylesheets/desktop/latest-topic-list.scss @@ -40,17 +40,15 @@ flex: 0 1 auto; max-width: 65%; font-size: var(--font-0); - .badge-wrapper { - max-width: 100%; - .badge-category-bg { - flex-shrink: 0; - } - } - .top-row { margin-bottom: 0.1em; font-size: var(--font-up-1); } + .bottom-row { + display: flex; + flex-wrap: wrap; + gap: 0 0.5em; + } } .topic-stats { flex: 1 0 0px; diff --git a/app/assets/stylesheets/mobile/components/more-topics.scss b/app/assets/stylesheets/mobile/components/more-topics.scss index 6bd8353e46c..b9b5d0901b4 100644 --- a/app/assets/stylesheets/mobile/components/more-topics.scss +++ b/app/assets/stylesheets/mobile/components/more-topics.scss @@ -7,8 +7,8 @@ .more-content-topics { padding: 15px 0 15px 0; - a.badge-category, - a.badge-category-parent { + .badge-category, + .badge-category-parent { font-size: var(--font-down-1); vertical-align: top; } diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index 024751f460a..a4594e927c1 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -190,11 +190,17 @@ .topic-item-stats__category-tags { margin-right: 0.5em; max-width: 90%; + line-height: var(--line-height-medium); .discourse-tags { display: inline; } + .badge-category__wrapper { + vertical-align: bottom; + margin-right: 0.5em; + } + .badge-wrapper, .discourse-tag { // disabling clicks because these targets are too small on mobile @@ -209,23 +215,6 @@ max-width: 100%; vertical-align: bottom; } - - .badge-wrapper { - &.bullet { - + .discourse-tags { - .discourse-tag { - vertical-align: bottom; - } - } - } - &.box { - + .discourse-tags { - .discourse-tag { - vertical-align: text-bottom; - } - } - } - } } .age { @@ -379,10 +368,6 @@ tr.category-topic-link { } } - th .badge-category { - margin: 0; - } - .category-topic-link { .num { white-space: nowrap; diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss index 9f9bdbc5493..b3b9f1ff797 100644 --- a/app/assets/stylesheets/mobile/topic.scss +++ b/app/assets/stylesheets/mobile/topic.scss @@ -120,6 +120,10 @@ sub sub { width: 100%; margin-top: 0; } + + .topic-category { + margin-top: 0.25em; + } } // make mobile timeline top and bottom dates easier to select diff --git a/app/models/admin_dashboard_data.rb b/app/models/admin_dashboard_data.rb index 20835e194d8..a23d5ba320c 100644 --- a/app/models/admin_dashboard_data.rb +++ b/app/models/admin_dashboard_data.rb @@ -219,8 +219,7 @@ class AdminDashboardData :unreachable_themes, :watched_words_check, :google_analytics_version_check, - :translation_overrides_check, - :deprecated_category_style_check + :translation_overrides_check register_default_scheduled_problem_checks @@ -460,10 +459,6 @@ class AdminDashboardData themes_html_format(themes, "dashboard.unreachable_themes") end - def deprecated_category_style_check - I18n.t("dashboard.category_style_deprecated") if SiteSetting.category_style != "bullet" - end - private def themes_html_format(themes, i18n_key) diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml index 1a0b1a90cc2..39d75b910a7 100644 --- a/config/locales/server.en.yml +++ b/config/locales/server.en.yml @@ -2008,7 +2008,6 @@ en: desktop_category_page_style: "Visual style for the /categories page." category_colors: "A list of hexadecimal color values allowed for categories." - category_style: "Visual style for category badges." default_dark_mode_color_scheme_id: "The color scheme used when in dark mode." dark_mode_none: "None" @@ -3033,7 +3032,7 @@ en: reviewable_queued_post_revise_and_reject_new_topic: title: "Feedback on your topic" - subject_template: "Feedback on new topic titled \"%{topic_title}\"" + subject_template: 'Feedback on new topic titled "%{topic_title}"' text_body_template: | Hi %{username}, diff --git a/config/site_settings.yml b/config/site_settings.yml index d3d60cac623..fdb81f6036c 100644 --- a/config/site_settings.yml +++ b/config/site_settings.yml @@ -260,15 +260,6 @@ basic: type: list list_type: compact default: "BF1E2E|F1592A|F7941D|9EB83B|3AB54A|12A89D|25AAE2|0E76BD|652D90|92278F|ED207B|8C6238|231F20|808281|B3B5B4|E45735" - category_style: - client: true - default: "bullet" - type: enum - choices: - - bar - - box - - bullet - - none max_category_nesting: client: true default: 2 diff --git a/lib/category_badge.rb b/lib/category_badge.rb index 9cf422e5880..b559a8a98a2 100644 --- a/lib/category_badge.rb +++ b/lib/category_badge.rb @@ -1,31 +1,6 @@ # frozen_string_literal: true module CategoryBadge - def self.category_stripe(color, classes) - style = color ? "style='background-color: ##{color};'" : "" - "" - end - - def self.inline_category_stripe(color, styles = "", insert_blank = false) - "#{insert_blank ? " " : ""}" - end - - def self.inline_badge_wrapper_style(category) - style = - case (SiteSetting.category_style || :box).to_sym - when :bar - "line-height: 1.25; margin-right: 5px;" - when :box - "background-color:##{category.color}; line-height: 1.5; margin-top: 5px; margin-right: 5px;" - when :bullet - "line-height: 1; margin-right: 10px;" - when :none - "" - end - - " style='font-size: 0.857em; white-space: nowrap; display: inline-block; position: relative; #{style}'" - end - def self.html_for(category, opts = nil) opts = opts || {} @@ -35,90 +10,32 @@ module CategoryBadge # By default hide uncategorized return "" if category.uncategorized? && !opts[:show_uncategorized] - extra_classes = "#{opts[:extra_classes]} #{SiteSetting.category_style}" + extra_classes = "#{opts[:extra_classes]}" result = +"" - # parent span - unless category.parent_category_id.nil? || opts[:hide_parent] - parent_category = Category.find_by(id: category.parent_category_id) - result << if opts[:inline_style] - case (SiteSetting.category_style || :box).to_sym - when :bar - inline_category_stripe( - parent_category.color, - "display: inline-block; padding: 1px;", - true, - ) - when :box - inline_category_stripe( - parent_category.color, - "display: inline-block; padding: 0 1px;", - true, - ) - when :bullet - inline_category_stripe( - parent_category.color, - "display: inline-block; width: 5px; height: 10px; line-height: 1;", - ) - when :none - "" - end - else - category_stripe(parent_category.color, "badge-category-parent-bg") - end - end - - # sub parent or main category span - result << if opts[:inline_style] - case (SiteSetting.category_style || :box).to_sym - when :bar - inline_category_stripe(category.color, "display: inline-block; padding: 1px;", true) - when :box - "" - when :bullet - inline_category_stripe( - category.color, - "display: inline-block; width: #{category.parent_category_id.nil? ? 10 : 5}px; height: 10px;", - ) - when :none - "" - end - else - category_stripe(category.color, "badge-category-bg") - end + # parent class + parent_category = + Category.find_by(id: category.parent_category_id) unless category.parent_category_id.nil? + has_parent_class = parent_category ? "--has-parent" : "" # category name - class_names = "badge-category clear-badge" + class_names = "badge-category #{has_parent_class}" description = category.description_text ? "title='#{category.description_text}'" : "" category_url = opts[:absolute_url] ? "#{Discourse.base_url_no_prefix}#{category.url}" : category.url - extra_span_classes = - if opts[:inline_style] - case (SiteSetting.category_style || :box).to_sym - when :bar - "color: #222222; padding: 3px; vertical-align: text-top; margin-top: -3px; display: inline-block;" - when :box - "color: ##{category.text_color}; padding: 0 5px;" - when :bullet - "color: #222222; vertical-align: text-top; line-height: 1; margin-left: 4px; padding-left: 2px; display: inline;" - when :none - "" - end + "max-width: 150px; overflow: hidden; text-overflow: ellipsis;" - elsif (SiteSetting.category_style).to_sym == :box - "color: ##{category.text_color}" - else - "" - end - result << "" - - result << ERB::Util.html_escape(category.name) << "" + # category badge structure + result << "" + result << "" + result << ERB::Util.html_escape(category.name) + result << "" + # wrapping link result = - "#{result}" + "#{result}" result.html_safe end diff --git a/lib/onebox/templates/discourse_category_onebox.mustache b/lib/onebox/templates/discourse_category_onebox.mustache index 24c9fcb3179..001f02fbf54 100644 --- a/lib/onebox/templates/discourse_category_onebox.mustache +++ b/lib/onebox/templates/discourse_category_onebox.mustache @@ -4,11 +4,9 @@ {{/logo_url}}

    - - {{#color}} - - {{/color}} - {{name}} + + {{{name}}} +

    {{#description}} @@ -22,9 +20,9 @@
    {{#subcategories}} - - - {{name}} + + + {{{name}}} {{/subcategories}} diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss index 42156cbad7e..8a15ff1167a 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss @@ -145,10 +145,6 @@ display: none; margin-left: auto; } - .badge-wrapper { - align-items: center; - margin-right: 0; - } .emoji { margin-left: 0.3em; diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss b/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss index 49e25ad8c10..3ac338fa7e7 100644 --- a/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss +++ b/plugins/chat/assets/stylesheets/common/chat-channel-settings.scss @@ -6,11 +6,6 @@ @include ellipsis; } - // category badge margin reset - .badge-wrapper.bullet { - margin-right: 0; - } - .chat-retention-reminder-text { color: var(--primary-medium); } diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss index 6e652513afe..ec1ca9bc93d 100644 --- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss +++ b/plugins/chat/assets/stylesheets/common/chat-drawer.scss @@ -196,9 +196,6 @@ a.chat-drawer-header__title { } } - .badge-wrapper.bullet { - margin-right: 0px; - } .dm-usernames { max-width: 100%; overflow: hidden; diff --git a/plugins/chat/spec/system/channel_settings_page_spec.rb b/plugins/chat/spec/system/channel_settings_page_spec.rb index b81907dfdbf..ebc05f45fb9 100644 --- a/plugins/chat/spec/system/channel_settings_page_spec.rb +++ b/plugins/chat/spec/system/channel_settings_page_spec.rb @@ -77,7 +77,7 @@ RSpec.describe "Channel - Info - Settings page", type: :system do it "shows channel info" do chat_page.visit_channel_settings(channel_1) - expect(page.find(".category-name")).to have_content(channel_1.chatable.name) + expect(page.find(".badge-category__name")).to have_content(channel_1.chatable.name) expect(page.find(".chat-channel-settings__name")).to have_content(channel_1.title) expect(page.find(".chat-channel-settings__slug")).to have_content(channel_1.slug) end diff --git a/spec/fixtures/onebox/discourse_topic.response b/spec/fixtures/onebox/discourse_topic.response index 6520ba22f61..52eb3247403 100644 --- a/spec/fixtures/onebox/discourse_topic.response +++ b/spec/fixtures/onebox/discourse_topic.response @@ -233,9 +233,8 @@ And that too in just over an year, way to go! [boom]">