FEATURE: remove category badge style options, set bullet style as def…

…ault (#24198)
discourse · Nov 13, 2023 · 797da58 · 797da58 · discoursebot · Nov 13, 2023
1 parent 70b72ee
commit 797da58
Show file tree

Hide file tree

Showing 68 changed files with 292 additions and 877 deletions.
diff --git a/app/assets/javascripts/admin/addon/mixins/setting-component.js b/app/assets/javascripts/admin/addon/mixins/setting-component.js
@@ -5,7 +5,6 @@ import Mixin from "@ember/object/mixin";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { isNone } from "@ember/utils";
-import { categoryLinkHTML } from "discourse/helpers/category-link";
 import { ajax } from "discourse/lib/ajax";
 import { fmt, propertyNotEqual } from "discourse/lib/computed";
 import { splitString } from "discourse/lib/utilities";
@@ -113,14 +112,6 @@ export default Mixin.create({
 
   @discourseComputed("setting", "buffered.value")
   preview(setting, value) {
-    // A bit hacky, but allows us to use helpers
-    if (setting.setting === "category_style") {
-      const category = this.site.get("categories.firstObject");
-      if (category) {
-        return categoryLinkHTML(category, { categoryStyle: value });
-      }
-    }
-
     const preview = setting.preview;
     if (preview) {
       const escapedValue = preview.replace(/\{\{value\}\}/g, value);

diff --git a/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs
@@ -15,7 +15,21 @@
 
 {{#each this.categoryBreadcrumbs as |breadcrumb|}}
   {{#if breadcrumb.hasOptions}}
-    <li>
+    <li
+      style={{html-safe
+        (if
+          breadcrumb.category
+          (concat
+            "--category-bg-color:#"
+            breadcrumb.category.color
+            "; "
+            "--category-text-color:#"
+            breadcrumb.category.text_color
+            ";"
+          )
+        )
+      }}
+    >
       <CategoryDrop
         @category={{breadcrumb.category}}
         @categories={{breadcrumb.options}}

diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.hbs
@@ -1,10 +1,9 @@
 {{#each this.categories as |c|}}
   <div
     data-notification-level={{c.notificationLevelString}}
-    style={{unless this.noCategoryStyle (category-color-variable c.color)}}
+    style={{category-color-variable c.color}}
     class="category category-box category-box-{{c.slug}}
-      {{if c.isMuted 'muted'}}
-      {{if this.noCategoryStyle 'no-category-boxes-style'}}"
+      {{if c.isMuted 'muted'}}"
   >
     <div class="category-box-inner">
       <div class="category-box-heading">

diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js b/app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js
@@ -1,5 +1,4 @@
 import Component from "@ember/component";
-import { equal } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import discourseComputed from "discourse-common/utils/decorators";
 
@@ -9,7 +8,6 @@ export default Component.extend({
     ":category-boxes-with-topics",
     "anyLogos:with-logos:no-logos",
   ],
-  noCategoryStyle: equal("siteSettings.category_style", "none"),
   lockIcon: "lock",
 
   @discourseComputed("categories.[].uploaded_logo.url")

diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes.hbs b/app/assets/javascripts/discourse/app/components/categories-boxes.hbs
@@ -5,13 +5,12 @@
   />
 
   <div
-    style={{unless this.noCategoryStyle (category-color-variable c.color)}}
+    style={{category-color-variable c.color}}
     data-category-id={{c.id}}
     data-notification-level={{c.notificationLevelString}}
     data-url={{c.url}}
     class="category category-box category-box-{{c.slug}}
-      {{if c.isMuted 'muted'}}
-      {{if this.noCategoryStyle 'no-category-boxes-style'}}"
+      {{if c.isMuted 'muted'}}"
   >
     <div class="category-box-inner">
       {{#unless c.isMuted}}

diff --git a/app/assets/javascripts/discourse/app/components/categories-boxes.js b/app/assets/javascripts/discourse/app/components/categories-boxes.js
@@ -1,5 +1,4 @@
 import Component from "@ember/component";
-import { equal } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import discourseComputed from "discourse-common/utils/decorators";
 
@@ -10,7 +9,6 @@ export default Component.extend({
     "anyLogos:with-logos:no-logos",
     "hasSubcategories:with-subcategories",
   ],
-  noCategoryStyle: equal("siteSettings.category_style", "none"),
   lockIcon: "lock",
 
   @discourseComputed("categories.[].uploaded_logo.url")

diff --git a/app/assets/javascripts/discourse/app/components/categories-only.js b/app/assets/javascripts/discourse/app/components/categories-only.js
@@ -1,12 +1,10 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { equal } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   tagName: "",
   showMuted: false,
-  noCategoryStyle: equal("siteSettings.category_style", "none"),
 
   @discourseComputed("showMutedCategories", "filteredCategories.length")
   mutedToggleIcon(showMutedCategories, filteredCategoriesLength) {

diff --git a/app/assets/javascripts/discourse/app/components/edit-category-general.hbs b/app/assets/javascripts/discourse/app/components/edit-category-general.hbs
@@ -62,43 +62,36 @@
   {{/if}}
 
   <section class="field category-colors">
-    {{#if this.noCategoryStyle}}
-      <label>
-        {{d-icon "exclamation-triangle"}}
-        {{i18n "category.colors_disabled"}}
-      </label>
-    {{else}}
-      <label>{{i18n "category.badge_colors"}}</label>
-      <div class="category-color-editor">
-        {{html-safe this.categoryBadgePreview}}
+    <label>{{i18n "category.badge_colors"}}</label>
+    <div class="category-color-editor">
+      {{html-safe this.categoryBadgePreview}}
 
-        <section class="field">
-          <span class="color-title">{{i18n "category.background_color"}}:</span>
-          <div class="colorpicker-wrapper">
-            <ColorInput
-              @hexValue={{this.category.color}}
-              @valid={{this.category.colorValid}}
-            />
-            <ColorPicker
-              @colors={{this.backgroundColors}}
-              @usedColors={{this.usedBackgroundColors}}
-              @value={{this.category.color}}
-            />
-          </div>
-        </section>
+      <section class="field">
+        <span class="color-title">{{i18n "category.background_color"}}:</span>
+        <div class="colorpicker-wrapper">
+          <ColorInput
+            @hexValue={{this.category.color}}
+            @valid={{this.category.colorValid}}
+          />
+          <ColorPicker
+            @colors={{this.backgroundColors}}
+            @usedColors={{this.usedBackgroundColors}}
+            @value={{this.category.color}}
+          />
+        </div>
+      </section>
 
-        <section class="field">
-          <span class="color-title">{{i18n "category.foreground_color"}}:</span>
-          <div class="colorpicker-wrapper edit-text-color">
-            <ColorInput @hexValue={{this.category.text_color}} />
-            <ColorPicker
-              @colors={{this.foregroundColors}}
-              @value={{this.category.text_color}}
-              @id="edit-text-color"
-            />
-          </div>
-        </section>
-      </div>
-    {{/if}}
+      <section class="field">
+        <span class="color-title">{{i18n "category.foreground_color"}}:</span>
+        <div class="colorpicker-wrapper edit-text-color">
+          <ColorInput @hexValue={{this.category.text_color}} />
+          <ColorPicker
+            @colors={{this.foregroundColors}}
+            @value={{this.category.text_color}}
+            @id="edit-text-color"
+          />
+        </div>
+      </section>
+    </div>
   </section>
 </form>
diff --git a/app/assets/javascripts/discourse/app/components/edit-category-general.js b/app/assets/javascripts/discourse/app/components/edit-category-general.js
@@ -53,11 +53,6 @@ export default buildCategoryPanel("general", {
       .uniq();
   },
 
-  @discourseComputed
-  noCategoryStyle() {
-    return this.siteSettings.category_style === "none";
-  },
-
   @discourseComputed("category.id", "category.color")
   usedBackgroundColors(categoryId, categoryColor) {
     const categories = this.site.get("categoriesList");
@@ -91,6 +86,7 @@ export default buildCategoryPanel("general", {
     const c = Category.create({
       name,
       color,
+      id: category.id,
       text_color: textColor,
       parent_category_id: parseInt(parentCategoryId, 10),
       read_restricted: category.get("read_restricted"),

diff --git a/app/assets/javascripts/discourse/app/components/parent-category-row.hbs b/app/assets/javascripts/discourse/app/components/parent-category-row.hbs
@@ -15,13 +15,8 @@
       {{if this.category.uploaded_logo.url 'has-logo' 'no-logo'}}"
   >
     <td
-      class="category
-        {{if this.isMuted 'muted'}}
-        {{if this.noCategoryStyle 'no-category-style'}}"
-      style={{unless
-        this.noCategoryStyle
-        (category-color-variable this.category.color)
-      }}
+      class="category {{if this.isMuted 'muted'}}"
+      style={{category-color-variable this.category.color}}
     >
       <CategoryTitleLink @category={{this.category}} />
       <PluginOutlet

diff --git a/app/assets/javascripts/discourse/app/helpers/category-link.js b/app/assets/javascripts/discourse/app/helpers/category-link.js
@@ -14,11 +14,6 @@ export function replaceCategoryLinkRenderer(fn) {
   _renderer = fn;
 }
 
-function categoryStripe(color, classes) {
-  let style = color ? "style='background-color: #" + color + ";'" : "";
-  return "<span class='" + classes + "' " + style + "></span>";
-}
-
 let _extraIconRenderers = [];
 
 export function addExtraIconRenderer(renderer) {
@@ -85,9 +80,6 @@ export function categoryLinkHTML(category, options) {
     if (options.hideParent) {
       categoryOptions.hideParent = true;
     }
-    if (options.categoryStyle) {
-      categoryOptions.categoryStyle = options.categoryStyle;
-    }
     if (options.recursive) {
       categoryOptions.recursive = true;
     }
@@ -114,45 +106,35 @@ export function defaultCategoryLinkRenderer(category, opts) {
   let href = opts.link === false ? "" : url;
   let tagName = opts.link === false || opts.link === "false" ? "span" : "a";
   let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
-  let color = get(category, "color");
   let html = "";
   let parentCat = null;
   let categoryDir = "";
+  let dataAttributes = category
+    ? `data-category-id="${get(category, "id")}"`
+    : "";
 
   if (!opts.hideParent) {
     parentCat = Category.findById(get(category, "parent_category_id"));
   }
 
   let siteSettings = helperContext().siteSettings;
 
-  const categoryStyle = opts.categoryStyle || siteSettings.category_style;
-  if (categoryStyle !== "none") {
-    if (parentCat && parentCat !== category) {
-      html += categoryStripe(
-        get(parentCat, "color"),
-        "badge-category-parent-bg"
-      );
-    }
-    html += categoryStripe(color, "badge-category-bg");
-  }
-
-  let classNames = "badge-category clear-badge";
+  let classNames = `badge-category`;
   if (restricted) {
     classNames += " restricted";
   }
 
-  let style = "";
-  if (categoryStyle === "box") {
-    style = `style="color: #${get(category, "text_color")};"`;
+  if (parentCat) {
+    classNames += ` --has-parent`;
+    dataAttributes += ` data-parent-category-id="${parentCat.id}"`;
   }
 
-  html +=
-    `<span ${style} ` +
-    'data-drop-close="true" class="' +
-    classNames +
-    '"' +
-    (descriptionText ? 'title="' + descriptionText + '" ' : "") +
-    ">";
+  html += `<span 
+    ${dataAttributes} 
+    data-drop-close="true" 
+    class="${classNames}" 
+    ${descriptionText ? 'title="' + descriptionText + '" ' : ""}
+  >`;
 
   let categoryName = escapeExpression(get(category, "name"));
 
@@ -169,22 +151,25 @@ export function defaultCategoryLinkRenderer(category, opts) {
       html += iconHTML(iconName);
     }
   });
-  html += `<span class="category-name" ${categoryDir}>${categoryName}</span>`;
+  html += `<span class="badge-category__name" ${categoryDir}>${categoryName}</span>`;
   html += "</span>";
 
-  if (opts.topicCount && categoryStyle !== "box") {
+  if (opts.topicCount) {
     html += buildTopicCount(opts.topicCount);
   }
 
   if (href) {
     href = ` href="${href}" `;
   }
 
-  extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
-
   let afterBadgeWrapper = "";
-  if (opts.topicCount && categoryStyle === "box") {
-    afterBadgeWrapper += buildTopicCount(opts.topicCount);
+
+  if (opts.plusSubcategories && opts.lastSubcategory) {
+    afterBadgeWrapper += `<span class="plus-subcategories">
+      ${I18n.t("category_row.plus_subcategories", {
+        count: opts.plusSubcategories,
+      })}
+      </span>`;
   }
-  return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>${afterBadgeWrapper}`;
+  return `<${tagName} class="badge-category__wrapper ${extraClasses}" ${href}>${html}</${tagName}>${afterBadgeWrapper}`;
 }
diff --git a/app/assets/javascripts/discourse/app/instance-initializers/category-badge-css-generator.js b/app/assets/javascripts/discourse/app/instance-initializers/category-badge-css-generator.js
@@ -0,0 +1,33 @@
+import { get } from "@ember/object";
+import Category from "discourse/models/category";
+
+export default {
+  after: "category-color-css-generator",
+
+  // This generates badge CSS for each category, which is used to render category-specific elements.
+  initialize(owner) {
+    this.site = owner.lookup("service:site");
+
+    // If the site is login_required and the user is anon there will be no categories preloaded.
+    if (!this.site.categories) {
+      return;
+    }
+
+    const generatedCss = this.site.categories.map((category) => {
+      let parentCategory = Category.findById(
+        get(category, "parent_category_id")
+      );
+      let badgeCss = `.badge-category[data-category-id="${category.id}"] { --category-badge-color: var(--category-${category.id}-color); --category-badge-text-color: #${category.text_color}; }`;
+      if (parentCategory) {
+        badgeCss += `.badge-category[data-parent-category-id="${parentCategory.id}"] { --parent-category-badge-color: var(--category-${parentCategory.id}-color); }`;
+      }
+      return badgeCss;
+    });
+
+    const cssTag = document.createElement("style");
+    cssTag.type = "text/css";
+    cssTag.id = "category-badge-css-generator";
+    cssTag.innerHTML = generatedCss.join("\n");
+    document.head.appendChild(cssTag);
+  },
+};
diff --git a/app/assets/javascripts/discourse/app/lib/render-tags.js b/app/assets/javascripts/discourse/app/lib/render-tags.js
@@ -68,7 +68,7 @@ export default function (topic, params) {
             isPrivateMessage,
             tagsForUser,
             tagName,
-          }) + " ";
+          }) + "";
       }
     }
 

diff --git a/app/assets/javascripts/discourse/app/widgets/header-topic-info.js b/app/assets/javascripts/discourse/app/widgets/header-topic-info.js
@@ -156,7 +156,9 @@ export default createWidget("header-topic-info", {
             this.attach("category-link", { category: parentCategory })
           );
         }
-        categories.push(this.attach("category-link", { category }));
+        categories.push(
+          this.attach("category-link", { category, hideParent: true })
+        );
 
         this.headerElements.push(h("div.categories-wrapper", categories));
       }