From e245bf2a181c46dae8a0ab68544db07e83e149ef Mon Sep 17 00:00:00 2001 From: Kris Date: Fri, 14 Jun 2024 13:50:13 -0400 Subject: [PATCH] UX: highlight "no subcategories" as active dropdown option (#27478) --- .../select-kit/addon/components/category-drop.js | 8 ++++++-- .../stylesheets/common/select-kit/category-drop.scss | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/select-kit/addon/components/category-drop.js b/app/assets/javascripts/select-kit/addon/components/category-drop.js index 74c0c22d7e9..a5e1aa1cca7 100644 --- a/app/assets/javascripts/select-kit/addon/components/category-drop.js +++ b/app/assets/javascripts/select-kit/addon/components/category-drop.js @@ -22,6 +22,7 @@ const MORE_COLLECTION = "MORE_COLLECTION"; export default ComboBoxComponent.extend({ pluginApiIdentifiers: ["category-drop"], classNames: ["category-drop"], + classNameBindings: ["noSubcategories:has-selection"], value: readOnly("category.id"), content: readOnly("categoriesWithShortcuts.[]"), noCategoriesLabel: I18n.t("categories.no_subcategories"), @@ -64,6 +65,10 @@ export default ComboBoxComponent.extend({ return CategoryRow; }, + noSubcategories: computed("selectKit.options.noSubcategories", function () { + return this.selectKit.options.noSubcategories; + }), + displayCategoryDescription: computed(function () { return !( this.get("currentUser.staff") || this.get("currentUser.trust_level") > 0 @@ -101,8 +106,7 @@ export default ComboBoxComponent.extend({ }); } - // If there is a single shortcut, we can have a single "remove filter" - // option + // If there is a single shortcut, we can have a single "remove filter" option if (shortcuts.length === 1 && shortcuts[0].id === ALL_CATEGORIES_ID) { shortcuts[0].name = I18n.t("categories.remove_filter"); } diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss index 84e767303ef..23ad61d75d0 100644 --- a/app/assets/stylesheets/common/select-kit/category-drop.scss +++ b/app/assets/stylesheets/common/select-kit/category-drop.scss @@ -21,8 +21,10 @@ &.has-selection { .category-drop-header { - color: var(--quaternary); border-color: var(--quaternary); + .caret-icon { + color: var(--quaternary); + } } }