Improve styling of staff action logs UI

app/assets/javascripts/admin/controllers/admin_logs_staff_action_logs_controller.js

@@ -24,19 +24,6 @@ Discourse.AdminLogsStaffActionLogsController = Ember.ArrayController.extend(Disc
     return (_.size(this.get('filters')) > 0);
   }.property('filters.action_name', 'filters.acting_user', 'filters.target_user', 'filters.subject'),
 
-  clearFilter: function(key) {
-    delete this.get('filters')[key];
-    this.notifyPropertyChange('filters');
-  },
-
-  clearAllFilters: function() {
-    this.set('filters', {});
-  },
-
-  filterByAction: function(action) {
-    this.set('filters.action_name', action);
-  },
-
   actionFilter: function() {
     if (this.get('filters.action_name')) {
       return I18n.t("admin.logs.staff_actions.actions." + this.get('filters.action_name'));
@@ -45,15 +32,34 @@ Discourse.AdminLogsStaffActionLogsController = Ember.ArrayController.extend(Disc
     }
   }.property('filters.action_name'),
 
-  filterByStaffUser: function(acting_user) {
-    this.set('filters.acting_user', acting_user.username);
-  },
+  showInstructions: function() {
+    return this.get('model.length') > 0;
+  }.property('loading', 'model.length'),
 
-  filterByTargetUser: function(target_user) {
-    this.set('filters.target_user', target_user.username);
-  },
+  actions: {
+    clearFilter: function(key) {
+      delete this.get('filters')[key];
+      this.notifyPropertyChange('filters');
+    },
 
-  filterBySubject: function(subject) {
-    this.set('filters.subject', subject);
+    clearAllFilters: function() {
+      this.set('filters', {});
+    },
+
+    filterByAction: function(action) {
+      this.set('filters.action_name', action);
+    },
+
+    filterByStaffUser: function(acting_user) {
+      this.set('filters.acting_user', acting_user.username);
+    },
+
+    filterByTargetUser: function(target_user) {
+      this.set('filters.target_user', target_user.username);
+    },
+
+    filterBySubject: function(subject) {
+      this.set('filters.subject', subject);
+    }
   }
 });

app/assets/javascripts/admin/templates/logs/staff_action_logs.js.handlebars

@@ -28,6 +28,10 @@
   {{/if}}
 </div>
 
+<div class="staff-action-logs-instructions" {{bindAttr class=":staff-action-logs-instructions showInstructions::invisible"}}>
+  {{i18n admin.logs.staff_actions.instructions}}
+</div>
+
 <div class='table staff-actions'>
   <div class="heading-container">
     <div class="col heading first staff_user">{{i18n admin.logs.staff_actions.staff_user}}</div>
@@ -50,9 +54,3 @@
     {{/if}}
   {{/if}}
 </div>
-
-{{#unless loading}}
-  <div class="staff-action-logs-instructions">
-    {{i18n admin.logs.staff_actions.instructions}}
-  </div>
-{{/unless}}

app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars

@@ -1,17 +1,17 @@
 <div class="col value first staff_user">
   {{#link-to 'adminUser' acting_user}}{{avatar acting_user imageSize="tiny"}}{{/link-to}}
-  <a {{action filterByStaffUser acting_user}}>{{acting_user.username}}</a>
+  <a {{action filterByStaffUser acting_user}} class="btn btn-small">{{acting_user.username}}</a>
 </div>
 <div class="col value action">
-  <a {{action filterByAction action_name}}>{{actionName}}</a>
+  <a {{action filterByAction action_name}} class="btn btn-small">{{actionName}}</a>
 </div>
 <div class="col value subject">
   {{#if target_user}}
     {{#link-to 'adminUser' target_user}}{{avatar target_user imageSize="tiny"}}{{/link-to}}
-    <a {{action filterByTargetUser target_user}}>{{target_user.username}}</a>
+    <a {{action filterByTargetUser target_user}} class="btn btn-small">{{target_user.username}}</a>
   {{/if}}
   {{#if subject}}
-    <a {{action filterBySubject subject}} {{bindAttr title="subject"}}>{{subject}}</a>
+    <a {{action filterBySubject subject}} {{bindAttr title="subject"}}  class="btn btn-small">{{subject}}</a>
   {{/if}}
 </div>
 <div class="col value created_at">{{unboundAgeWithTooltip created_at}}</div>

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

@@ -849,7 +849,7 @@ table.api-keys {
 }
 
 .staff-action-logs-instructions {
-  margin: 50px 0 0 10px;
+  margin: 0 0 10px 10px;
 }
 
 // Ember.ListView