From f101fec19c12e8587ab969f118dc27e13bda3d98 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 29 Aug 2017 12:48:26 +0200 Subject: [PATCH] FIX: improves uncategorized support for category-select-box --- .../components/category-select-box.js.es6 | 2 ++ .../category-select-box-row.js.es6 | 13 +++++++++++ .../select-box/select-box-header.js.es6 | 13 ----------- .../templates/components/select-box.hbs | 2 -- .../select-box/select-box-header.hbs | 6 ----- .../components/category-select-box.scss | 6 +++++ .../common/components/select-box.scss | 12 ---------- .../components/select-box-test.js.es6 | 22 ------------------- 8 files changed, 21 insertions(+), 55 deletions(-) create mode 100644 app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6 diff --git a/app/assets/javascripts/discourse/components/category-select-box.js.es6 b/app/assets/javascripts/discourse/components/category-select-box.js.es6 index b24e79ea669..9dfe0302a1d 100644 --- a/app/assets/javascripts/discourse/components/category-select-box.js.es6 +++ b/app/assets/javascripts/discourse/components/category-select-box.js.es6 @@ -7,6 +7,8 @@ import Category from "discourse/models/category"; export default SelectBoxComponent.extend({ classNames: ["category-select-box"], + selectBoxRowComponent: "category-select-box/category-select-box-row", + textKey: "name", filterable: true, diff --git a/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6 b/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6 new file mode 100644 index 00000000000..e676df08818 --- /dev/null +++ b/app/assets/javascripts/discourse/components/category-select-box/category-select-box-row.js.es6 @@ -0,0 +1,13 @@ +import computed from 'ember-addons/ember-computed-decorators'; +import SelectBoxRowComponent from "discourse/components/select-box/select-box-row"; +import Category from "discourse/models/category"; + +export default SelectBoxRowComponent.extend({ + classNameBindings: ["isUncategorized"], + + @computed("content") + isUncategorized(content) { + const category = Category.findById(content.id); + return category.get("isUncategorizedCategory"); + } +}); diff --git a/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6 b/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6 index 2d028d21f99..475077f2a38 100644 --- a/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6 +++ b/app/assets/javascripts/discourse/components/select-box/select-box-header.js.es6 @@ -5,29 +5,16 @@ export default Ember.Component.extend({ classNameBindings: ["focused:is-focused"], - showClearButton: false, - didReceiveAttrs() { this._super(); this._setCaretIcon(); }, - @computed("clearable", "selectedId") - showClearButton(clearable, selectedId) { - return clearable === true && !Ember.isNone(selectedId); - }, - click() { this.sendAction("onToggle"); }, - actions: { - clearSelection() { - this.sendAction("onClearSelection"); - } - }, - _setCaretIcon() { if(this.get("expanded")) { this.set("caretIcon", this.get("caretUpIcon")); diff --git a/app/assets/javascripts/discourse/templates/components/select-box.hbs b/app/assets/javascripts/discourse/templates/components/select-box.hbs index 2340965dd14..65e99d5b8ac 100644 --- a/app/assets/javascripts/discourse/templates/components/select-box.hbs +++ b/app/assets/javascripts/discourse/templates/components/select-box.hbs @@ -13,9 +13,7 @@ caretUpIcon=caretUpIcon caretDownIcon=caretDownIcon onToggle=(action "onToggle") - onClearSelection=(action "onClearSelection") icon=icon - clearable=clearable expanded=expanded value=value }} diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs index a44cc1b41b4..cf3812c0dbe 100644 --- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs +++ b/app/assets/javascripts/discourse/templates/components/select-box/select-box-header.hbs @@ -6,10 +6,4 @@ {{text}} -{{#if showClearButton}} - -{{/if}} - {{d-icon caretIcon class="caret-icon"}} diff --git a/app/assets/stylesheets/common/components/category-select-box.scss b/app/assets/stylesheets/common/components/category-select-box.scss index 7c3d63c9900..69dd6c7b1d3 100644 --- a/app/assets/stylesheets/common/components/category-select-box.scss +++ b/app/assets/stylesheets/common/components/category-select-box.scss @@ -8,6 +8,12 @@ -ms-flex-direction: column; flex-direction: column; + &.is-uncategorized { + .topic-count { + display: none; + } + } + .topic-count { font-size: 11px; color: $primary; diff --git a/app/assets/stylesheets/common/components/select-box.scss b/app/assets/stylesheets/common/components/select-box.scss index b49af983f4b..cce6232fbe7 100644 --- a/app/assets/stylesheets/common/components/select-box.scss +++ b/app/assets/stylesheets/common/components/select-box.scss @@ -91,18 +91,6 @@ -webkit-box-shadow: $tertiary 0px 0px 6px 0px; box-shadow: $tertiary 0px 0px 6px 0px; } - - .clear-selection { - margin: 0 5px; - padding: 0; - outline: none; - - .d-icon { - margin: 0; - padding-left: 10px; - padding-right: 10px; - } - } } .select-box-body { diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6 index d36cf712a77..de1dbfbece7 100644 --- a/test/javascripts/components/select-box-test.js.es6 +++ b/test/javascripts/components/select-box-test.js.es6 @@ -324,28 +324,6 @@ componentTest('static headerText', { } }); -componentTest('clearable selection', { - template: '{{select-box value=1 content=content clearable=true}}', - - beforeEach() { - this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]); - }, - - test(assert) { - click(".select-box-header"); - andThen(() => { - assert.ok(exists(".select-box-row.is-highlighted")); - assert.equal(find(".select-box-header .current-selection").html().trim(), "robin"); - }); - - click(".select-box-header .clear-selection"); - andThen(() => { - assert.notOk(exists(".select-box-row.is-highlighted")); - assert.equal(find(".select-box-header .current-selection").html().trim(), "Select..."); - }); - } -}); - componentTest('supports custom row title', { template: '{{select-box content=content titleForRow=titleForRow}}',