FIX: Show images in the admin section list for badges. Add help text to

indicate icons can be images too.

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

@@ -6,10 +6,7 @@
       {{#each}}
       <li>
         <a {{action "selectBadge" this}} {{bind-attr class="selected:active"}}>
-        <span {{bind-attr class=":user-badge badgeTypeClassName" data-badge-name="name" title="displayDescription"}}>
-          <i {{bind-attr class=":fa icon"}}></i>
-          {{displayName}}
-        </span>
+          {{badge-button badge=this}}
           {{#if newBadge}}
             <span class="list-badge">{{i18n filters.new.lower_title}}</span>
           {{/if}}
@@ -39,6 +36,7 @@
       <div>
         <label for="name">{{i18n admin.badges.icon}}</label>
         {{input type="text" name="name" value=icon}}
+        <p class='help'>{{i18n admin.badges.icon_help}}</p>
       </div>
 
       <div>

app/assets/javascripts/discourse/components/badge-button.js.es6

@@ -0,0 +1,9 @@
+export default Ember.Component.extend({
+  tagName: 'span',
+  classNameBindings: [':user-badge', 'badge.badgeTypeClassName'],
+  title: Em.computed.alias('badge.displayDescription'),
+  attributeBindings: ['data-badge-name', 'title'],
+  'data-badge-name': Em.computed.alias('badge.name'),
+
+  isIcon: Em.computed.match('badge.icon', /^fa-/)
+});

app/assets/javascripts/discourse/components/user-badge.js.es6

@@ -3,7 +3,5 @@ export default Ember.Component.extend({
 
   showGrantCount: function() {
     return this.get('count') && this.get('count') > 1;
-  }.property('count'),
-
-  isIcon: Em.computed.match('badge.icon', /^fa-/)
+  }.property('count')
 });

app/assets/javascripts/discourse/templates/components/badge-button.hbs

@@ -0,0 +1,7 @@
+{{#if isIcon}}
+  <i {{bind-attr class=":fa badge.icon"}}></i>
+{{else}}
+  <img {{bind-attr src="badge.icon"}}>
+{{/if}}
+{{badge.displayName}}
+{{yield}}

app/assets/javascripts/discourse/templates/components/user-badge.hbs

@@ -1,13 +1,7 @@
 {{#link-to 'badges.show' badge}}
-  <span {{bind-attr class=":user-badge badge.badgeTypeClassName" data-badge-name="badge.name" title="badge.displayDescription"}}>
-    {{#if isIcon}}
-      <i {{bind-attr class=":fa badge.icon"}}></i>
-    {{else}}
-      <img {{bind-attr src="badge.icon"}}>
-    {{/if}}
-    {{badge.displayName}}
+  {{#badge-button badge=badge}}
     {{#if showGrantCount}}
       <span class="count">(&times;&nbsp;{{count}})</span>
     {{/if}}
-  </span>
+  {{/badge-button}}
 {{/link-to}}

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

@@ -360,6 +360,12 @@ section.details {
 
   .current-badge {
     margin: 20px;
+
+    p.help {
+      margin: 0;
+      color: scale-color($primary, $lightness: 40%);
+      font-size: 0.9em;
+    }
   }
 
   .form-horizontal {

config/locales/client.en.yml

@@ -2098,6 +2098,7 @@ en:
         listable: Show badge on the public badges page
         enabled: Enable badge
         icon: Icon
+        icon_help: "Use either a Font Awesome class or URL to an image"
         query: Badge Query (SQL)
         target_posts: Query targets posts
         auto_revoke: Run revocation query daily