From 4657110c35cd5684d4554bef1eb4a1287d2d4aab Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 17 Aug 2022 09:40:43 +0800 Subject: [PATCH] UX: Make category section link icons consistent with Sidebar's interface (#17922) Instead of relying on another help to generate the icons, we want to rely on the interface for adding prefix icons. This ensures that prefix icons are consistent across the section links in Sidebar --- .../category-section-link.js | 26 +++++++--- .../components/sidebar/categories-section.hbs | 6 ++- .../components/sidebar/section-link.hbs | 2 +- .../sidebar-categories-section-test.js | 49 +++++++++++-------- .../discourse/tests/fixtures/site-fixtures.js | 2 +- .../common/base/sidebar-section-link.scss | 8 ++- lib/svg_sprite.rb | 1 + 7 files changed, 62 insertions(+), 32 deletions(-) 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",