Updating sortable columns to have sorting icon and updated cursor

HospitalRun · Jul 11, 2016 · 8accc25 · 8accc25
1 parent 914b202
commit 8accc25
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/app/components/sortable-column.js b/app/components/sortable-column.js
@@ -1,5 +1,6 @@
 import Ember from 'ember';
 export default Ember.Component.extend({
+  classNames: ['sortable-column'],
   tagName: 'th',
   action: 'sortByKey',
   sortDesc: false,

diff --git a/app/styles/_temp_misc.scss b/app/styles/_temp_misc.scss
@@ -1,8 +1,17 @@
 $table-header-color: rgba($navy_drk2,.7);
+$inactive-sort-indicator: rgba($navy_drk2,.3);
 
 .table-header {
   background-color: $navy_light;
   color: $table-header-color;
+
+  .sortable-column {
+    cursor: pointer;
+
+    .inactive {
+      color: $inactive-sort-indicator;
+    }
+  }
 }
 
 .twitter-typeahead {

diff --git a/app/templates/components/sortable-column.hbs b/app/templates/components/sortable-column.hbs
@@ -1,5 +1,7 @@
 {{#if sorted}}
-    <span class="glyphicon {{if sortDesc 'glyphicon-arrow-down' 'glyphicon-arrow-up'}}"></span>
+    <span class="octicon {{if sortDesc 'octicon-triangle-down' 'octicon-triangle-up'}}"></span>
+{{else}}
+    <span class="octicon octicon-triangle-down inactive"></span>
 {{/if}}
 
-{{yield}}
+{{yield}}