From 47835ade9a3dcebb14bdd744e92d93b9c9199b90 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 19 Feb 2021 13:46:02 +0100 Subject: [PATCH] UX: implements a new tags-intersection-chooser (#12139) --- .../discourse/app/components/tag-heading.js | 4 -- .../app/templates/components/bread-crumbs.hbs | 22 +++++++--- .../app/templates/components/tag-heading.hbs | 11 ----- .../discourse/app/templates/tags/show.hbs | 9 ---- .../components/tags-intersection-chooser.js | 43 +++++++++++++++++++ .../stylesheets/common/base/tagging.scss | 20 +++------ 6 files changed, 66 insertions(+), 43 deletions(-) delete mode 100644 app/assets/javascripts/discourse/app/components/tag-heading.js delete mode 100644 app/assets/javascripts/discourse/app/templates/components/tag-heading.hbs create mode 100644 app/assets/javascripts/select-kit/addon/components/tags-intersection-chooser.js diff --git a/app/assets/javascripts/discourse/app/components/tag-heading.js b/app/assets/javascripts/discourse/app/components/tag-heading.js deleted file mode 100644 index 0e6d50b17d4..00000000000 --- a/app/assets/javascripts/discourse/app/components/tag-heading.js +++ /dev/null @@ -1,4 +0,0 @@ -import Component from "@ember/component"; -export default Component.extend({ - tagName: "", -}); diff --git a/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs index 7647cc6ca7f..8236b9448a7 100644 --- a/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs @@ -15,12 +15,24 @@ {{/each}} {{#if siteSettings.tagging_enabled}} - {{#unless additionalTags}} - {{!-- the tag filter doesn't work with tag intersections, so hide it --}} - {{#if siteSettings.show_filter_by_tag}} - {{tag-drop currentCategory=category noSubcategories=noSubcategories tagId=tag.id}} + {{#if siteSettings.show_filter_by_tag}} + {{#if additionalTags}} + {{tags-intersection-chooser + currentCategory=category + mainTag=tag.id + additionalTags=additionalTags + options=(hash + categoryId=category.id + ) + }} + {{else}} + {{tag-drop + currentCategory=category + noSubcategories=noSubcategories + tagId=tag.id + }} {{/if}} - {{/unless}} + {{/if}} {{/if}} {{plugin-outlet name="bread-crumbs-right" connectorTagName="li" tagName=""}} diff --git a/app/assets/javascripts/discourse/app/templates/components/tag-heading.hbs b/app/assets/javascripts/discourse/app/templates/components/tag-heading.hbs deleted file mode 100644 index ec791283cc4..00000000000 --- a/app/assets/javascripts/discourse/app/templates/components/tag-heading.hbs +++ /dev/null @@ -1,11 +0,0 @@ -

- {{#link-to "tags"}} - {{i18n "tagging.tags"}} - {{/link-to}} - {{d-icon "angle-right"}} - {{discourse-tag-bound tagRecord=tag style="simple"}} - {{#each additionalTags as |tag|}} - & - {{discourse-tag tag style="simple"}} - {{/each}} -

\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/tags/show.hbs b/app/assets/javascripts/discourse/app/templates/tags/show.hbs index dbb03bbb563..d8f2fc07427 100644 --- a/app/assets/javascripts/discourse/app/templates/tags/show.hbs +++ b/app/assets/javascripts/discourse/app/templates/tags/show.hbs @@ -7,15 +7,6 @@
- {{#if showTagFilter}} - {{#if additionalTags}} - {{!-- Tag intersections don't work with the tag filter, so show the tag heading instead --}} - {{tag-heading tag=tag additionalTags=additionalTags}} - {{/if}} - {{else}} - {{tag-heading tag=tag additionalTags=additionalTags}} - {{/if}} - {{d-navigation filterMode=filterMode canCreateTopic=canCreateTopic diff --git a/app/assets/javascripts/select-kit/addon/components/tags-intersection-chooser.js b/app/assets/javascripts/select-kit/addon/components/tags-intersection-chooser.js new file mode 100644 index 00000000000..78718bd244f --- /dev/null +++ b/app/assets/javascripts/select-kit/addon/components/tags-intersection-chooser.js @@ -0,0 +1,43 @@ +import DiscourseURL from "discourse/lib/url"; +import MiniTagChooser from "select-kit/components/mini-tag-chooser"; +import { makeArray } from "discourse-common/lib/helpers"; +import { action } from "@ember/object"; + +export default MiniTagChooser.extend({ + pluginApiIdentifiers: ["tags-intersection-chooser"], + attributeBindings: ["selectKit.options.categoryId:category-id"], + classNames: ["tags-intersection-chooser"], + + mainTag: null, + additionalTags: null, + + didReceiveAttrs() { + this._super(...arguments); + + this.set( + "value", + makeArray(this.mainTag).concat(makeArray(this.additionalTags)) + ); + }, + + @action + onChange(tags) { + if (tags.includes(this.mainTag)) { + const remainingTags = tags.filter((t) => t !== this.mainTag); + + if (remainingTags.length >= 1) { + DiscourseURL.routeTo( + `/tags/intersection/${this.mainTag}/${remainingTags.join("/")}` + ); + } else { + DiscourseURL.routeTo("/tags"); + } + } else { + if (tags.length >= 2) { + DiscourseURL.routeTo(`/tags/intersection/${tags.join("/")}`); + } else { + DiscourseURL.routeTo("/tags"); + } + } + }, +}); diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss index 5bc74ea0c90..0383147d7f4 100644 --- a/app/assets/stylesheets/common/base/tagging.scss +++ b/app/assets/stylesheets/common/base/tagging.scss @@ -31,20 +31,6 @@ } } -.tag-show-heading { - display: inline-flex; - flex-wrap: wrap; - align-items: center; - white-space: nowrap; - overflow: hidden; - text-overflow: hidden; - width: 100%; - .d-icon, - span { - margin: 0 0.25em; - } -} - .topic-category { display: flex; flex-wrap: wrap; @@ -315,3 +301,9 @@ section.tag-info { } } } + +.tag-navigation { + .mini-tag-chooser.tags-intersection-chooser { + margin: 0 0.5em 0 0; + } +}