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
This commit is contained in:
Alan Guo Xiang Tan 2022-08-17 09:40:43 +08:00 committed by GitHub
parent 913db5d546
commit 4657110c35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 62 additions and 32 deletions

View File

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

View File

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

View File

@ -14,7 +14,7 @@
@current-when={{@currentWhen}}
@title={{@title}}
>
{{#if @prefixValue }}
{{#if @prefixValue}}
<span class="sidebar-section-link-prefix {{@prefixType}} {{@prefixCSSClass}}" style={{this.prefixCSS}}>
{{#if (eq @prefixType "image")}}
<img src={{@prefixValue}} class="prefix-image">

View File

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

View File

@ -61,7 +61,7 @@ export default {
{
id: 3,
name: "meta",
color: "aaa",
color: "aaaaaa",
text_color: "FFFFFF",
slug: "meta",
topic_count: 122,

View File

@ -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);

View File

@ -181,6 +181,7 @@ module SvgSprite
"sign-out-alt",
"signal",
"sliders-h",
"square-full",
"star",
"step-backward",
"step-forward",