mirror of
https://github.com/discourse/discourse.git
synced 2024-12-05 13:23:38 +08:00
6ad9e4ad06
This commit adds a system to generate CSS variables and classes for categories and hashtags, which will be used in an effort to remove baked icons for hashtags and add color to those icons. This is in two parts. First I added an initializer generate a category color CSS variable style tag in the head tag that looks like this: ```css :root { --category-1-color: #0088CC; --category-2-color: #808281; --category-3-color: #E45735; --category-4-color: #A461EF; --category-5-color: #ee56c9; --category-6-color: #da28c2; --category-7-color: #ab8b0a; --category-8-color: #45da37; ... } ``` The number is the category ID. This only generates CSS variables for categories the user can access based on `site.categories`. If you need the parent color variable you can just use the `category.parentCategory.id` to get it. Then, I added an initializer to generate a hashtag CSS style tag using these variables. Only the category and channel hashtags need this, the category one generates the background-gradient needed for the swatch, and the channel just generates a color for the icon. This is done in an extendable way using the new `api.registerHashtagType` JS plugin API: ```css hashtag-color--category-1 { background: linear-gradient(90deg, var(--category-1-color) 50%, var(--category-1-color) 50%); } hashtag-color--category-2 { background: linear-gradient(90deg, var(--category-2-color) 50%, var(--category-2-color) 50%); } hashtag-color--category-5 { background: linear-gradient(90deg, var(--category-5-color) 50%, var(--category-4-color) 50%); } ... .hashtag-color--channel-4 { color: var(--category-12-color); } .hashtag-color--channel-92 { color: var(--category-24-color); } ``` Note if a category has a parent, its color is used in the gradient correctly. The numbers here are again IDs (e.g. channel ID, category ID) and the channel’s chatable ID is used to find the category color variable. |
||
---|---|---|
.. | ||
chat-composer-test.js | ||
chat-live-pane-collapse-test.js | ||
chat-live-pane-test.js | ||
hashtag-css-generator-test.js |