Icons don't show up in the sidebar then the color isn't defined

UX
,
1

Love that icons show on the sidebar now! :sunny: :sunglasses:

What seems a small glitch: Icons don’t show, when the color is not defined. E.g. on this screenshot the first category has an icon defined, but no color. Then the icon is not shown:

image

The downside to defining all icons with colors is that icons then won’t show with inherited colors on the list views (accent when the topic is unread/ dimmed down when the topic is read). E.g. here the Announcements icon shows with inherited color, while as the icon with defined color always stays the same:

image
image738×198 7.02 KB

I think icons should just show on the sidebar with the default icon color for the sidebar. Then it’s up to the user if they want to define a static color or not.

4 Likes
3

Sorry for the delay here @nolo, this makes sense, I added a pr-welcome tag to the topic, I’m open to looking at a PR that fixes this issue. Thanks!

3 Likes
4

Did a simple PR for this: FIX: Render sidebar icons when no color is defined by nolosb · Pull Request #32 · discourse/discourse-category-icons · GitHub

7 Likes
5

Thanks, fix is now merged!

6 Likes
6

Unfortunately, this change now renders all icons with defined colours in gray.

I’m using

category,icon,categoryColour
2 Likes
7

Yeah, now it use it by default if you leave empty the color. With remove categoryColor works for me.
like this: category,icon

2 Likes
8

Yes, but it breaks the existing definitions (I have quite a few).

@nolo Would you be so kind and include the test for categoryColo(u)r so that we don’t need to manually fix all definitions in all existing instances? Thanks in advance!

4 Likes
9

Ok, there’s quite some stuff going on here with colors :upside_down_face:

So actually the declaration is obsolete on both the default badges and on the sidebar. Just on the default badges it fails silently as it’s applied to an inline style:

The image shows a code snippet with a CSS rule for the ".badge-category_icon" element, which sets the display property to an invalid value of "inline-flex", causing an error message "Invalid property value" to be displayed. (Captioned by AI)

Did a PR for the sidebar regression: FIX: Render legacy color declaration by nolosb · Pull Request #34 · discourse/discourse-category-icons · GitHub

4 Likes