From ce53127e416f3ba00a7cf0fdc9d6a263c664cc87 Mon Sep 17 00:00:00 2001
From: Alex Wilmer <alex.wilmer@oicr.on.ca>
Date: Tue, 24 May 2016 15:39:42 -0400
Subject: [PATCH] fix(tables): 1771 improve sort ux

Closes #1771
---
 .../components/tables/tables.controllers.ts   |  4 +-
 .../tables/templates/sort-table.html          | 45 ++++++++++++++-----
 app/styles/tables.less                        |  7 +++
 3 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/app/scripts/components/tables/tables.controllers.ts b/app/scripts/components/tables/tables.controllers.ts
index 24310ebfc..ba7792957 100644
--- a/app/scripts/components/tables/tables.controllers.ts
+++ b/app/scripts/components/tables/tables.controllers.ts
@@ -128,7 +128,9 @@ module ngApp.components.tables.controllers {
       this.LocalStorageService.setItem(this.$scope.title + '-col', save);
     }
 
-    updateSorting(): void {
+    updateSorting(event): void {
+      if (event) event.stopPropagation();
+
       this.saveToLocalStorage();
 
       if (this.$scope.update) {
diff --git a/app/scripts/components/tables/templates/sort-table.html b/app/scripts/components/tables/templates/sort-table.html
index d4f3ee809..2581db18d 100644
--- a/app/scripts/components/tables/templates/sort-table.html
+++ b/app/scripts/components/tables/templates/sort-table.html
@@ -15,21 +15,42 @@
       data-uib-dropdown-menu
       role="menu">
     <li data-ng-repeat="item in sortColumns">
-      <div class="sort-item">
-        <i class="fa fa-{{item.sort ? 'check-square-o' : 'square-o'}} fa-stack" ng-click="tsc.toggleSorting(item)"></i>
-        <span>{{ item.name | translate }}</span>
-        <span class="pull-right text-right" data-ng-if="item.sort">
+      <div
+        style="display: flex;"
+        class="sort-item"
+        ng-click="tsc.toggleSorting(item)"
+      >
+        <span>
+          <i class="fa fa-{{item.sort ? 'check-square-o' : 'square-o'}} fa-stack"></i>
+          <span>{{ item.name | translate }}</span>
+        </span>
+
+        <span
+          style="
+            margin: 0 -10px 0 auto;
+            padding: 3px 10px;
+            background-color: white;
+            cursor: default;
+          "
+          class="text-right sorting-radio-buttons-container"
+        >
 
           <i class="fa fa-sort-alpha-asc"></i>
-          <input type="radio" aria-label="Sort Data Ascending" value="asc"
-              title="Sort Data Ascending"
-              data-ng-model="item.order" data-ng-change="tsc.updateSorting()"
-              data-ng-checked="!item.order || item.order === 'asc'"
-              name="{{ item.id }}-sort-order">
+          <input
+            type="radio" aria-label="Sort Data Ascending" value="asc"
+            style="cursor:pointer;"
+            title="Sort Data Ascending"
+            data-ng-model="item.order" data-ng-click="tsc.updateSorting($event)"
+            data-ng-checked="!item.order || item.order === 'asc'"
+            name="{{ item.id }}-sort-order"
+          >
           <i class="fa fa-sort-alpha-desc"></i>
-          <input type="radio" aria-label="Sort Data Descending" value="desc"
-                 data-ng-model="item.order" data-ng-change="tsc.updateSorting()"
-                 name="{{ item.id }}-sort-order">
+          <input
+            type="radio" aria-label="Sort Data Descending" value="desc"
+            style="cursor:pointer;"
+            data-ng-model="item.order" data-ng-click="tsc.updateSorting($event)"
+            name="{{ item.id }}-sort-order"
+          >
         </span>
       </div>
     </li>
diff --git a/app/styles/tables.less b/app/styles/tables.less
index 7266f5318..020781d3b 100644
--- a/app/styles/tables.less
+++ b/app/styles/tables.less
@@ -80,3 +80,10 @@ th.truncated-cell {
     line-height: 28px;;
   }
 }
+
+.Columns-dropdown-headings > li {
+  outline: none;
+}
+.Columns-dropdown-headings > li:hover .sorting-radio-buttons-container {
+  border-left: 2px solid rgb(28, 126, 198);
+}