UX: highlight "no subcategories" as active dropdown option (#27478)

This commit is contained in:
Kris 2024-06-14 13:50:13 -04:00 committed by GitHub
parent 63e8c79e2f
commit e245bf2a18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 3 deletions

View File

@ -22,6 +22,7 @@ const MORE_COLLECTION = "MORE_COLLECTION";
export default ComboBoxComponent.extend({ export default ComboBoxComponent.extend({
pluginApiIdentifiers: ["category-drop"], pluginApiIdentifiers: ["category-drop"],
classNames: ["category-drop"], classNames: ["category-drop"],
classNameBindings: ["noSubcategories:has-selection"],
value: readOnly("category.id"), value: readOnly("category.id"),
content: readOnly("categoriesWithShortcuts.[]"), content: readOnly("categoriesWithShortcuts.[]"),
noCategoriesLabel: I18n.t("categories.no_subcategories"), noCategoriesLabel: I18n.t("categories.no_subcategories"),
@ -64,6 +65,10 @@ export default ComboBoxComponent.extend({
return CategoryRow; return CategoryRow;
}, },
noSubcategories: computed("selectKit.options.noSubcategories", function () {
return this.selectKit.options.noSubcategories;
}),
displayCategoryDescription: computed(function () { displayCategoryDescription: computed(function () {
return !( return !(
this.get("currentUser.staff") || this.get("currentUser.trust_level") > 0 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" // If there is a single shortcut, we can have a single "remove filter" option
// option
if (shortcuts.length === 1 && shortcuts[0].id === ALL_CATEGORIES_ID) { if (shortcuts.length === 1 && shortcuts[0].id === ALL_CATEGORIES_ID) {
shortcuts[0].name = I18n.t("categories.remove_filter"); shortcuts[0].name = I18n.t("categories.remove_filter");
} }

View File

@ -21,8 +21,10 @@
&.has-selection { &.has-selection {
.category-drop-header { .category-drop-header {
color: var(--quaternary);
border-color: var(--quaternary); border-color: var(--quaternary);
.caret-icon {
color: var(--quaternary);
}
} }
} }