bug #4617 UI issues with sortable tables

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>

ChangeLog

@@ -17,6 +17,7 @@ phpMyAdmin - ChangeLog
 - bug #4626 Ctrl + click on a column not in sort triggers a server call to erroneous url
 - bug #4625 "Insufficient space to save the file" on export SQL to file on server
 - bug #4627 "file_get_contents(examples/create_tables.sql): failed to open stream" after update
+- bug #4617 UI issues with sortable tables
 
 4.3.0.0 (2014-12-05)
 + rfe #1502 Smart sorting for int keys

js/server_status_sorter.js

@@ -13,16 +13,6 @@ function initTableSorter(tabid) {
             }
         };
         break;
-    case 'statustabs_allvars':
-        $table = $('#serverstatusvariables');
-        opts = {
-            sortList: [[0, 0]],
-            widgets: ['fast-zebra'],
-            headers: {
-                1: { sorter: 'withinSpanNumber' }
-            }
-        };
-        break;
     }
     $table.tablesorter(opts);
     $table.find('tr:first th')

js/server_status_variables.js

@@ -22,7 +22,6 @@ AJAX.registerOnload('server_status_variables.js', function () {
         'th',
         PMA_messages.strSortHint
     );
-    initTableSorter('statustabs_allvars');
 
     // Filters for status variables
     var textFilter = null;

libraries/central_columns.lib.php

@@ -626,19 +626,19 @@ function PMA_getCentralColumnsTableHeader($class='', $title='', $actionCount=0)
         . $action
         . '<th class="" style="display:none"></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="name">'
-        . __('Name') . '</th>'
+        . __('Name') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="type">'
-        . __('Type') . '</th>'
+        . __('Type') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="length">'
-        . __('Length/Values') . '</th>'
+        . __('Length/Values') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="collation"'
-        . '>' . __('Collation') . '</th>'
+        . '>' . __('Collation') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="isnull">'
-        . __('Null') . '</th>'
+        . __('Null') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="extra">'
-        . __('Extra') . '</th>'
+        . __('Extra') . '<div class="sorticon"></div></th>'
         . '<th class="' . $class . '" title="' . $title . '" data-column="default">'
-        . __('Default') . '</th>'
+        . __('Default') . '<div class="sorticon"></div></th>'
         . '</tr>';
     $tableheader .= '</thead>';
     return $tableheader;

libraries/server_status_queries.lib.php

@@ -90,13 +90,14 @@ function PMA_getHtmlForServerStatusQueriesDetails($ServerStatusData)
     $retval .= '<col class="namecol" />';
     $retval .= '<col class="valuecol" span="3" />';
     $retval .= '<thead>';
-    $retval .= '<tr><th>' . __('Statements') . '</th>';
+    $retval .= '<tr><th>' . __('Statements') . '<div class="sorticon"></div></th>';
     $retval .= '<th>';
     /* l10n: # = Amount of queries */
     $retval .= __('#');
-    $retval .= '</th>';
-    $retval .= '<th>&oslash; ' . __('per hour') . '</th>';
-    $retval .= '<th>%</th>';
+    $retval .= '<div class="sorticon"></div></th>';
+    $retval .= '<th>&oslash; ' . __('per hour')
+        . '<div class="sorticon"></div></th>';
+    $retval .= '<th>%<div class="sorticon"></div></th>';
     $retval .= '</tr>';
     $retval .= '</thead>';
     $retval .= '<tbody>';

libraries/server_status_variables.lib.php

@@ -210,7 +210,7 @@ function PMA_getHtmlForVariablesList($ServerStatusData)
  */
 function PMA_getHtmlForRenderVariables($ServerStatusData, $alerts, $strShowStatus)
 {
-    $retval  = '<table class="data sortable noclick" id="serverstatusvariables">';
+    $retval  = '<table class="data noclick" id="serverstatusvariables">';
     $retval .= '<col class="namecol" />';
     $retval .= '<col class="valuecol" />';
     $retval .= '<col class="descrcol" />';

themes/original/css/common.css.php

@@ -1183,29 +1183,6 @@ div#profilingchart {
     left: 11px;
     bottom:24px;
 }
-
-#profilesummarytable th.header, #profiletable th.header{
-    cursor: pointer;
-}
-
-#profilesummarytable th.header .sorticon, #profiletable th.header .sorticon{
-    width: 16px;
-    height: 16px;
-    background-repeat: no-repeat;
-    background-position: right center;
-    display: inline-block;
-    vertical-align: middle;
-    float: right;
-}
-
-#profilesummarytable th.headerSortUp .sorticon, #profiletable th.headerSortUp .sorticon{
-    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_desc.png');?>);
-}
-
-#profilesummarytable th.headerSortDown .sorticon, #profiletable th.headerSortDown .sorticon{
-    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_asc.png');?>);
-}
-
 /* end profiling */
 
 /* querybox */
@@ -3090,3 +3067,32 @@ span.drag_icon {
 .topmargin {
     margin-top: 1em;
 }
+
+/* styles for sortable tables created with tablesorter jquery plugin */
+th.header {
+    cursor: pointer;
+    color: #0000FF;
+}
+
+th.header:hover {
+    text-decoration: underline;
+}
+
+th.header .sorticon {
+    width: 16px;
+    height: 16px;
+    background-repeat: no-repeat;
+    background-position: right center;
+    display: inline-table;
+    vertical-align: middle;
+    float: right;
+}
+
+th.headerSortUp .sorticon, th.headerSortDown:hover .sorticon {
+    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_desc.png');?>);
+}
+
+th.headerSortDown .sorticon, th.headerSortUp:hover .sorticon {
+    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_asc.png');?>);
+}
+/* end of styles of sortable tables */

themes/pmahomme/css/common.css.php

@@ -1563,29 +1563,6 @@ div#profilingchart {
     left: 11px;
     bottom:24px;
 }
-
-#profilesummarytable th.header, #profiletable th.header{
-    cursor: pointer;
-}
-
-#profilesummarytable th.header .sorticon, #profiletable th.header .sorticon{
-    width: 16px;
-    height: 16px;
-    background-repeat: no-repeat;
-    background-position: right center;
-    display: inline-block;
-    vertical-align: middle;
-    float: right;
-}
-
-#profilesummarytable th.headerSortUp .sorticon, #profiletable th.headerSortUp .sorticon{
-    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_desc.png');?>);
-}
-
-#profilesummarytable th.headerSortDown .sorticon, #profiletable th.headerSortDown .sorticon{
-    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_asc.png');?>);
-}
-
 /* end profiling */
 
 /* table charting */
@@ -3410,4 +3387,33 @@ span.drag_icon {
 
 .topmargin {
     margin-top: 1em;
-}
+}
+
+/* styles for sortable tables created with tablesorter jquery plugin */
+th.header {
+    cursor: pointer;
+    color: #235a81;
+}
+
+th.header:hover {
+    text-decoration: underline;
+}
+
+th.header .sorticon {
+    width: 16px;
+    height: 16px;
+    background-repeat: no-repeat;
+    background-position: right center;
+    display: inline-table;
+    vertical-align: middle;
+    float: right;
+}
+
+th.headerSortUp .sorticon, th.headerSortDown:hover .sorticon {
+    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_desc.png');?>);
+}
+
+th.headerSortDown .sorticon, th.headerSortUp:hover .sorticon {
+    background-image: url(<?php echo $_SESSION['PMA_Theme']->getImgPath('s_asc.png');?>);
+}
+/* end of styles of sortable tables */