From b02ece0bbb0fbf13c42de84269368ee70eb80101 Mon Sep 17 00:00:00 2001 From: Krzysztof Kotlarek Date: Tue, 11 Oct 2022 10:27:06 +1100 Subject: [PATCH] FEATURE: double color for subcategories prefix (#18525) Subcategories should display color from parent category and subcategory to clearly indicate that it is a subcategory. --- .../sidebar/anonymous/categories-section.hbs | 1 + .../sidebar/section-link-prefix.hbs | 8 +++- .../app/components/sidebar/section-link.hbs | 1 + .../app/components/sidebar/section-link.js | 11 ++++-- .../sidebar/user/categories-section.hbs | 1 + .../category-section-link.js | 10 +++-- .../sidebar-user-categories-section-test.js | 37 +++++++++++-------- .../common/base/sidebar-section-link.scss | 7 +++- 8 files changed, 51 insertions(+), 25 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs index c59afa73c53..7b7ee5b7497 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/anonymous/categories-section.hbs @@ -13,6 +13,7 @@ @model={{sectionLink.model}} @prefixType={{sectionLink.prefixType}} @prefixValue={{sectionLink.prefixValue}} + @prefixCSS={{sectionLink.prefixCSS}} @prefixColor={{sectionLink.prefixColor}} > {{/each}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs index 0e4d9600d35..ee41f1194a3 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs @@ -1,5 +1,5 @@ -{{#if @prefixValue}} - +{{#if @prefixType}} + {{#if (eq @prefixType "image")}} {{/if}} @@ -14,6 +14,10 @@ {{d-icon @prefixValue class="prefix-icon"}} {{/if}} + {{#if (eq @prefixType "span")}} + + {{/if}} + {{#if @prefixBadge}} {{d-icon @prefixBadge class="prefix-badge"}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs index 63926803547..dd172a122bf 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs @@ -29,6 +29,7 @@ @prefixValue={{@prefixValue}} @prefixCSSClass={{@prefixCSSClass}} @prefixCSS={{this.prefixCSS}} + @prefixColor={{this.prefixColor}} @prefixBadge={{@prefixBadge}} /> diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js index 7b87c8f8e65..6155739c724 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js @@ -1,5 +1,4 @@ import Component from "@glimmer/component"; -import { htmlSafe } from "@ember/template"; export default class SectionLink extends Component { willDestroy() { @@ -42,13 +41,17 @@ export default class SectionLink extends Component { return []; } - get prefixCSS() { + get prefixColor() { const color = this.args.prefixColor; if (!color || !color.match(/^\w{6}$/)) { - return htmlSafe(""); + return ""; } - return htmlSafe("color: #" + color); + return "#" + color; + } + + get prefixCSS() { + return this.args.prefixCSS; } } diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs index 8f3f605c10f..2d40a988837 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs @@ -19,6 +19,7 @@ @prefixBadge={{sectionLink.prefixBadge}} @prefixType={{sectionLink.prefixType}} @prefixValue={{sectionLink.prefixValue}} + @prefixCSS={{sectionLink.prefixCSS}} @prefixColor={{sectionLink.prefixColor}} > {{/each}} diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js index 3fc33ea2dff..e7172d5f040 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/categories-section/category-section-link.js @@ -49,11 +49,15 @@ export default class CategorySectionLink { } get prefixType() { - return "icon"; + return "span"; } - get prefixValue() { - return "square-full"; + get prefixCSS() { + if (this.category.parentCategory) { + return `background: linear-gradient(90deg, #${this.category.parentCategory.color} 50%, #${this.category.color} 50%)`; + } else { + return `background: #${this.category.color}`; + } } get prefixColor() { diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js index e7e617893ea..42a99598831 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js @@ -88,12 +88,18 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { const category1 = categories[0]; const category2 = categories[1]; const category3 = categories[5]; + const category4 = categories[24]; updateCurrentUser({ - sidebar_category_ids: [category1.id, category2.id, category3.id], + sidebar_category_ids: [ + category1.id, + category2.id, + category3.id, + category4.id, + ], }); - return { category1, category2, category3 }; + return { category1, category2, category3, category4 }; }; test("clicking on section header link", async function (assert) { @@ -170,13 +176,14 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { assert.deepEqual( categoryNames, - ["abc", "aBC", "efg"], + ["abc", "aBC", "efg", "Sub Category"], "category section links are displayed in the right order" ); }); test("category section links", async function (assert) { - const { category1, category2, category3 } = setupUserSidebarCategories(); + const { category1, category2, category3, category4 } = + setupUserSidebarCategories(); await visit("/"); @@ -184,22 +191,15 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { count( ".sidebar-section-categories .sidebar-section-link:not(.sidebar-section-link-all-categories)" ), - 3, - "there should only be 3 section link under the section" + 4, + "there should only be 4 section link under the section" ); assert.ok( exists( - `.sidebar-section-link-${category1.slug} .prefix-icon.d-icon-square-full` + `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: #${category1.color}"]` ), - "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" + "category1 section link is rendered with solid prefix icon color" ); assert.strictEqual( @@ -252,6 +252,13 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) { ), "category3 section link is rendered with lock prefix badge icon as it is read restricted" ); + + assert.ok( + exists( + `.sidebar-section-link-${category4.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #${category4.parentCategory.color} 50%, #${category4.color} 50%)"]` + ), + "sub category section link is rendered with double prefix color" + ); }); test("category section link have the right title", async function (assert) { diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index 0b27b80828e..b885a50beed 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -121,7 +121,8 @@ } } - &.icon { + &.icon, + &.span { position: relative; color: var(--primary-medium); @@ -142,6 +143,10 @@ margin-right: -0.2em; } } + .prefix-span { + width: 0.9em; + height: 0.9em; + } } .sidebar-section-link-hover {