Replaces remaining {{category-chooser}} by {{category-select-box}}

To achieve replacement, this commit also adds support for:
- clearSelectionLabel which will allows to unselect any chosen category
- select-box inside a modal
- fixes minor css positioning issues

Note: {{category-chooser}} will be removed in the next weeks.

app/assets/javascripts/admin/templates/components/embeddable-host.hbs

@@ -9,7 +9,7 @@
     {{input value=buffered.path_whitelist placeholder="/blog/.*" enter="save" class="path-whitelist"}}
   </td>
   <td>
-    {{category-chooser value=categoryId}}
+    {{category-select-box value=categoryId class="small"}}
   </td>
   <td>
     {{d-button icon="check" action="save" class="btn-primary" disabled=cantSave}}

app/assets/javascripts/discourse/components/category-select-box.js.es6

@@ -15,10 +15,19 @@ export default SelectBoxComponent.extend({
 
   castInteger: true,
 
-  width: "100%",
-
   clearable: true,
 
+  allowUncategorized: null,
+
+  init() {
+    this._super();
+
+    if (!Ember.isNone(this.get("categories"))) {
+      this.set("content", this.get("categories"));
+      this._scopeCategories();
+    }
+  },
+
   filterFunction: function(content) {
     const _matchFunction = (filter, text) => {
       return text.toLowerCase().indexOf(filter) > -1;
@@ -57,7 +66,6 @@ export default SelectBoxComponent.extend({
     this.set("headerText", headerText);
   },
 
-  // original method is kept for compatibility
   templateForRow: function() {
     return (rowComponent) => this.rowContentTemplate(rowComponent.get("content"));
   }.property(),
@@ -79,8 +87,11 @@ export default SelectBoxComponent.extend({
       const categoryId = c.get("id");
       if (scopedCategoryId && categoryId !== scopedCategoryId && c.get("parent_category_id") !== scopedCategoryId) { return false; }
       if (excludeCategoryId === categoryId) { return false; }
-      if (!this.siteSettings.allow_uncategorized_topics && c.get("isUncategorizedCategory")) {
+      if (this.get("allowUncategorized") === false && c.get("isUncategorizedCategory")) { return false; }
-        return false;
+      if (this.get("allowUncategorized") !== true) {
+        if (!this.siteSettings.allow_uncategorized_topics && c.get("isUncategorizedCategory")) {
+          return false;
+        }
       }
       return c.get("permission") === PermissionType.FULL;
     });

app/assets/javascripts/discourse/components/select-box.js.es6

@@ -14,6 +14,7 @@ export default Ember.Component.extend({
   renderBody: false,
   wrapper: true,
   tabindex: 0,
+  scrollableParentSelector: ".modal-body",
 
   caretUpIcon: "caret-up",
   caretDownIcon: "caret-down",
@@ -24,8 +25,9 @@ export default Ember.Component.extend({
 
   value: null,
   selectedContent: null,
-  noContentText: I18n.t("select_box.no_content"),
+  noContentLabel: I18n.t("select_box.no_content"),
   lastHovered: null,
+  clearSelectionLabel: null,
 
   idKey: "id",
   textKey: "text",
@@ -41,7 +43,7 @@ export default Ember.Component.extend({
   selectBoxHeaderComponent: "select-box/select-box-header",
   selectBoxCollectionComponent: "select-box/select-box-collection",
 
-  width: 220,
+  minWidth: 220,
   maxCollectionHeight: 200,
   verticalOffset: 0,
   horizontalOffset: 0,
@@ -65,7 +67,7 @@ export default Ember.Component.extend({
 
   shouldHighlightRow: function() {
     return (rowComponent) => {
-      if (Ember.isNone(this.get("value"))) {
+      if (Ember.isNone(this.get("value")) && Ember.isNone(this.get("lastHovered"))) {
         return false;
       }
 
@@ -96,14 +98,14 @@ export default Ember.Component.extend({
   applyDirection() {
     const offsetTop = this.$()[0].getBoundingClientRect().top;
     const windowHeight = $(window).height();
-    const headerHeight = this.$(".select-box-header").outerHeight();
+    const headerHeight = this.$(".select-box-header").outerHeight(false);
-    const filterHeight = this.$(".select-box-filter").outerHeight();
+    const filterHeight = this.$(".select-box-filter").outerHeight(false);
 
     if (windowHeight - (offsetTop + this.get("maxCollectionHeight") + filterHeight + headerHeight) < 0) {
       this.$().addClass("is-reversed");
       this.$(".select-box-body").css({
         left: this.get("horizontalOffset"),
-        top: "",
+        top: "auto",
         bottom: headerHeight + this.get("verticalOffset")
       });
     } else {
@@ -111,7 +113,7 @@ export default Ember.Component.extend({
       this.$(".select-box-body").css({
         left: this.get("horizontalOffset"),
         top: headerHeight + this.get("verticalOffset"),
-        bottom: ""
+        bottom: "auto"
       });
     }
   },
@@ -150,21 +152,31 @@ export default Ember.Component.extend({
 
   @on("didRender")
   _configureSelectBoxDOM: function() {
-    this.$().css("width", this.get("width"));
+    if (this.get("scrollableParent").length === 1) {
-    this.$(".select-box-header").css("height", this.$().css("height"));
+      this._removeFixedPosition();
-    this.$(".select-box-filter").css("height", this.$().css("height"));
+    }
+
+    this.$().css("min-width", this.get("minWidth"));
+
+    const computedWidth = this.$().outerWidth(false);
+    const computedHeight = this.$().outerHeight(false);
+
+    this.$(".select-box-header").css("height", computedHeight);
+    this.$(".select-box-filter").css("height", computedHeight);
 
     if (this.get("expanded")) {
-      this.$(".select-box-body").css("width", this.$().css("width"));
+      if (this.get("scrollableParent").length === 1) {
+        this._applyFixedPosition(computedWidth, computedHeight);
+      }
+
+      this.$(".select-box-body").css("width", computedWidth);
       this.$(".select-box-collection").css("max-height", this.get("maxCollectionHeight"));
 
-      Ember.run.schedule("afterRender", () => {
+      this.applyDirection();
-        this.applyDirection();
 
-        if (this.get("wrapper")) {
+      if (this.get("wrapper")) {
-          this._positionSelectBoxWrapper();
+        this._positionSelectBoxWrapper();
-        }
+      }
-      });
     } else {
       if (this.get("wrapper")) {
         this.$(".select-box-wrapper").hide();
@@ -250,12 +262,16 @@ export default Ember.Component.extend({
     });
   },
 
-  @computed("headerText", "dynamicHeaderText", "selectedContent", "textKey")
+  @computed("headerText", "dynamicHeaderText", "selectedContent", "textKey", "clearSelectionLabel")
-  generatedHeadertext(headerText, dynamic, selectedContent, textKey) {
+  generatedHeadertext(headerText, dynamic, selectedContent, textKey, clearSelectionLabel) {
     if (dynamic && !Ember.isNone(selectedContent)) {
       return selectedContent[textKey];
     }
 
+    if (dynamic && Ember.isNone(selectedContent) && !Ember.isNone(clearSelectionLabel)) {
+      return I18n.t(clearSelectionLabel);
+    }
+
     return headerText;
   },
 
@@ -272,6 +288,11 @@ export default Ember.Component.extend({
     return filteredContent;
   },
 
+  @computed("scrollableParentSelector")
+  scrollableParent(scrollableParentSelector) {
+    return this.$().parents(scrollableParentSelector).first();
+  },
+
   actions: {
     onToggle() {
       this.toggleProperty("expanded");
@@ -288,18 +309,22 @@ export default Ember.Component.extend({
       });
     },
 
+    onClearSelection() {
+      this.setProperties({ value: null, expanded: false });
+    },
+
     onHoverRow(content) {
       this.set("lastHovered", this._castInteger(content[this.get("idKey")]));
     }
   },
 
   _positionSelectBoxWrapper() {
-    const headerHeight = this.$(".select-box-header").outerHeight();
+    const headerHeight = this.$(".select-box-header").outerHeight(false);
 
     this.$(".select-box-wrapper").css({
       width: this.$().width(),
       display: "block",
-      height: headerHeight + this.$(".select-box-body").outerHeight()
+      height: headerHeight + this.$(".select-box-body").outerHeight(false)
     });
   },
 
@@ -309,5 +334,33 @@ export default Ember.Component.extend({
     }
 
     return id;
+  },
+
+  _applyFixedPosition(width, height) {
+    const $placeholder = $(`<div class='select-box-fixed-placeholder-${this.get("componentId")}' style='vertical-align: middle; height: ${height}px; width: ${width}px; line-height: ${height}px;display:inline-block'></div>`);
+
+    this.$()
+      .before($placeholder)
+      .css({
+        width,
+        position: "fixed",
+        "margin-top": -this.get("scrollableParent").scrollTop(),
+        "margin-left": -width
+      });
+
+    this.get("scrollableParent").on("scroll.select-box", () => this.set("expanded", false) );
+  },
+
+  _removeFixedPosition() {
+    $(`.select-box-fixed-placeholder-${this.get("componentId")}`).remove();
+    this.$().css({
+      top: "auto",
+      left: "auto",
+      "margin-left": "auto",
+      "margin-top": "auto",
+      position: "relative"
+    });
+
+    this.get("scrollableParent").off("scroll.select-box");
   }
 });

app/assets/javascripts/discourse/components/select-box/select-box-collection.js.es6

@@ -1,3 +1,9 @@
 export default Ember.Component.extend({
-  classNames: "select-box-collection"
+  classNames: "select-box-collection",
+
+  actions: {
+    onClearSelection() {
+      this.sendAction("onClearSelection");
+    }
+  }
 });

app/assets/javascripts/discourse/templates/components/edit-category-general.hbs

@@ -19,7 +19,11 @@
         {{/each}}
       {{else}}
         <label>{{i18n 'category.parent'}}</label>
-        {{category-chooser valueAttribute="id" value=category.parent_category_id categories=parentCategories rootNone=true allowUncategorized="true"}}
+        {{category-select-box
+          clearSelectionLabel="category.none"
+          value=category.parent_category_id
+          categories=parentCategories
+          allowUncategorized=true}}
       {{/if}}
     </section>
   {{/if}}

app/assets/javascripts/discourse/templates/components/queued-post.hbs

@@ -24,7 +24,7 @@
       <span class="edit-title">
         {{text-field value=buffered.title maxlength=siteSettings.max_topic_title_length}}
       </span>
-      {{category-chooser value=buffered.category_id}}
+      {{category-select-box value=buffered.category_id}}
     {{else}}
       <span class='post-title'>
         {{i18n "queue.topic"}}

app/assets/javascripts/discourse/templates/components/select-box.hbs

@@ -30,6 +30,7 @@
     {{/if}}
 
     {{component selectBoxCollectionComponent
+      clearSelectionLabel=clearSelectionLabel
       filteredContent=filteredContent
       selectBoxRowComponent=selectBoxRowComponent
       templateForRow=templateForRow
@@ -38,7 +39,8 @@
       lastHovered=lastHovered
       onSelectRow=(action "onSelectRow")
       onHoverRow=(action "onHoverRow")
-      noContentText=noContentText
+      onClearSelection=(action "onClearSelection")
+      noContentLabel=noContentLabel
       value=value
     }}
   {{/if}}

app/assets/javascripts/discourse/templates/components/select-box/select-box-collection.hbs

@@ -1,4 +1,10 @@
 <ul class="collection">
+  {{#if clearSelectionLabel}}
+    <li {{action "onClearSelection" on="click"}} class="select-box-row clear-selection">
+      {{i18n clearSelectionLabel}}
+    </li>
+  {{/if}}
+
   {{#each filteredContent as |content|}}
     {{component selectBoxRowComponent
       content=content
@@ -11,9 +17,9 @@
       value=value
     }}
   {{else}}
-    {{#if noContentText}}
+    {{#if noContentLabel}}
       <li class="select-box-row no-content">
-        {{noContentText}}
+        {{noContentLabel}}
       </li>
     {{/if}}
   {{/each}}

app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs

@@ -1,6 +1,6 @@
 <p>{{i18n "topics.bulk.choose_new_category"}}</p>
 
-<p>{{category-chooser value=newCategoryId}}</p>
+<p>{{category-select-box value=newCategoryId}}</p>
 
 {{#conditional-loading-spinner condition=loading}}
   {{d-button action="changeCategory" label="topics.bulk.change_category"}}

app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs

@@ -13,10 +13,9 @@
       {{else if publishToCategory}}
         <div class="control-group">
           <label>{{i18n 'topic.topic_status_update.publish_to'}}</label>
-          {{category-chooser
+          {{category-select-box
-              valueAttribute="id"
+            value=topicTimer.category_id
-              value=topicTimer.category_id
+            excludeCategoryId=excludeCategoryId}}
-              excludeCategoryId=excludeCategoryId}}
         </div>
 
         {{auto-update-input

app/assets/javascripts/discourse/templates/modal/split-topic.hbs

@@ -6,7 +6,7 @@
     {{text-field value=topicName placeholderKey="composer.title_placeholder" elementId='split-topic-name'}}
 
     <label>{{i18n 'categories.category'}}</label>
-    {{category-chooser value=categoryId}}
+    {{category-select-box value=categoryId class="small"}}
   </form>
 {{/d-modal-body}}
 

app/assets/stylesheets/common/admin/admin_base.scss

@@ -349,7 +349,7 @@ td.flaggers td {
       margin-top: 10px;
     }
 
-    input, textarea, select {
+    input, textarea, select, .select-box {
       width: 350px;
     }
 
@@ -1672,6 +1672,10 @@ table#user-badges {
   }
 }
 
+.embedding td input {
+  margin-bottom: 0;
+}
+
 // Emails
 
 .email-list {

app/assets/stylesheets/common/components/select-box.scss

@@ -10,6 +10,10 @@
   position: relative;
   height: 34px;
 
+  &.small {
+    height: 28px;
+  }
+
   &.is-expanded {
     z-index: 102;
 
@@ -97,6 +101,7 @@
 
   .select-box-body {
     display: none;
+    background: $secondary;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
   }

app/assets/stylesheets/desktop/compose.scss

@@ -239,7 +239,7 @@
       position: relative;
       display: inline-block;
 
-      .category-input {
+      .category-input .category-select-box {
         width: 430px;
         @include medium-width { width: 285px; }
         @include small-width { width: 220px; }

app/assets/stylesheets/desktop/modal.scss

@@ -70,6 +70,10 @@
 }
 
 .modal {
+  .category-select-box {
+    width: 430px;
+  }
+
   .category-combobox {
     width: 430px;
 

app/assets/stylesheets/mobile/compose.scss

@@ -148,6 +148,10 @@ input[type=radio], input[type=checkbox] {
       }
       .category-input {
         margin-top: 3px;
+
+        .category-select-box {
+          width: 100%;
+        }
       }
       .wmd-controls {
         transition: top 0.3s ease;

app/assets/stylesheets/mobile/modal.scss

@@ -91,10 +91,6 @@
       width: 100%;
     }
   }
-
-  .category-combobox {
-    width: 100%;
-  }
 }
 
 .flag-modal {

test/javascripts/acceptance/category-edit-test.js.es6

@@ -74,7 +74,8 @@ QUnit.test("Subcategory list settings", assert => {
   });
 
   click('.edit-category-general');
-  selectDropdown('.edit-category-tab-general .category-combobox', 2);
+
+  selectBox('.edit-category-tab-general .category-select-box', 'feature')
 
   click('.edit-category-settings');
   andThen(() => {

test/javascripts/acceptance/queued-posts-test.js.es6

@@ -20,7 +20,7 @@ QUnit.test("For topics: body of post, title, category and tags are all editbale"
   andThen(() => {
     assert.ok(exists(".d-editor-container"), "the body should be editable");
     assert.ok(exists(".edit-title .ember-text-field"), "the title should be editable");
-    assert.ok(exists(".category-combobox"), "category should be editbale");
+    assert.ok(exists(".category-select-box"), "category should be editbale");
     assert.ok(exists(".tag-chooser"), "tags should be editable");
   });
 });
@@ -41,7 +41,7 @@ QUnit.test("For replies: only the body of post is editbale", assert => {
   andThen(() => {
     assert.ok(exists(".d-editor-container"), "the body should be editable");
     assert.notOk(exists(".edit-title .ember-text-field"), "title should not be editbale");
-    assert.notOk(exists(".category-combobox"), "category should not be editable");
+    assert.notOk(exists(".category-select-box"), "category should not be editable");
     assert.notOk(exists("div.tag-chooser"), "tags should not be editable");
   });
 });

test/javascripts/components/select-box-test.js.es6

@@ -222,7 +222,7 @@ componentTest('persists filter state when expandind/collapsing', {
 });
 
 componentTest('supports options to limit size', {
-  template: '{{select-box width=50 maxCollectionHeight=20 content=content}}',
+  template: '{{select-box maxCollectionHeight=20 content=content}}',
 
   beforeEach() {
     this.set("content", [{ id: 1, text: "robin" }]);
@@ -233,7 +233,6 @@ componentTest('supports options to limit size', {
 
     andThen(() => {
       assert.equal(find(".select-box-body").height(), 20, "it limits the height");
-      assert.equal(find(".select-box").width(), 50, "it limits the width");
     });
   }
 });