Convert many buttons to `d-button`

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

@@ -118,7 +118,7 @@
         </p>
         <p class="actions">
           <small>{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}</small>
-          <button {{action "refreshProblems"}} class="btn btn-small"><i class="fa fa-refresh"></i>{{i18n 'admin.dashboard.refresh_problems'}}</button>
+          {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}
         </p>
       </div>
       <div class="clearfix"></div>
@@ -130,7 +130,7 @@
         <div class="problem-messages">
           <p>
             {{i18n 'admin.dashboard.no_problems'}}
-            <button {{action "refreshProblems"}} class="btn btn-small"><i class="fa fa-refresh"></i>{{i18n 'admin.dashboard.refresh_problems'}}</button>
+            {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}
           </p>
         </div>
         <div class="clearfix"></div>

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

@@ -3,7 +3,7 @@
 <div>
   {{i18n 'admin.dashboard.reports.start_date'}} {{input type="date" value=startDate}}
   {{i18n 'admin.dashboard.reports.end_date'}} {{input type="date" value=endDate}}
-  <button {{action "refreshReport"}} class='btn btn-primary'>{{i18n 'admin.dashboard.reports.refresh_report'}}</button>
+  {{d-button action="refreshReport" class="btn-primary" label="admin.dashboard.reports.refresh_report" icon="refresh"}}
 </div>
 
 <div class='view-options'>

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

@@ -3,13 +3,26 @@ import { iconHTML } from 'discourse/helpers/fa-icon';
 export default Ember.Component.extend({
   tagName: 'button',
   classNameBindings: [':btn'],
+  attributeBindings: ['disabled', 'translatedTitle:title'],
+
+  translatedTitle: function() {
+    var label = this.get('label');
+    if (label) {
+      return I18n.t(this.get('label'));
+    }
+  }.property('label'),
 
   render: function(buffer) {
-    var icon = this.get('icon');
+    var title = this.get('translatedTitle'),
-    if (icon) {
+        icon = this.get('icon');
-      buffer.push(iconHTML(icon) + ' ');
+
+    if (title || icon) {
+      if (icon) { buffer.push(iconHTML(icon) + ' '); }
+      if (title) { buffer.push(title); }
+    } else {
+      // If no label or icon is present, yield
+      return this._super();
     }
-    buffer.push(I18n.t(this.get('label')));
   },
 
   click: function() {

app/assets/javascripts/discourse/templates/header.hbs

@@ -6,13 +6,9 @@
     <div class='panel clearfix'>
       {{#unless currentUser}}
         {{#if showSignUpButton}}
-        <button {{action "showCreateAccount"}} class='btn btn-primary btn-small sign-up-button'>
+          {{d-button action="showCreateAccount" class="btn-primary btn-small sign-up-button" label="sign_up"}}
-          {{i18n 'sign_up'}}
-        </button>
         {{/if}}
-        <button {{action "showLogin"}} class='btn btn-primary btn-small login-button'>
+        {{d-button action="showLogin" class="btn-primary btn-small login-button" icon="user" label="log_in"}}
-          {{fa-icon "user"}} {{i18n 'log_in'}}
-        </button>
       {{/unless}}
       <ul class='icons clearfix' role='navigation'>
         {{#if currentUser}}

app/assets/javascripts/discourse/templates/topic-entrance.hbs

@@ -1,6 +1,7 @@
-<button {{action "enterTop"}} class='btn full no-text jump-top'>
+{{#d-button action="enterTop" class="full no-text jump-top"}}
-  <i class='fa fa-caret-up'></i> {{{topDate}}}
+  {{fa-icon 'caret-up'}} {{{topDate}}}
-</button>
+{{/d-button}}
-<button {{action "enterBottom"}} class='btn full no-text jump-bottom'>
+
-  {{{bottomDate}}} <i class='fa fa-caret-down'></i>
+{{#d-button action="enterBottom" class="full no-text jump-button"}}
-</button>
+  {{{bottomDate}}} {{fa-icon 'caret-down'}}
+{{/d-button}}

app/assets/javascripts/discourse/templates/topic-progress.hbs

@@ -1,16 +1,19 @@
 {{#if expanded}}
   <nav id='topic-progress-expanded'>
-    <button {{action "jumpTop"}} {{bind-attr disabled=jumpTopDisabled}} class='btn full no-text'>
+    {{d-button action="jumpTop"
-      <i class="fa fa-caret-up"></i>
+               disabled=jumpTopDisabled
-      {{i18n 'topic.progress.go_top'}}
+               class="full no-text"
-    </button>
+               icon="caret-up"
+               label="topic.progress.go_top"}}
     <div class='jump-form'>
-      {{input value=toPostIndex}} <button {{action "jumpPost"}} class='btn'>{{i18n 'topic.progress.go'}}</button>
+      {{input value=toPostIndex}}
+      {{d-button action="jumpPost" label="topic.progress.go"}}
     </div>
-    <button {{action "jumpBottom"}} {{bind-attr disabled=jumpBottomDisabled}} class='btn full no-text jump-bottom'>
+    {{d-button action="jumpBottom"
-      {{i18n 'topic.progress.go_bottom'}}
+               disabled=jumpBottomDisabled
-      <i class="fa fa-caret-down"></i>
+               class="full no-text jump-bottom"
-    </button>
+               icon="caret-down"
+               label="topic.progress.go_bottom"}}
   </nav>
 {{/if}}
 <nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" {{bind-attr class="hideProgress:hidden"}}>

app/assets/javascripts/discourse/templates/topic.hbs

@@ -22,8 +22,8 @@
 
             {{plugin-outlet "edit-topic"}}
 
-            <button class='btn btn-primary btn-small no-text' {{action "finishedEditingTopic"}}>{{fa-icon "check"}}</button>
+            {{d-button action="finishedEditingTopic" class="btn-primary btn-small no-text" icon="check"}}
-            <button class='btn btn-small no-text' {{action "cancelEditingTopic"}}>{{fa-icon "times"}}</button>
+            {{d-button action="cancelEditingTopic" class="btn-small no-text" icon="times"}}
           {{else}}
             <h1>
               {{#unless is_warning}}
@@ -118,10 +118,10 @@
           <div>{{message}}</div>
           {{#if noRetry}}
             {{#unless currentUser}}
-              <button {{action "showLogin"}} class='btn btn-primary topic-retry'>{{fa-icon "user"}} {{i18n 'log_in'}}</button>
+              {{d-button action="showLogin" class="btn-primary topic-retry" icon="user" label="log_in"}}
             {{/unless}}
           {{else}}
-            <button class="btn btn-primary topic-retry" {{action "retryLoading"}}>{{fa-icon "refresh"}} {{i18n 'errors.buttons.again'}}</button>
+            {{d-button action="retryLoading" class="btn-primary topic-retry" icon="refresh" label="errors.buttons.again"}}
           {{/if}}
         </div>
         {{loading-spinner condition=retrying}}

app/assets/javascripts/discourse/templates/user-dropdown.hbs

@@ -8,6 +8,6 @@
     </li>
     <li>{{#link-to 'userActivity.bookmarks' currentUser}}{{i18n 'user.bookmarks'}}{{/link-to}}</li>
     <li>{{#link-to 'preferences' currentUser}}{{i18n 'user.preferences'}}{{/link-to}}</li>
-    <li><button {{action "logout"}} class='btn btn-danger right logout'><i class='fa fa-sign-out'></i>{{i18n 'user.log_out'}}</button></li>
+    <li>{{d-button action="logout" class="btn-danger right logout" icon="sign-out" label="user.log_out"}}</li>
   </ul>
 </section>

app/assets/javascripts/discourse/templates/user/user.hbs

@@ -117,7 +117,7 @@
               {{#if email}}
                 {{email}}
               {{else}}
-                <button class="btn btn-primary" title="{{i18n 'admin.users.check_email.title'}}" {{action "checkEmail" this}}>{{fa-icon "envelope-o"}} {{i18n 'admin.users.check_email.text'}}</button>
+                {{d-button action="checkEmail" icon="envelope-o" label="admin.users.check_email.text" class="btn-primary"}}
               {{/if}}
             </dd>
           {{/if}}
@@ -130,10 +130,7 @@
             </dd>
           {{/if}}
           {{#if canDeleteUser}}
-            <button class="btn btn-danger" {{action "adminDelete"}}>
+            {{d-button action="adminDelete" icon="exclamation-triangle" label="user.admin_delete" class="btn-danger"}}
-              <i class="fa fa-exclamation-triangle"></i>
-              {{i18n 'user.admin_delete'}}
-            </button>
           {{/if}}
         </dl>
         {{plugin-outlet "user-profile-secondary"}}
@@ -192,7 +189,7 @@
 
       {{#if viewingSelf}}
         <div class='user-archive'>
-          <button {{action "exportUserArchive"}} class="btn" title="{{i18n 'user.download_archive'}}">{{fa-icon "download"}} {{i18n 'user.download_archive'}}</button>
+          {{d-button action="exportUserArchive" label="user.download_archive" icon="download"}}
         </div>
       {{/if}}
     </section>

app/assets/stylesheets/common/base/topic.scss

@@ -1,10 +1,16 @@
 #topic-title {
 
-  .title-wrapper {float: left; width: 90%;}
+  .title-wrapper {
+    float: left;
+    width: 90%;
+    .btn-small {
+      margin: 0 6px 0 0;
+    }
+  }
 
   a.badge-category {
     margin-top: 5px;
-    }
+  }
 
   a.edit-topic i { font-size: 0.8em; }
 }