[cloudstack] branch 4.11 updated: ui: change table header cursor for sortable columns to pointer (#2788)

[rohit]

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch 4.11
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/4.11 by this push:
     new a3d999c  ui: change table header cursor for sortable columns to 
pointer (#2788)
a3d999c is described below

commit a3d999c203d5cf16e568cd456b86c4be936b7837
Author: ernjvr <ern...@gmail.com>
AuthorDate: Wed Aug 8 08:39:38 2018 +0200

    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 fb9c2e3..1f54054 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 fed6194..688b77d 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) {