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

app/assets/javascripts/admin/templates/badges-show.hbs

@@ -11,7 +11,15 @@
 
     <div>
       <label for="icon">{{i18n 'admin.badges.icon'}}</label>
-      {{input type="text" name="icon" value=buffered.icon}}
+      {{icon-picker
+        name="icon"
+        value=buffered.icon
+        options=(hash
+          maximum=1
+        )
+        onChange=(action (mut buffered.icon))
+      }}
+
       <p class='help'>{{i18n 'admin.badges.icon_help'}}</p>
     </div>
 

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">

app/assets/stylesheets/common.scss

@@ -24,6 +24,7 @@
 @import "common/select-kit/single-select";
 @import "common/select-kit/tag-chooser";
 @import "common/select-kit/tag-drop";
+@import "common/select-kit/icon-picker";
 @import "common/select-kit/toolbar-popup-menu-options";
 @import "common/select-kit/topic-notifications-button";
 @import "common/select-kit/user-notifications-dropdown";

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

@@ -75,6 +75,10 @@
         margin-right: 5px;
       }
     }
+
+    .icon-picker {
+      width: 350px;
+    }
   }
   .form-horizontal {
     .ace-wrapper {

app/assets/stylesheets/common/select-kit/icon-picker.scss

@@ -0,0 +1,9 @@
+.select-kit {
+  &.icon-picker {
+    .multi-select-header {
+      .select-kit-selected-name .d-icon {
+        color: $primary-high;
+      }
+    }
+  }
+}

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -72,6 +72,10 @@
       color: inherit;
       display: flex;
 
+      .d-icon + .name {
+        margin-left: 0.5em;
+      }
+
       .name {
         display: inline-block;
       }
@@ -137,8 +141,9 @@
       flex: 1 1 0%;
     }
 
-    .d-icon {
+    .d-icon + .name,
-      margin-right: 5px;
+    .svg-icon-title + .name {
+      margin-left: 0.5em;
     }
 
     &.is-highlighted {

app/controllers/svg_sprite_controller.rb

@@ -39,4 +39,14 @@ class SvgSpriteController < ApplicationController
       end
     end
   end
+
+  def icon_picker_search
+    RailsMultisite::ConnectionManagement.with_hostname(params[:hostname]) do
+      params.permit(:filter)
+      filter = params[:filter] || ""
+
+      icons = SvgSprite.icon_picker_search(filter)
+      render json: icons.take(200), root: false
+    end
+  end
 end

config/routes.rb

@@ -492,6 +492,7 @@ Discourse::Application.routes.draw do
 
   get "svg-sprite/:hostname/svg-:theme_ids-:version.js" => "svg_sprite#show", constraints: { hostname: /[\w\.-]+/, version: /\h{40}/, theme_ids: /([0-9]+(,[0-9]+)*)?/, format: :js }
   get "svg-sprite/search/:keyword" => "svg_sprite#search", format: false, constraints: { keyword: /[-a-z0-9\s\%]+/ }
+  get "svg-sprite/picker-search" => "svg_sprite#icon_picker_search", defaults: { format: :json }
 
   get "highlight-js/:hostname/:version.js" => "highlight_js#show", constraints: { hostname: /[\w\.-]+/, format: :js }
 

lib/svg_sprite/svg_sprite.rb

@@ -312,6 +312,26 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
     false
   end
 
+  def self.icon_picker_search(keyword)
+    results = Set.new
+
+    sprite_sources([SiteSetting.default_theme_id]).each do |fname|
+      svg_file = Nokogiri::XML(File.open(fname))
+      svg_filename = "#{File.basename(fname, ".svg")}"
+
+      svg_file.css('symbol').each do |sym|
+        icon_id = prepare_symbol(sym, svg_filename)
+        if keyword.empty? || icon_id.include?(keyword)
+          sym.attributes['id'].value = icon_id
+          sym.css('title').each(&:remove)
+          results.add(id: icon_id, symbol: sym.to_xml)
+        end
+      end
+    end
+
+    results.sort_by { |icon| icon[:id] }
+  end
+
   # For use in no_ember .html.erb layouts
   def self.raw_svg(name)
     get_set_cache("raw_svg_#{name}") do
@@ -404,8 +424,8 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL
   end
 
   def self.process(icon_name)
-    icon_name.strip!
+    icon_name = icon_name.strip
-    FA_ICON_MAP.each { |k, v| icon_name.sub!(k, v) }
+    FA_ICON_MAP.each { |k, v| icon_name = icon_name.sub(k, v) }
     fa4_to_fa5_names[icon_name] || icon_name
   end
 

spec/requests/svg_sprite_controller_spec.rb

@@ -68,4 +68,29 @@ describe SvgSpriteController do
       expect(response.body).to include('my-custom-theme-icon')
     end
   end
+
+  context 'icon_picker_search' do
+    it 'should work with no filter and max out at 200 results' do
+      user = sign_in(Fabricate(:user))
+      get '/svg-sprite/picker-search'
+
+      expect(response.status).to eq(200)
+
+      data = JSON.parse(response.body)
+      expect(data.length).to eq(200)
+      expect(data[0]["id"]).to eq("ad")
+    end
+
+    it 'should filter' do
+      user = sign_in(Fabricate(:user))
+
+      get '/svg-sprite/picker-search', params: { filter: '500px' }
+
+      expect(response.status).to eq(200)
+
+      data = JSON.parse(response.body)
+      expect(data.length).to eq(1)
+      expect(data[0]["id"]).to eq("fab-500px")
+    end
+  end
 end