use list for navigation tabs RFE #1290423

This commit is contained in:
Sebastian Mendel
2005-10-12 09:28:38 +00:00
parent 6b9d267485
commit e052827c74
5 changed files with 169 additions and 82 deletions

View File

@@ -5,6 +5,12 @@ phpMyAdmin - Changelog
$Id$ $Id$
$Source$ $Source$
2005-10-12 Sebastian Mendel <cybot_tm@users.sourceforge.net>
* css/phpmyadmin.css.php, libraries/common.lib.php,
themes/darkblue_orange/css/theme_right.css.php,
themes/original/css/theme_right.css.php:
use list for navigation tabs RFE #1290423
2005-10-12 Michal Čihař <michal@cihar.com> 2005-10-12 Michal Čihař <michal@cihar.com>
* libraries/get_foreign.lib.php: Fix paging. * libraries/get_foreign.lib.php: Fix paging.

View File

@@ -248,19 +248,32 @@ textarea { overflow: auto; }
.nospace { margin: 0; padding: 0; } .nospace { margin: 0; padding: 0; }
/* topmenu */ /* topmenu */
#topmenu { ul#topmenu {
font-weight: bold; font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topmenu li {
float: left;
margin: 0;
padding: 0;
vertical-align: middle;
} }
#topmenu img { #topmenu img {
height: 1em; height: 1.3em;
width: auto; width: auto;
vertical-align: text-bottom;
margin-right: 0.1em;
} }
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
margin-right: 0.1em; display: block;
margin-left: 0.1em; margin: 0.2em 0.2em 0 0.2em;
padding: 0.2em 0.2em 0 0.2em;
white-space: nowrap; white-space: nowrap;
} }
@@ -286,36 +299,38 @@ a.tabcaution:hover {
<?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?> <?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?>
/* active tab */ /* active tab */
a.tabactive { a.tabactive {
border-bottom: 0.1em solid black;
color: black; color: black;
} }
<?php } else { ?> <?php } else { ?>
#topmenu { #topmenu {
margin-top: 0.5em; margin-top: 0.5em;
border-bottom: 0.1em solid black;
padding: 0.1em 0.3em 0.1em 0.3em; padding: 0.1em 0.3em 0.1em 0.3em;
} }
ul#topmenu li {
border-bottom: 1pt solid black;
}
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
background-color: #E5E5E5; background-color: <?php echo $GLOBALS['cfg']['BgcolorOne']; ?>;
border: 0.1em solid <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>; border: 1pt solid <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
border-bottom: 0.1em solid black; border-bottom: 0;
border-radius-topleft: 0.5em; border-radius-topleft: 0.4em;
border-radius-topright: 0.5em; border-radius-topright: 0.4em;
-moz-border-radius-topleft: 0.5em; -moz-border-radius-topleft: 0.4em;
-moz-border-radius-topright: 0.5em; -moz-border-radius-topright: 0.4em;
padding: 0.1em 0.2em 0.1em 0.2em;
} }
/* enabled hover/active tabs */ /* enabled hover/active tabs */
a.tab:hover, a.tabcaution:hover, .tabactive { a.tab:hover, a.tabcaution:hover, .tabactive, .tabactive:hover {
margin-right: 0; margin: 0;
margin-left: 0; padding: 0.2em 0.4em 0.2em 0.4em;
padding: 0.3em 0.3em 0.1em 0.3em; text-decoration: none;
} }
a.tab:hover, .tabactive { a.tab:hover, .tabactive {
background-color: #CCCCCC; background-color: <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
} }
/* disabled drop/empty tabs */ /* disabled drop/empty tabs */

View File

@@ -2330,10 +2330,23 @@ if (typeof(document.getElementById) != 'undefined'
* returns a tab for tabbed navigation. * returns a tab for tabbed navigation.
* If the variables $link and $args ar left empty, an inactive tab is created * If the variables $link and $args ar left empty, an inactive tab is created
* *
* @param array $tab array with all options * @uses array_merge()
* * basename()
* $GLOBALS['strEmpty']
* $GLOBALS['strDrop']
* $GLOBALS['active_page']
* $_SERVER['PHP_SELF']
* htmlentities()
* PMA_generate_common_url()
* $GLOBALS['url_query']
* urlencode()
* $GLOBALS['cfg']['MainPageIconic']
* $GLOBALS['pmaThemeImage']
* sprintf()
* trigger_error()
* E_USER_NOTICE
* @param array $tab array with all options
* @return string html code for one tab, a link if valid otherwise a span * @return string html code for one tab, a link if valid otherwise a span
*
* @access public * @access public
*/ */
function PMA_getTab( $tab ) function PMA_getTab( $tab )
@@ -2353,12 +2366,14 @@ if (typeof(document.getElementById) != 'undefined'
// determine aditional style-class // determine aditional style-class
if ( empty( $tab['class'] ) ) { if ( empty( $tab['class'] ) ) {
if ($tab['text'] == $GLOBALS['strEmpty'] || $tab['text'] == $GLOBALS['strDrop']) { if ( $tab['text'] == $GLOBALS['strEmpty']
|| $tab['text'] == $GLOBALS['strDrop'] ) {
$tab['class'] = 'caution'; $tab['class'] = 'caution';
} }
elseif ( isset( $tab['active'] ) && $tab['active'] elseif ( isset( $tab['active'] ) && $tab['active']
|| isset($GLOBALS['active_page']) && $GLOBALS['active_page'] == $tab['link'] || isset( $GLOBALS['active_page'] )
|| basename($_SERVER['PHP_SELF']) == $tab['link'] ) && $GLOBALS['active_page'] == $tab['link']
|| basename( $_SERVER['PHP_SELF'] ) == $tab['link'] )
{ {
$tab['class'] = 'active'; $tab['class'] = 'active';
} }
@@ -2367,10 +2382,13 @@ if (typeof(document.getElementById) != 'undefined'
// build the link // build the link
if ( ! empty( $tab['link'] ) ) { if ( ! empty( $tab['link'] ) ) {
$tab['link'] = htmlentities( $tab['link'] ); $tab['link'] = htmlentities( $tab['link'] );
$tab['link'] = $tab['link'] . $tab['sep'] . ( empty( $GLOBALS['url_query'] ) ? PMA_generate_common_url() : $GLOBALS['url_query'] ); $tab['link'] = $tab['link'] . $tab['sep']
.( empty( $GLOBALS['url_query'] ) ?
PMA_generate_common_url() : $GLOBALS['url_query'] );
if ( ! empty( $tab['args'] ) ) { if ( ! empty( $tab['args'] ) ) {
foreach( $tab['args'] as $param => $value ) { foreach( $tab['args'] as $param => $value ) {
$tab['link'] .= '&amp;' . urlencode( $param ) . '=' . urlencode( $value ); $tab['link'] .= '&amp;' . urlencode( $param ) . '='
. urlencode( $value );
} }
} }
} }
@@ -2378,20 +2396,25 @@ if (typeof(document.getElementById) != 'undefined'
// display icon, even if iconic is disabled but the link-text is missing // display icon, even if iconic is disabled but the link-text is missing
if ( ( $GLOBALS['cfg']['MainPageIconic'] || empty( $tab['text'] ) ) if ( ( $GLOBALS['cfg']['MainPageIconic'] || empty( $tab['text'] ) )
&& isset( $tab['icon'] ) ) { && isset( $tab['icon'] ) ) {
$image = '<img src="' . htmlentities( $GLOBALS['pmaThemeImage'] ) . '%1$s" width="16" height="16" border="0" alt="%2$s" />%2$s'; $image = '<img src="' . htmlentities( $GLOBALS['pmaThemeImage'] )
.'%1$s" width="16" height="16" border="0" alt="%2$s" />%2$s';
$tab['text'] = sprintf( $image, htmlentities( $tab['icon'] ), $tab['text'] ); $tab['text'] = sprintf( $image, htmlentities( $tab['icon'] ), $tab['text'] );
} }
// check to not display an empty link-text // check to not display an empty link-text
elseif ( empty( $tab['text'] ) ) { elseif ( empty( $tab['text'] ) ) {
$tab['text'] = '?'; $tab['text'] = '?';
trigger_error( __FILE__ . '(' . __LINE__ . '): ' . 'empty linktext in function ' . __FUNCTION__ . '()', E_USER_NOTICE ); trigger_error( __FILE__ . '(' . __LINE__ . '): '
. 'empty linktext in function ' . __FUNCTION__ . '()',
E_USER_NOTICE );
} }
if ( ! empty( $tab['link'] ) ) { if ( ! empty( $tab['link'] ) ) {
$out = '<a class="tab' . htmlentities( $tab['class'] ) . '" href="' . $tab['link'] . '" ' . $tab['attr'] . '>' $out = '<a class="tab' . htmlentities( $tab['class'] ) . '"'
. $tab['text'] . '</a>'; .' href="' . $tab['link'] . '" ' . $tab['attr'] . '>'
. $tab['text'] . '</a>';
} else { } else {
$out = '<span class="tab' . htmlentities( $tab['class'] ) . '">' . $tab['text'] . '</span>'; $out = '<span class="tab' . htmlentities( $tab['class'] ) . '">'
. $tab['text'] . '</span>';
} }
return $out; return $out;
@@ -2400,22 +2423,25 @@ if (typeof(document.getElementById) != 'undefined'
/** /**
* returns html-code for a tab navigation * returns html-code for a tab navigation
* *
* @param array $tabs one element per tab * @uses PMA_getTab()
* @uses htmlentities()
* @param array $tabs one element per tab
* @param string $tag_id id used for the html-tag * @param string $tag_id id used for the html-tag
* @return string html-code for tab-navigation * @return string html-code for tab-navigation
*/ */
function PMA_getTabs( $tabs, $tag_id = 'topmenu' ) function PMA_getTabs( $tabs, $tag_id = 'topmenu' ) {
{ $tab_navigation =
$tab_navigation = '<!-- top menu -->' . "\n"; '<div id="' . htmlentities( $tag_id ) . 'container">' . "\n"
$tab_navigation .= '<div id="' . htmlentities( $tag_id ) . '">' . "\n"; .'<ul id="' . htmlentities( $tag_id ) . '">' . "\n";
foreach ( $tabs as $tab ) foreach ( $tabs as $tab ) {
{ $tab_navigation .= '<li>' . PMA_getTab( $tab ) . '</li>' . "\n";
$tab_navigation .= PMA_getTab( $tab ) . "\n";
} }
$tab_navigation .= '</div>' . "\n"; $tab_navigation .=
$tab_navigation .= '<!-- end top menu -->' . "\n\n"; '</ul>' . "\n"
.'<div class="clearfloat"></div>'
.'</div>' . "\n";
return $tab_navigation; return $tab_navigation;
} }

View File

@@ -202,17 +202,36 @@ button.mult_submit {
/* topmenu */ /* topmenu */
#topmenu { ul#topmenu {
font-weight: bold; font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topmenu li {
float: left;
margin: 0;
padding: 0;
vertical-align: middle;
}
#topmenu img {
height: 1.3em;
width: auto;
vertical-align: text-bottom;
margin-right: 0.1em;
} }
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
margin-right: 0.1em; display: block;
margin-left: 0.1em; margin: 0.2em 0.2em 0 0.2em;
padding: 0.2em 0.2em 0 0.2em;
white-space: nowrap;
} }
/* disbaled tabs */ /* disabled tabs */
span.tab { span.tab {
color: #666666; color: #666666;
} }
@@ -234,36 +253,38 @@ a.tabcaution:hover {
<?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?> <?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?>
/* active tab */ /* active tab */
a.tabactive { a.tabactive {
border-bottom: 0.1em solid black;
color: black; color: black;
} }
<?php } else { ?> <?php } else { ?>
#topmenu { #topmenu {
margin-top: 0.5em; margin-top: 0.5em;
border-bottom: 0.1em solid black;
padding: 0.1em 0.3em 0.1em 0.3em; padding: 0.1em 0.3em 0.1em 0.3em;
} }
ul#topmenu li {
border-bottom: 1pt solid black;
}
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
background-color: #E5E5E5; background-color: <?php echo $GLOBALS['cfg']['BgcolorOne']; ?>;
border: 0.1em solid silver; border: 1pt solid <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
border-bottom: 0.1em solid black; border-bottom: 0;
border-radius-topleft: 0.5em; border-radius-topleft: 0.4em;
border-radius-topright: 0.5em; border-radius-topright: 0.4em;
-moz-border-radius-topleft: 0.5em; -moz-border-radius-topleft: 0.4em;
-moz-border-radius-topright: 0.5em; -moz-border-radius-topright: 0.4em;
padding: 0.1em 0.2em 0.1em 0.2em;
} }
/* enabled hover/active tabs */ /* enabled hover/active tabs */
a.tab:hover, a.tabcaution:hover, .tabactive { a.tab:hover, a.tabcaution:hover, .tabactive, .tabactive:hover {
margin-right: 0; margin: 0;
margin-left: 0; padding: 0.2em 0.4em 0.2em 0.4em;
padding: 0.3em 0.3em 0.1em 0.3em; text-decoration: none;
} }
a.tab:hover, .tabactive { a.tab:hover, .tabactive {
background-color: #CCCCCC; background-color: <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
} }
/* disabled drop/empty tabs */ /* disabled drop/empty tabs */

View File

@@ -113,19 +113,37 @@ button.mult_submit {
hr{ color: #666666; background-color: #666666; border: 0; height: 1px; } hr{ color: #666666; background-color: #666666; border: 0; height: 1px; }
/* topmenu */ /* topmenu */
#topmenu { ul#topmenu {
font-weight: bold; font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topmenu li {
float: left;
margin: 0;
padding: 0;
vertical-align: middle;
}
#topmenu img {
height: 1.3em;
width: auto;
vertical-align: text-bottom;
margin-right: 0.1em;
} }
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
margin-right: 0.1em; display: block;
margin-left: 0.1em; margin: 0.2em 0.2em 0 0.2em;
padding: 0.2em 0.2em 0 0.2em;
white-space: nowrap;
} }
/* disbaled tabs */ /* disabled tabs */
span.tab { span.tab {
color: #666666; color: #666666;
} }
@@ -147,36 +165,38 @@ a.tabcaution:hover {
<?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?> <?php if ( $GLOBALS['cfg']['LightTabs'] ) { ?>
/* active tab */ /* active tab */
a.tabactive { a.tabactive {
border-bottom: 0.1em solid black;
color: black; color: black;
} }
<?php } else { ?> <?php } else { ?>
#topmenu { #topmenu {
margin-top: 0.5em; margin-top: 0.5em;
border-bottom: 0.1em solid black;
padding: 0.1em 0.3em 0.1em 0.3em; padding: 0.1em 0.3em 0.1em 0.3em;
} }
ul#topmenu li {
border-bottom: 1pt solid black;
}
/* default tab styles */ /* default tab styles */
.tab, .tabcaution, .tabactive { .tab, .tabcaution, .tabactive {
background-color: #E5E5E5; background-color: <?php echo $GLOBALS['cfg']['BgcolorOne']; ?>;
border: 0.1em solid silver; border: 1pt solid <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
border-bottom: 0.1em solid black; border-bottom: 0;
border-radius-topleft: 0.5em; border-radius-topleft: 0.4em;
border-radius-topright: 0.5em; border-radius-topright: 0.4em;
-moz-border-radius-topleft: 0.5em; -moz-border-radius-topleft: 0.4em;
-moz-border-radius-topright: 0.5em; -moz-border-radius-topright: 0.4em;
padding: 0.1em 0.2em 0.1em 0.2em;
} }
/* enabled hover/active tabs */ /* enabled hover/active tabs */
a.tab:hover, a.tabcaution:hover, .tabactive { a.tab:hover, a.tabcaution:hover, .tabactive, .tabactive:hover {
margin-right: 0; margin: 0;
margin-left: 0; padding: 0.2em 0.4em 0.2em 0.4em;
padding: 0.3em 0.3em 0.1em 0.3em; text-decoration: none;
} }
a.tab:hover, .tabactive { a.tab:hover, .tabactive {
background-color: #CCCCCC; background-color: <?php echo $GLOBALS['cfg']['BgcolorTwo']; ?>;
} }
/* disabled drop/empty tabs */ /* disabled drop/empty tabs */
@@ -186,7 +206,6 @@ span.tab, span.tabcaution {
<?php } ?> <?php } ?>
/* end topmenu */ /* end topmenu */
/* Warning showing div with right border and optional icon */ /* Warning showing div with right border and optional icon */
div.errorhead { div.errorhead {