From b6f64a70f0a049c0a12fd41e4a69ac7cb2e6a273 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Tue, 23 Jan 2024 21:53:13 +0100 Subject: [PATCH] UX: Add "filter for more" to icon picker (#25263) Repurposes the existing "filter for more" row from the tag drop component. --- .../components/select-kit/tag-drop-test.js | 13 ++++++++ .../addon/components/filter-for-more.gjs | 11 +++++++ .../addon/components/icon-picker.js | 32 ++++++++++++++++--- .../select-kit/addon/components/tag-drop.js | 12 +++++-- .../tag-drop/more-tags-collection.hbs | 5 --- .../tag-drop/more-tags-collection.js | 6 ---- .../common/select-kit/select-kit.scss | 9 ++++++ .../common/select-kit/tag-drop.scss | 9 ------ config/locales/client.en.yml | 3 +- .../components/sections/atoms/dropdowns.hbs | 4 +++ 10 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 app/assets/javascripts/select-kit/addon/components/filter-for-more.gjs delete mode 100644 app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.hbs delete mode 100644 app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.js diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/tag-drop-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/tag-drop-test.js index 619ef221995..c0441e6934e 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/tag-drop-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/tag-drop-test.js @@ -83,4 +83,17 @@ module("Integration | Component | select-kit/tag-drop", function (hooks) { "it has the tag count" ); }); + + test("default global (no category)", async function (assert) { + this.siteSettings.max_tags_in_filter_list = 3; + await render(hbs``); + + await this.subject.expand(); + assert.dom(".filter-for-more").exists("it has the 'filter for more' note"); + + await this.subject.fillInFilter("dav"); + assert + .dom(".filter-for-more") + .doesNotExist("it does not have the 'filter for more' note"); + }); }); diff --git a/app/assets/javascripts/select-kit/addon/components/filter-for-more.gjs b/app/assets/javascripts/select-kit/addon/components/filter-for-more.gjs new file mode 100644 index 00000000000..d003bda0180 --- /dev/null +++ b/app/assets/javascripts/select-kit/addon/components/filter-for-more.gjs @@ -0,0 +1,11 @@ +import i18n from "discourse-common/helpers/i18n"; + +const FilterForMore = ; + +export default FilterForMore; diff --git a/app/assets/javascripts/select-kit/addon/components/icon-picker.js b/app/assets/javascripts/select-kit/addon/components/icon-picker.js index 06794b3e9b1..f88f5001e69 100644 --- a/app/assets/javascripts/select-kit/addon/components/icon-picker.js +++ b/app/assets/javascripts/select-kit/addon/components/icon-picker.js @@ -8,7 +8,13 @@ import { disableMissingIconWarning, enableMissingIconWarning, } from "discourse-common/lib/icon-library"; +import FilterForMore from "select-kit/components/filter-for-more"; import MultiSelectComponent from "select-kit/components/multi-select"; +import { MAIN_COLLECTION } from "select-kit/components/select-kit"; + +const MORE_ICONS_COLLECTION = "MORE_ICONS_COLLECTION"; +const MAX_RESULTS_RETURNED = 200; +// Matches max returned results from icon_picker_search in svg_sprite_controller.rb export default MultiSelectComponent.extend({ pluginApiIdentifiers: ["icon-picker"], @@ -18,10 +24,27 @@ export default MultiSelectComponent.extend({ this._super(...arguments); this._cachedIconsList = null; + this._resultCount = 0; if (isDevelopment()) { disableMissingIconWarning(); } + + this.insertAfterCollection(MAIN_COLLECTION, MORE_ICONS_COLLECTION); + }, + + modifyComponentForCollection(collection) { + if (collection === MORE_ICONS_COLLECTION) { + return FilterForMore; + } + }, + + modifyContentForCollection(collection) { + if (collection === MORE_ICONS_COLLECTION) { + return { + shouldShowMoreTip: this._resultCount === MAX_RESULTS_RETURNED, + }; + } }, content: computed("value.[]", function () { @@ -29,11 +52,8 @@ export default MultiSelectComponent.extend({ }), search(filter = "") { - if ( - filter === "" && - this._cachedIconsList && - this._cachedIconsList.length - ) { + if (filter === "" && this._cachedIconsList?.length) { + this._resultCount = this._cachedIconsList.length; return this._cachedIconsList; } else { return ajax("/svg-sprite/picker-search", { @@ -46,6 +66,7 @@ export default MultiSelectComponent.extend({ if (filter === "") { this._cachedIconsList = icons; } + this._resultCount = icons.length; return icons; }); } @@ -84,6 +105,7 @@ export default MultiSelectComponent.extend({ this._super(...arguments); this._cachedIconsList = null; + this._resultCount = 0; if (isDevelopment()) { enableMissingIconWarning(); diff --git a/app/assets/javascripts/select-kit/addon/components/tag-drop.js b/app/assets/javascripts/select-kit/addon/components/tag-drop.js index 7e93649e458..49a6b7a155f 100644 --- a/app/assets/javascripts/select-kit/addon/components/tag-drop.js +++ b/app/assets/javascripts/select-kit/addon/components/tag-drop.js @@ -4,6 +4,7 @@ import { i18n, setting } from "discourse/lib/computed"; import DiscourseURL, { getCategoryAndTagUrl } from "discourse/lib/url"; import { makeArray } from "discourse-common/lib/helpers"; import ComboBoxComponent from "select-kit/components/combo-box"; +import FilterForMore from "select-kit/components/filter-for-more"; import { MAIN_COLLECTION } from "select-kit/components/select-kit"; import TagsMixin from "select-kit/mixins/tags"; @@ -24,8 +25,13 @@ export default ComboBoxComponent.extend(TagsMixin, { shouldShowMoreTags: computed( "maxTagsInFilterList", "topTags.[]", + "mainCollection.[]", function () { - return this.topTags.length > this.maxTagsInFilterList; + if (this.selectKit.filter?.length > 0) { + return this.mainCollection.length > this.maxTagsInFilterList; + } else { + return this.topTags.length > this.maxTagsInFilterList; + } } ), @@ -49,14 +55,14 @@ export default ComboBoxComponent.extend(TagsMixin, { modifyComponentForCollection(collection) { if (collection === MORE_TAGS_COLLECTION) { - return "tag-drop/more-tags-collection"; + return FilterForMore; } }, modifyContentForCollection(collection) { if (collection === MORE_TAGS_COLLECTION) { return { - shouldShowMoreTags: this.shouldShowMoreTags, + shouldShowMoreTip: this.shouldShowMoreTags, }; } }, diff --git a/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.hbs b/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.hbs deleted file mode 100644 index 9b92ae6604c..00000000000 --- a/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.hbs +++ /dev/null @@ -1,5 +0,0 @@ -{{#if this.collection.content.shouldShowMoreTags}} -
- {{i18n "select_kit.components.tag_drop.filter_for_more"}} -
-{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.js b/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.js deleted file mode 100644 index 050cf9134f5..00000000000 --- a/app/assets/javascripts/select-kit/addon/components/tag-drop/more-tags-collection.js +++ /dev/null @@ -1,6 +0,0 @@ -import Component from "@ember/component"; - -export default Component.extend({ - tagName: "", - collection: null, -}); diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 497ee0ab0f1..85239108447 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -53,6 +53,15 @@ .select-kit-filter.is-expanded { padding: 0.25em 0.5em; } + + .filter-for-more { + display: flex; + box-sizing: border-box; + width: 100%; + padding: 0.5em 1em; + font-size: var(--font-down-1); + color: var(--primary-low-mid); + } } &.is-loading { diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss index 0dda52acb34..382c3787321 100644 --- a/app/assets/stylesheets/common/select-kit/tag-drop.scss +++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss @@ -10,15 +10,6 @@ font-weight: 700; } } - - .more-tags { - display: flex; - box-sizing: border-box; - width: 100%; - padding: 0.5em 1em; - font-size: var(--font-down-1); - color: var(--primary-low-mid); - } } } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 2261f460917..d456e346d39 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -2346,8 +2346,7 @@ en: one: "Select at least %{count} item." other: "Select at least %{count} items." components: - tag_drop: - filter_for_more: Filter for more… + filter_for_more: Filter for more… categories_admin_dropdown: title: "Manage categories" diff --git a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs index 79307bb7a7c..4875e9c43c4 100644 --- a/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs +++ b/plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs @@ -167,4 +167,8 @@ + + + + \ No newline at end of file