From e1d956f5ee0ab67749e560bdcb1274c8827b93b0 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Thu, 31 Oct 2013 12:17:06 -0400
Subject: [PATCH] Improve styling of staff action logs UI

---
 ...admin_logs_staff_action_logs_controller.js | 48 +++++++++++--------
 .../logs/staff_action_logs.js.handlebars      | 10 ++--
 .../staff_action_logs_list_item.js.handlebars |  8 ++--
 .../stylesheets/common/admin/admin_base.scss  |  2 +-
 4 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/admin/controllers/admin_logs_staff_action_logs_controller.js b/app/assets/javascripts/admin/controllers/admin_logs_staff_action_logs_controller.js
index 457cee475bf..898e20a7d48 100644
--- a/app/assets/javascripts/admin/controllers/admin_logs_staff_action_logs_controller.js
+++ b/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);
+    }
   }
 });
diff --git a/app/assets/javascripts/admin/templates/logs/staff_action_logs.js.handlebars b/app/assets/javascripts/admin/templates/logs/staff_action_logs.js.handlebars
index 5600b9d7bec..cd20db079d7 100644
--- a/app/assets/javascripts/admin/templates/logs/staff_action_logs.js.handlebars
+++ b/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}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars b/app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars
index c807003e635..86a4ba50cdf 100644
--- a/app/assets/javascripts/admin/templates/logs/staff_action_logs_list_item.js.handlebars
+++ b/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>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 0871a7e3964..22696753c0d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/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