From f0c322cbdd168d251a47ae7ed3200e4abde7cd8d Mon Sep 17 00:00:00 2001
From: Aris Feryanto <aris_feryanto@yahoo.com>
Date: Thu, 30 Jun 2011 13:15:13 +0800
Subject: [PATCH] Modify the navigation bar to provide more intuitive UI

---
 libraries/display_tbl.lib.php           | 90 ++++++++++++++-----------
 themes/original/css/theme_right.css.php | 40 +++++++++++
 themes/pmahomme/css/theme_right.css.php | 61 +++++++++++++++++
 3 files changed, 151 insertions(+), 40 deletions(-)

diff --git a/libraries/display_tbl.lib.php b/libraries/display_tbl.lib.php
index 34d6967ddc..efd9a59e38 100644
--- a/libraries/display_tbl.lib.php
+++ b/libraries/display_tbl.lib.php
@@ -293,8 +293,9 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
     ?>
 
 <!-- Navigation bar -->
-<table border="0" cellpadding="2" cellspacing="0" class="navigation">
+<table border="0" cellpadding="0" cellspacing="0" class="navigation">
 <tr>
+    <td class="navigation_separator"></td>
     <?php
     // Move to the beginning or to the previous page
     if ($_SESSION['tmp_user_values']['pos'] && $_SESSION['tmp_user_values']['max_rows'] != 'all') {
@@ -330,8 +331,7 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
                     5,
                     5,
                     20,
-                    10,
-                    __('Page number:')
+                    10
             );
         ?>
         </form>
@@ -344,16 +344,16 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
     if ($GLOBALS['cfg']['ShowAll'] && ($num_rows < $unlim_num_rows)) {
         echo "\n";
         ?>
-<td>
-    <form action="sql.php" method="post">
-        <?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
-        <input type="hidden" name="sql_query" value="<?php echo $html_sql_query; ?>" />
-        <input type="hidden" name="pos" value="0" />
-        <input type="hidden" name="session_max_rows" value="all" />
-        <input type="hidden" name="goto" value="<?php echo $goto; ?>" />
-        <input type="submit" name="navig" value="<?php echo __('Show all'); ?>" />
-    </form>
-</td>
+    <td>
+        <form action="sql.php" method="post">
+            <?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
+            <input type="hidden" name="sql_query" value="<?php echo $html_sql_query; ?>" />
+            <input type="hidden" name="pos" value="0" />
+            <input type="hidden" name="session_max_rows" value="all" />
+            <input type="hidden" name="goto" value="<?php echo $goto; ?>" />
+            <input type="submit" name="navig" value="<?php echo __('Show all'); ?>" />
+        </form>
+    </td>
         <?php
     } // end show all
 
@@ -386,9 +386,17 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
             $onclick
             );
     } // end move toward
+
+    // show separator if pagination happen
+    if ($nbTotalPage > 1){
+        echo '<td><div class="navigation_separator">|</div></td>';
+    }
     ?>
     <td>
-        <input class="restore_column hide" type="submit" value="<?php echo __('Restore column order'); ?>" />
+        <div class="restore_column hide">
+            <input type="submit" value="<?php echo __('Restore column order'); ?>" />
+            <div class="navigation_separator">|</div>
+        </div>
         <?php
         if (PMA_isSelect()) {
             // generate the column order, if it is set
@@ -413,38 +421,40 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
         echo '<input id="show_all_col_text" type="hidden" value="' . __('Show all') . '" />';
         ?>
     </td>
-</tr>
-</table>
 
 <?php // if displaying a VIEW, $unlim_num_rows could be zero because
       // of $cfg['MaxExactCountViews']; in this case, avoid passing
       // the 5th parameter to checkFormElementInRange()
       // (this means we can't validate the upper limit ?>
-<div>
-    <form action="sql.php" method="post"
-onsubmit="return (checkFormElementInRange(this, 'session_max_rows', '<?php echo str_replace('\'', '\\\'', __('%d is not valid row number.')); ?>', 1) &amp;&amp; checkFormElementInRange(this, 'pos', '<?php echo str_replace('\'', '\\\'', __('%d is not valid row number.')); ?>', 0<?php echo $unlim_num_rows > 0 ? ',' . $unlim_num_rows - 1 : ''; ?>))">
-        <?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
-        <input type="hidden" name="sql_query" value="<?php echo $html_sql_query; ?>" />
-        <input type="hidden" name="goto" value="<?php echo $goto; ?>" />
-        <input type="submit" name="navig" <?php echo ($GLOBALS['cfg']['AjaxEnable'] ? ' class="ajax"' : ''); ?> value="<?php echo __('Show'); ?> :" />
-        <input type="text" name="session_max_rows" size="3" value="<?php echo (($_SESSION['tmp_user_values']['max_rows'] != 'all') ? $_SESSION['tmp_user_values']['max_rows'] : $GLOBALS['cfg']['MaxRows']); ?>" class="textfield" onfocus="this.select()" />
-        <?php echo __('row(s) starting from row #') . "\n"; ?>
-        <input type="text" name="pos" size="6" value="<?php echo (($pos_next >= $unlim_num_rows) ? 0 : $pos_next); ?>" class="textfield" onfocus="this.select()" />
-    <?php
-    // Display mode (horizontal/vertical and repeat headers)
-    $choices = array(
-        'horizontal'        => __('horizontal'),
-        'horizontalflipped' => __('horizontal (rotated headers)'),
-        'vertical'          => __('vertical'));
-    $param1 = PMA_generate_html_dropdown('disp_direction', $choices, $_SESSION['tmp_user_values']['disp_direction'], $id_for_direction_dropdown);
-    unset($choices);
+    <td class="navigation_goto">
+        <form action="sql.php" method="post"
+    onsubmit="return (checkFormElementInRange(this, 'session_max_rows', '<?php echo str_replace('\'', '\\\'', __('%d is not valid row number.')); ?>', 1) &amp;&amp; checkFormElementInRange(this, 'pos', '<?php echo str_replace('\'', '\\\'', __('%d is not valid row number.')); ?>', 0<?php echo $unlim_num_rows > 0 ? ',' . $unlim_num_rows - 1 : ''; ?>))">
+            <?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
+            <input type="hidden" name="sql_query" value="<?php echo $html_sql_query; ?>" />
+            <input type="hidden" name="goto" value="<?php echo $goto; ?>" />
+            <input type="submit" name="navig" <?php echo ($GLOBALS['cfg']['AjaxEnable'] ? ' class="ajax"' : ''); ?> value="<?php echo __('Show'); ?> :" />
+            <input type="text" name="session_max_rows" size="3" value="<?php echo (($_SESSION['tmp_user_values']['max_rows'] != 'all') ? $_SESSION['tmp_user_values']['max_rows'] : $GLOBALS['cfg']['MaxRows']); ?>" class="textfield" onfocus="this.select()" />
+            <?php echo __('row(s) starting from row #') . "\n"; ?>
+            <input type="text" name="pos" size="3" value="<?php echo (($pos_next >= $unlim_num_rows) ? 0 : $pos_next); ?>" class="textfield" onfocus="this.select()" />
+        <?php
+        // Display mode (horizontal/vertical and repeat headers)
+        $choices = array(
+            'horizontal'        => __('horizontal'),
+            'horizontalflipped' => __('horizontal (rotated headers)'),
+            'vertical'          => __('vertical'));
+        $param1 = PMA_generate_html_dropdown('disp_direction', $choices, $_SESSION['tmp_user_values']['disp_direction'], $id_for_direction_dropdown);
+        unset($choices);
+
+        $param2 = '            <input type="text" size="3" name="repeat_cells" value="' . $_SESSION['tmp_user_values']['repeat_cells'] . '" class="textfield" />' . "\n"
+                . '           ';
+        echo '    ' . sprintf(__('in %s mode and repeat headers after %s cells'), "\n" . $param1, "\n" . $param2) . "\n";
+        ?>
+        </form>
+    </td>
+    <td class="navigation_separator"></td>
+</tr>
+</table>
 
-    $param2 = '            <input type="text" size="3" name="repeat_cells" value="' . $_SESSION['tmp_user_values']['repeat_cells'] . '" class="textfield" />' . "\n"
-            . '           ';
-    echo '    ' . sprintf(__('in %s mode and repeat headers after %s cells'), "\n" . $param1, "\n" . $param2) . "\n";
-    ?>
-    </form>
-</div>
     <?php
 } // end of the 'PMA_displayTableNavigation()' function
 
diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 12aefd88b5..d747631ec2 100644
--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@@ -2202,3 +2202,43 @@ span.mysql-number {
 .showAllColBtn:hover {
     background: #DDD;
 }
+
+.navigation {
+    background: #E5E5E5;
+    border: 1px solid black;
+    margin: 0.8em 0;
+}
+
+.navigation td {
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.navigation_separator {
+    color: #555;
+    display: inline-block;
+    text-align: center;
+    width: 1.2em;
+    text-shadow: 1px 0 #FFF;
+}
+
+.navigation input[type=submit] {
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0.3em 0.5em;
+    min-width: 2.5em;
+    font-weight: bold;
+}
+
+.navigation input[type=submit]:hover {
+    background: #333;
+    color: white;
+    cursor: pointer;
+}
+
+.navigation select {
+    margin: 0 0.8em;
+}
diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php
index 67177b6f38..a8c8960f1e 100644
--- a/themes/pmahomme/css/theme_right.css.php
+++ b/themes/pmahomme/css/theme_right.css.php
@@ -2563,3 +2563,64 @@ span.mysql-number {
 .showAllColBtn:hover {
     background: #DDD;
 }
+
+.navigation {
+    background: #E5E5E5;
+    margin: 0.8em 0;
+
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    
+    background-image: url(./themes/svg_gradient.php?from=eeeeee&to=cccccc);
+    background-size: 100% 100%;
+    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
+    background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
+    background: -o-linear-gradient(top,  #eeeeee,  #cccccc);
+    <?php echo PMA_ieFilter('#eeeeee', '#cccccc'); ?>
+}
+
+.navigation td {
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.navigation_separator {
+    color: #999;
+    display: inline-block;
+    font-size: 1.5em;
+    text-align: center;
+    height: 1.4em;
+    width: 1.2em;
+    text-shadow: 1px 0 #FFF;
+}
+
+.navigation input[type=submit] {
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0.8em 0.5em;
+    min-width: 2.5em;
+
+    border-radius: 0;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+}
+
+.navigation input[type=submit]:hover {
+    color: white;
+    cursor: pointer;
+    text-shadow: none;
+
+    background-image: url(./themes/svg_gradient.php?from=333333&to=555555);
+    background-size: 100% 100%;
+    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#555555));
+    background: -moz-linear-gradient(top,  #333333,  #555555);
+    background: -o-linear-gradient(top,  #333333,  #555555);
+}
+
+.navigation select {
+    margin: 0 0.8em;
+}