From b07f1bfd93e9b2c120480ac684a25dfd7451f209 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Fri, 15 May 2020 17:36:00 +0200 Subject: [PATCH] FIX: displays a title on sk header if no selected name (#9794) none has to be defined. --- .../components/categories-admin-dropdown.js | 3 +- .../select-kit/select-kit-header.js | 12 ++++- .../select-kit/components/selected-name.js | 9 ++-- .../templates/components/selected-name.hbs | 44 ++++++++++--------- .../common/select-kit/select-kit.scss | 1 + config/locales/client.en.yml | 3 ++ .../select-kit/dropdown-select-box-test.js | 19 +++++++- 7 files changed, 62 insertions(+), 29 deletions(-) diff --git a/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js b/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js index 015343bd549..d8ea039ffd7 100644 --- a/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js +++ b/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js @@ -12,7 +12,8 @@ export default DropdownSelectBoxComponent.extend({ icon: "bars", showFullTitle: false, autoFilterable: false, - filterable: false + filterable: false, + none: "select_kit.components.categories_admin_dropdown.title" }, content: computed(function() { diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js index 61f57d1b5db..785b2a47022 100644 --- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js +++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js @@ -27,7 +27,7 @@ export default Component.extend(UtilsMixin, { "roleButton:role", "selectedValue:data-value", "selectedNames:data-name", - "serializedNames:title" + "buttonTitle:title" ], selectedValue: computed("value", function() { @@ -42,6 +42,16 @@ export default Component.extend(UtilsMixin, { .join(","); }), + buttonTitle: computed("value", "selectKit.noneItem", function() { + if ( + !this.value && + this.selectKit.noneItem && + !this.selectKit.options.showFullTitle + ) { + return this.selectKit.noneItem.title || this.selectKit.noneItem.name; + } + }), + icons: computed("selectKit.options.{icon,icons}", function() { const icon = makeArray(this.selectKit.options.icon); const icons = makeArray(this.selectKit.options.icons); diff --git a/app/assets/javascripts/select-kit/components/selected-name.js b/app/assets/javascripts/select-kit/components/selected-name.js index ac23c16446d..e1c75a6e5f8 100644 --- a/app/assets/javascripts/select-kit/components/selected-name.js +++ b/app/assets/javascripts/select-kit/components/selected-name.js @@ -1,17 +1,16 @@ -import { computed, get } from "@ember/object"; +import { computed, get, action } from "@ember/object"; import Component from "@ember/component"; import { makeArray } from "discourse-common/lib/helpers"; import UtilsMixin from "select-kit/mixins/utils"; export default Component.extend(UtilsMixin, { + tagName: "", layoutName: "select-kit/templates/components/selected-name", - classNames: ["select-kit-selected-name", "selected-name", "choice"], name: null, value: null, - tabindex: 0, - attributeBindings: ["title", "value:data-value", "name:data-name"], - click() { + @action + onSelectedNameClick() { if (this.selectKit.options.clearOnClick) { this.selectKit.deselect(this.item); return false; diff --git a/app/assets/javascripts/select-kit/templates/components/selected-name.hbs b/app/assets/javascripts/select-kit/templates/components/selected-name.hbs index b1b1aa9ae3d..7fb7650bf1b 100644 --- a/app/assets/javascripts/select-kit/templates/components/selected-name.hbs +++ b/app/assets/javascripts/select-kit/templates/components/selected-name.hbs @@ -1,26 +1,30 @@ {{#if selectKit.options.showFullTitle}} - {{#if item.icon}} - {{d-icon item.icon}} - {{/if}} - - - {{label}} - - - {{#if selectKit.options.clearOnClick}} - {{d-icon "times"}} - {{else}} - {{#if shouldDisplayClearableButton}} - {{d-button - class="btn-clear" - icon="times" - action=selectKit.deselect - actionParam=item - }} +
+ {{#if item.icon}} + {{d-icon item.icon}} {{/if}} - {{/if}} + + + {{label}} + + + {{#if selectKit.options.clearOnClick}} + {{d-icon "times"}} + {{else}} + {{#if shouldDisplayClearableButton}} + {{d-button + class="btn-clear" + icon="times" + action=selectKit.deselect + actionParam=item + }} + {{/if}} + {{/if}} +
{{else}} {{#if item.icon}} - {{d-icon item.icon}} +
+ {{d-icon item.icon}} +
{{/if}} {{/if}} diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 2f2c31bb9b2..e8fd8756128 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -68,6 +68,7 @@ flex: 0 1 auto; color: inherit; display: flex; + outline: none; .d-icon + .name { margin-left: 0.5em; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 56d65743ba5..9746f37f376 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1670,6 +1670,9 @@ en: one: "Select at least {{count}} item." other: "Select at least {{count}} items." invalid_selection_length: "Selection must be at least {{count}} characters." + components: + categories_admin_dropdown: + title: "Categories admin dropdown" date_time_picker: from: From diff --git a/test/javascripts/components/select-kit/dropdown-select-box-test.js b/test/javascripts/components/select-kit/dropdown-select-box-test.js index 5eaaaa8e30b..550d3babc44 100644 --- a/test/javascripts/components/select-kit/dropdown-select-box-test.js +++ b/test/javascripts/components/select-kit/dropdown-select-box-test.js @@ -60,13 +60,19 @@ componentTest("options.showFullTitle=false", { value=value content=content options=(hash + icon="times" showFullTitle=showFullTitle + none=none ) }} `, beforeEach() { - setDefaultState(this, { showFullTitle: false }); + setDefaultState(this, { + value: null, + showFullTitle: false, + none: "test_none" + }); }, async test(assert) { @@ -75,10 +81,19 @@ componentTest("options.showFullTitle=false", { this.subject .header() .el() - .find(".selected-name .body") + .find(".selected-name") ), "it hides the text of the selected item" ); + + assert.equal( + this.subject + .header() + .el() + .attr("title"), + "[en_US.test_none]", + "it adds a title attribute to the button" + ); } });