UX: introduces icon-picker component for badges (#8844)

app/assets/javascripts/select-kit/components/icon-picker.js.es6

@@ -0,0 +1,63 @@
+import MultiSelectComponent from "select-kit/components/multi-select";
+import { computed } from "@ember/object";
+import { ajax } from "discourse/lib/ajax";
+import { makeArray } from "discourse-common/lib/helpers";
+import { convertIconClass } from "discourse-common/lib/icon-library";
+
+export default MultiSelectComponent.extend({
+  pluginApiIdentifiers: ["icon-picker"],
+  classNames: ["icon-picker"],
+
+  content: computed("value.[]", function() {
+    return makeArray(this.value).map(this._processIcon);
+  }),
+
+  search(filter = "") {
+    return ajax("/svg-sprite/picker-search", { data: { filter } }).then(icons =>
+      icons.map(this._processIcon)
+    );
+  },
+
+  _processIcon(icon) {
+    const iconName = typeof icon === "object" ? icon.id : icon,
+      strippedIconName = convertIconClass(iconName);
+
+    const spriteEl = "#svg-sprites",
+      holder = "ajax-icon-holder";
+
+    if (typeof icon === "object") {
+      if ($(`${spriteEl} .${holder}`).length === 0)
+        $(spriteEl).append(
+          `<div class="${holder}" style='display: none;'></div>`
+        );
+
+      if (!$(`${spriteEl} symbol#${strippedIconName}`).length) {
+        $(`${spriteEl} .${holder}`).append(
+          `<svg xmlns='http://www.w3.org/2000/svg'>${icon.symbol}</svg>`
+        );
+      }
+    }
+
+    return {
+      id: iconName,
+      name: iconName,
+      icon: strippedIconName
+    };
+  },
+
+  willDestroyElement() {
+    $("#svg-sprites .ajax-icon-holder").remove();
+    this._super(...arguments);
+  },
+
+  actions: {
+    onChange(value, item) {
+      if (this.selectKit.options.maximum === 1) {
+        value = value.length ? value[0] : null;
+        item = item.length ? item[0] : null;
+      }
+
+      this.attrs.onChange && this.attrs.onChange(value, item);
+    }
+  }
+});

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -80,10 +80,11 @@ export default SelectKitComponent.extend({
   },
 
   selectedContent: computed("value.[]", "content.[]", function() {
-    if (this.value && this.value.length) {
+    const value = Ember.makeArray(this.value);
+    if (value.length) {
       let content = [];
 
-      this.value.forEach(v => {
+      value.forEach(v => {
         if (this.selectKit.valueProperty) {
           const c = makeArray(this.content).findBy(
             this.selectKit.valueProperty,

app/assets/javascripts/select-kit/components/select-kit/select-kit-filter.js.es6

@@ -74,7 +74,10 @@ export default Component.extend(UtilsMixin, {
 
       // Enter
       if (event.keyCode === 13 && this.selectKit.highlighted) {
-        this.selectKit.select(this.getValue(this.selectKit.highlighted));
+        this.selectKit.select(
+          this.getValue(this.selectKit.highlighted),
+          this.selectKit.highlighted
+        );
         return false;
       }
 
@@ -86,7 +89,10 @@ export default Component.extend(UtilsMixin, {
       // Tab
       if (event.keyCode === 9) {
         if (this.selectKit.highlighted && this.selectKit.isExpanded) {
-          this.selectKit.select(this.getValue(this.selectKit.highlighted));
+          this.selectKit.select(
+            this.getValue(this.selectKit.highlighted),
+            this.selectKit.highlighted
+          );
         }
         this.selectKit.close(event);
         return;

app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6

@@ -89,7 +89,10 @@ export default Component.extend(UtilsMixin, {
       // Enter
       if (this.selectKit.isExpanded) {
         if (this.selectKit.highlighted) {
-          this.selectKit.select(this.getValue(this.selectKit.highlighted));
+          this.selectKit.select(
+            this.getValue(this.selectKit.highlighted),
+            this.selectKit.highlighted
+          );
           return false;
         }
       } else {
@@ -127,7 +130,10 @@ export default Component.extend(UtilsMixin, {
     } else if (event.keyCode === 9) {
       // Tab
       if (this.selectKit.highlighted && this.selectKit.isExpanded) {
-        this.selectKit.select(this.getValue(this.selectKit.highlighted));
+        this.selectKit.select(
+          this.getValue(this.selectKit.highlighted),
+          this.selectKit.highlighted
+        );
       }
       this.selectKit.close(event);
     } else if (

app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-row.hbs

@@ -1,5 +1,5 @@
 {{#each icons as |icon|}}
-  {{d-icon icon title=(dasherize title)}}
+  {{d-icon icon translatedtitle=(dasherize title)}}
 {{/each}}
 
 <span class="name">