From 08233fc86e861f4ba6563c80b6b5a20e61989c0a Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 16 Oct 2014 16:43:10 -0400
Subject: [PATCH] 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 ++----
 .../discourse/components/badge-button.js.es6           |  9 +++++++++
 .../javascripts/discourse/components/user-badge.js.es6 |  4 +---
 .../discourse/templates/components/badge-button.hbs    |  7 +++++++
 .../discourse/templates/components/user-badge.hbs      | 10 ++--------
 app/assets/stylesheets/common/admin/admin_base.scss    |  6 ++++++
 config/locales/client.en.yml                           |  1 +
 7 files changed, 28 insertions(+), 15 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/components/badge-button.js.es6
 create mode 100644 app/assets/javascripts/discourse/templates/components/badge-button.hbs

diff --git a/app/assets/javascripts/admin/templates/badges.hbs b/app/assets/javascripts/admin/templates/badges.hbs
index b0375f689bf..ebf2ed89e46 100644
--- a/app/assets/javascripts/admin/templates/badges.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/components/badge-button.js.es6 b/app/assets/javascripts/discourse/components/badge-button.js.es6
new file mode 100644
index 00000000000..499e68ecfc0
--- /dev/null
+++ b/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-/)
+});
diff --git a/app/assets/javascripts/discourse/components/user-badge.js.es6 b/app/assets/javascripts/discourse/components/user-badge.js.es6
index b741620a4d5..c7fce8b1a08 100644
--- a/app/assets/javascripts/discourse/components/user-badge.js.es6
+++ b/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')
 });
diff --git a/app/assets/javascripts/discourse/templates/components/badge-button.hbs b/app/assets/javascripts/discourse/templates/components/badge-button.hbs
new file mode 100644
index 00000000000..4a4ecb85759
--- /dev/null
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/templates/components/user-badge.hbs b/app/assets/javascripts/discourse/templates/components/user-badge.hbs
index 9d084d9c5fe..69e5393dd9a 100644
--- a/app/assets/javascripts/discourse/templates/components/user-badge.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index a94cbb0e00c..ce887d58f5e 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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 {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index ff6d923ab58..8dcfb6994f0 100644
--- a/config/locales/client.en.yml
+++ b/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