FEATURE: double color for subcategories prefix (#18525)

Subcategories should display color from parent category and subcategory to clearly indicate that it is a subcategory.

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}} >
     </Sidebar::SectionLink>
   {{/each}}

app/assets/javascripts/discourse/app/components/sidebar/section-link-prefix.hbs

@@ -1,5 +1,5 @@
-{{#if @prefixValue}}
-  <span class={{concat-class "sidebar-section-link-prefix" @prefixType @prefixCSSClass}} style={{@prefixCSS}}>
+{{#if @prefixType}}
+  <span class={{concat-class "sidebar-section-link-prefix" @prefixType @prefixCSSClass}} style={{html-safe (concat "color: " @prefixColor)}}>
     {{#if (eq @prefixType "image")}}
       <img src={{@prefixValue}} class="prefix-image">
     {{/if}}
@@ -14,6 +14,10 @@
       {{d-icon @prefixValue class="prefix-icon"}}
     {{/if}}
 
+    {{#if (eq @prefixType "span")}}
+      <span style={{@prefixCSS}} class="prefix-span"></span>
+    {{/if}}
+
     {{#if @prefixBadge}}
       {{d-icon @prefixBadge class="prefix-badge"}}
     {{/if}}

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}}
         />
 

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;
   }
 }

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}} >
       </Sidebar::SectionLink>
     {{/each}}

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() {

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) {

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 {