Modify the navigation bar to provide more intuitive UI

This commit is contained in:
Aris Feryanto 2011-06-30 13:15:13 +08:00
parent 9ae693eb06
commit f0c322cbdd
3 changed files with 151 additions and 40 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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;
}