From a3d999c203d5cf16e568cd456b86c4be936b7837 Mon Sep 17 00:00:00 2001
From: ernjvr <ernjvr@gmail.com>
Date: Wed, 8 Aug 2018 08:39:38 +0200
Subject: [PATCH] ui: change table header cursor for sortable columns to
 pointer (#2788)

In the UI, when a user navigates to a screen that displays a table of data and hovers the mouse over a sortable column header, the cursor does not change to a hand pointer, indicating to the user that it can be clicked on, in order to sort the table's data rows according to that column.
When the mouse hovers over the non-sortable 'Quickview' column header, it incorrectly displays a hand pointer cursor instead of a default cursor.
When the mouse hovers over a column header, it also does not display the column header's value as a tooltip.

Expected Behaviour:
The cursor type for a sortable column header must display a hand pointer.
The cursor type for the non-sortable 'Quickview' column header must display a default pointer.
When the mouse hovers over a column header it must display the column header's value as a tooltip.

Actual Behaviour:
The cursor type for a sortable column header incorrectly displays a default pointer.
The cursor type for the non-sortable 'Quickview' column header incorrectly displays a hand pointer.
When the mouse hovers over a column header it does not display the column header's value as a tooltip.

To Reproduce:
In the UI, navigate to a screen that displays a table of data and hover the mouse over a sortable column header, the cursor does not change to a hand pointer.
Hover the mouse over the non-sortable 'Quickview' column header and notice that it incorrectly displays a hand pointer cursor instead of a default cursor.
Hover the mouse over a column header and notice that it does not display the column header's value as a tooltip.
---
 ui/css/cloudstack3.css            | 6 ++----
 ui/scripts/ui/widgets/listView.js | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index fb9c2e3c81a..1f54054fc69 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -125,6 +125,7 @@ table thead th {
   text-shadow: 0px 1px 1px #FFFFFF;
   font-weight: bold;
   white-space: nowrap;
+  cursor: pointer;
 }
 
 table thead th.sorted {
@@ -243,10 +244,7 @@ table thead th.quick-view {
   height: 14px !important;
   text-indent: 2px;
   white-space: nowrap;
-}
-
-table tbody td.quick-view {
-  cursor: pointer;
+  cursor: default;
 }
 
 table tbody td.quick-view .icon {
diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index fed61943861..688b77df6b0 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -780,7 +780,7 @@
 
         var addColumnToTr = function($tr, key, colspan, label, needsCollapsibleColumn) {
             var trText = _l(label);
-            var $th = $('<th>').addClass(key).attr('colspan', colspan).appendTo($tr);
+            var $th = $('<th>').addClass(key).attr('colspan', colspan).attr('title', trText).appendTo($tr);
             if ($th.index()) $th.addClass('reduced-hide');
             $th.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3'});
             if (needsCollapsibleColumn) {