diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js index 8fe9d3f2a33..5a9441909e2 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js @@ -1,10 +1,8 @@ import I18n from "I18n"; -import { htmlSafe } from "@ember/template"; - import { tracked } from "@glimmer/tracking"; + import { bind } from "discourse-common/utils/decorators"; -import { categoryBadgeHTML } from "discourse/helpers/category-link"; import Category from "discourse/models/category"; export default class CategorySectionLink { @@ -47,9 +45,25 @@ export default class CategorySectionLink { } get text() { - return htmlSafe( - categoryBadgeHTML(this.category, { link: false, categoryStyle: "bullet" }) - ); + return this.category.name; + } + + get prefixType() { + return "icon"; + } + + get prefixValue() { + return "square-full"; + } + + get prefixColor() { + return this.category.color; + } + + get prefixBadge() { + if (this.category.read_restricted) { + return "lock"; + } } get badgeText() { diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs index 2ab53b06dd5..5da3adc761f 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs @@ -17,7 +17,11 @@ @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} @model={{sectionLink.model}} - @badgeText={{sectionLink.badgeText}} > + @badgeText={{sectionLink.badgeText}} + @prefixBadge={{sectionLink.prefixBadge}} + @prefixType={{sectionLink.prefixType}} + @prefixValue={{sectionLink.prefixValue}} + @prefixColor={{sectionLink.prefixColor}} > {{/each}} {{else}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs index bc6e2edf8b2..e6dfc90c2e1 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs @@ -14,7 +14,7 @@ @current-when={{@currentWhen}} @title={{@title}} > - {{#if @prefixValue }} + {{#if @prefixValue}} {{#if (eq @prefixType "image")}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js index 9c7c2390b1a..0164ed67e21 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js @@ -84,8 +84,13 @@ acceptance("Sidebar - Categories Section", function (needs) { const categories = Site.current().categories; const category1 = categories[0]; const category2 = categories[1]; - updateCurrentUser({ sidebar_category_ids: [category1.id, category2.id] }); - return { category1, category2 }; + const category3 = categories[5]; + + updateCurrentUser({ + sidebar_category_ids: [category1.id, category2.id, category3.id], + }); + + return { category1, category2, category3 }; }; test("clicking on section header link", async function (assert) { @@ -144,34 +149,29 @@ acceptance("Sidebar - Categories Section", function (needs) { ); }); - test("category section links uses the bullet style even when category_style site setting has been configured", async function (assert) { - this.siteSettings.category_style = "box"; - const { category1 } = setupUserSidebarCategories(); - - await visit("/"); - - assert.ok( - exists( - `.sidebar-section-categories .sidebar-section-link-${category1.slug} .badge-wrapper.bullet` - ), - "category badge uses the bullet style" - ); - }); - test("category section links", async function (assert) { - const { category1, category2 } = setupUserSidebarCategories(); + const { category1, category2, category3 } = setupUserSidebarCategories(); await visit("/"); assert.strictEqual( count(".sidebar-section-categories .sidebar-section-link"), - 2, - "there should only be two section link under the section" + 3, + "there should only be 3 section link under the section" ); assert.ok( - exists(`.sidebar-section-link-${category1.slug} .badge-category`), - "category1 section link is rendered with category badge" + exists( + `.sidebar-section-link-${category1.slug} .prefix-icon.d-icon-square-full` + ), + "category1 section link is rendered with right prefix icon" + ); + + assert.ok( + exists( + `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix[style="color: #${category1.color}"]` + ), + "category1 section link is rendered with right prefix icon color" ); assert.strictEqual( @@ -217,6 +217,13 @@ acceptance("Sidebar - Categories Section", function (needs) { exists(`.sidebar-section-link-${category2.slug}.active`), "the category2 section link is marked as active" ); + + assert.ok( + exists( + `.sidebar-section-link-${category3.slug} .sidebar-section-link-prefix .prefix-badge.d-icon-lock` + ), + "category3 section link is rendered with lock prefix badge icon as it is read restricted" + ); }); test("visiting category discovery new route", async function (assert) { diff --git a/app/assets/javascripts/discourse/tests/fixtures/site-fixtures.js b/app/assets/javascripts/discourse/tests/fixtures/site-fixtures.js index 784178a11dd..9c7475e1969 100644 --- a/app/assets/javascripts/discourse/tests/fixtures/site-fixtures.js +++ b/app/assets/javascripts/discourse/tests/fixtures/site-fixtures.js @@ -61,7 +61,7 @@ export default { { id: 3, name: "meta", - color: "aaa", + color: "aaaaaa", text_color: "FFFFFF", slug: "meta", topic_count: 122, diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 0ee3b76449b..7b03341d1ea 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -92,11 +92,15 @@ &.icon { position: relative; - margin-right: 0.75em; + margin-right: 0.5em; + + svg { + font-size: var(--font-down-1); + } svg.prefix-badge { position: absolute; - background-color: var(--primary-very-low); + background-color: transparent; border-radius: 50%; padding: 2px 2px 3px; color: var(--primary-high); diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb index bd8c105ebb4..de84ef0d6f0 100644 --- a/lib/svg_sprite.rb +++ b/lib/svg_sprite.rb @@ -181,6 +181,7 @@ module SvgSprite "sign-out-alt", "signal", "sliders-h", + "square-full", "star", "step-backward", "step-forward",