From a6251f717be3e790bf6428367f42aa05a4fc2aee Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 24 Aug 2017 12:22:46 -0400
Subject: [PATCH] Convert user card buttons to `{{d-button}}` components

---
 .../components/user-card-contents.js.es6      |  5 ++++
 .../components/user-card-contents.hbs         | 30 ++++++++++++++++---
 app/assets/stylesheets/desktop/user-card.scss |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/user-card-contents.js.es6 b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
index 969a6a931c5..c7215915633 100644
--- a/app/assets/javascripts/discourse/components/user-card-contents.js.es6
+++ b/app/assets/javascripts/discourse/components/user-card-contents.js.es6
@@ -46,6 +46,11 @@ export default Ember.Component.extend(CleansUp, {
     return !this.siteSettings.prioritize_username_in_ux && name && name.trim().length > 0;
   },
 
+  @computed('username', 'topicPostCount')
+  togglePostsLabel(username, count) {
+    return I18n.t("topic.filter_to", { username, count });
+  },
+
   @computed('user.user_fields.@each.value')
   publicUserFields() {
     const siteUserFields = this.site.get('user_fields');
diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index 1c948ba800a..3fa5aeb8874 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -36,19 +36,41 @@
 
     <ul class="usercard-controls">
       {{#if user.can_send_private_message_to_user}}
-        <li><a class='btn btn-primary' {{action "composePrivateMessage" user post}}>{{d-icon "envelope"}}{{i18n 'user.private_message'}}</a></li>
+        <li>
+          {{d-button
+            class="btn-primary"
+            action=(action "composePrivateMessage" user post)
+            icon="envelope"
+            label="user.private_message"}}
+        </li>
       {{/if}}
 
       {{#if showFilter}}
-        <li><a class='btn' href {{action "togglePosts" user}}>{{d-icon "filter"}}{{i18n 'topic.filter_to' username=username count=topicPostCount}}</a></li>
+        <li>
+          {{d-button
+            action=(action "togglePosts" user)
+            icon="filter"
+            translatedLabel=togglePostsLabel}}
+        </li>
       {{/if}}
 
       {{#if hasUserFilters}}
-        <li><a class='btn' href {{action "cancelFilter"}}>{{d-icon "times"}}{{i18n 'topic.filters.cancel'}}</a></li>
+        <li>
+          {{d-button
+            action="cancelFilter"
+            icon="times"
+            label="topic.filters.cancel"}}
+        </li>
       {{/if}}
 
       {{#if showDelete}}
-        <li><a class='btn btn-danger' href {{action "deleteUser" user}}>{{d-icon "exclamation-triangle"}}{{i18n 'admin.user.delete'}}</a></li>
+        <li>
+          {{d-button
+            class="btn-danger"
+            action=(action "deleteUser" user)
+            icon="exclamation-triangle"
+            label="admin.user.delete"}}
+        </li>
       {{/if}}
     </ul>
 
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 0920d97213b..e2fdce0db4e 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -193,7 +193,7 @@ $user_card_background: $secondary;
     float: right;
     margin: 0;
 
-    a {width: 100%; min-width: 150px;}
+    button { width: 100%; min-width: 150px; }
   }
 
   .new-user a {