From 5afd385f307759f6e7d5e4460ecf630390ff5d63 Mon Sep 17 00:00:00 2001 From: Crack Date: Sun, 25 Jul 2010 22:10:38 +0200 Subject: [PATCH] create menu for menu tabs which don't fit in one line fix tooltip.js error when not in pma frame --- js/functions.js | 93 ++++++++++++++++++ js/tooltip.js | 5 +- .../darkblue_orange/css/theme_right.css.php | 67 ++++++++++--- themes/darkblue_orange/img/b_more.png | Bin 0 -> 963 bytes themes/original/css/theme_right.css.php | 65 +++++++++--- themes/original/img/b_more.png | Bin 0 -> 1005 bytes 6 files changed, 206 insertions(+), 24 deletions(-) create mode 100644 themes/darkblue_orange/img/b_more.png create mode 100644 themes/original/img/b_more.png diff --git a/js/functions.js b/js/functions.js index b5995f0f5..5ae2b6050 100644 --- a/js/functions.js +++ b/js/functions.js @@ -1735,3 +1735,96 @@ $(document).ready(function(){ } }); +function menuResize() +{ + var cnt = $('#topmenu'); + var wmax = cnt.width() - 5; // 5 px margin for jumping menu in Chrome + var submenu = cnt.find('.submenu'); + var submenu_w = submenu.outerWidth(true); + var submenu_ul = submenu.find('ul'); + var li = $('#topmenu > li'); + var li2 = submenu_ul.find('li'); + var more_shown = li2.length > 0; + var w = more_shown ? submenu_w : 0; + + // hide menu items + var hide_start = 0; + for (var i = 0; i < li.length-1; i++) { // li.length-1: skip .submenu element + var el = $(li[i]); + var el_width = el.outerWidth(true); + el.data('width', el_width); + w += el_width; + if (w > wmax) { + w -= el_width; + if (w + submenu_w < wmax) { + hide_start = i; + } else { + hide_start = i-1; + w -= $(li[i-1]).data('width'); + } + break; + } + } + + if (hide_start > 0) { + for (var i = hide_start; i < li.length-1; i++) { + $(li[i])[more_shown ? 'prependTo' : 'appendTo'](submenu_ul); + } + submenu.show(); + } else if (more_shown) { + w -= submenu_w; + // nothing hidden, maybe something can be restored + for (var i = 0; i < li2.length; i++) { + //console.log(li2[i], submenu_w); + w += $(li2[i]).data('width'); + if (w+submenu_w < wmax ) {//|| (i == li2.length-1 && w < wmax) + $(li2[i]).insertBefore(submenu); + if (i == li2.length-1) { + submenu.hide(); + } + continue; + } + break; + } + } + if (submenu.find('.tabactive').length) { + submenu.addClass('active').find('> a').removeClass('tab').addClass('tabactive'); + } else { + submenu.removeClass('active').find('> a').addClass('tab').removeClass('tabactive'); + } +} + +$(function() { + // create submenu container + var link = $('') + .attr({href: '#', 'class': 'tab'}) + .text('More') + .click(function(e) { + e.preventDefault(); + }); + var img = $('#topmenucontainer li:first-child').find('img'); + if (img.length) { + img = img.clone(); + img.attr('src', img.attr('src').replace(/\/[^\/]+$/, '/b_more.png')).prependTo(link); + } + var submenu = $('
  • ') + .attr('class', 'submenu') + .append(link) + .append($('
      ').append($('#topmenu li.subitem'))) + .mouseenter(function() { + if ($(this).find('ul .tabactive').length == 0) { + $(this).addClass('submenuhover').find('> a').addClass('tabactive'); + } + }) + .mouseleave(function() { + if ($(this).find('ul .tabactive').length == 0) { + $(this).removeClass('submenuhover').find('> a').removeClass('tabactive'); + } + }) + .hide(); + $('#topmenu').append(submenu); + + // populate submenu and register resize event + $(window).resize(menuResize); + menuResize(); +}); diff --git a/js/tooltip.js b/js/tooltip.js index c6661f21a..5bbdd9f8f 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -31,6 +31,9 @@ var myTooltipContainer = null; */ function PMA_TT_init() { + if (!window.parent.getElementsByClassName) { + return; + } // get all 'light bubbles' on page var tooltip_icons = window.parent.getElementsByClassName('footnotemarker', document, 'sup'); var tooltip_count = tooltip_icons.length; @@ -48,7 +51,7 @@ function PMA_TT_init() document.body.appendChild(myTooltipContainer); // capture mouse-events - for (i = 0; i < tooltip_count; i++) { + for (var i = 0; i < tooltip_count; i++) { window.parent.addEvent(tooltip_icons[i], 'mousemove', mouseMove); window.parent.addEvent(tooltip_icons[i], 'mouseover', pmaTooltip); window.parent.addEvent(tooltip_icons[i], 'mouseout', swapTooltip); diff --git a/themes/darkblue_orange/css/theme_right.css.php b/themes/darkblue_orange/css/theme_right.css.php index 09954d425..2059c255c 100644 --- a/themes/darkblue_orange/css/theme_right.css.php +++ b/themes/darkblue_orange/css/theme_right.css.php @@ -626,14 +626,44 @@ ul#topmenu li, ul#topmenu2 li { } /* default tab styles */ -ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive { +ul#topmenu a, ul#topmenu span { display: block; margin: 0.2em 0.2em 0 0.2em; padding: 0.2em 0.2em 0 0.2em; white-space: nowrap; } -ul#topmenu2 .tab, ul#topmenu2 .tabactive { +ul#topmenu ul a { + margin: 0; + padding-bottom: 0.2em; +} + +ul#topmenu .submenu { + position: relative; +} + +ul#topmenu ul { + padding: 0; + margin: 0; + position: absolute; + right: 0; + list-style-type: none; + display: none; + -moz-box-shadow: 2px 2px 3px #666; + -webkit-box-shadow: 2px 2px 3px #666; + box-shadow: 2px 2px 3px #666; + border: 1px #666 solid; +} + +ul#topmenu li:hover ul, ul#topmenu .submenuhover ul { + display: block; +} + +ul#topmenu ul li { + width: 100%; +} + +ul#topmenu2 a { display: block; margin: 0.1em; padding: 0.2em; @@ -676,29 +706,42 @@ ul#topmenu2 { clear: both; } -ul#topmenu li { +ul#topmenu > li { border-bottom: 1pt solid black; } /* default tab styles */ -ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive { - background-color: ; - border: 1pt solid ; - border-bottom: 0; +ul#topmenu a, ul#topmenu span { + background-color: ; + border: 0 solid ; + border-width: 1pt 1pt 0 1pt; -moz-border-radius: 0.4em 0.4em 0 0; border-radius: 0.4em 0.4em 0 0; } +ul#topmenu ul a { + border-width: 1pt 0 0 0; + -moz-border-radius: 0; + border-radius: 0; +} + +ul#topmenu ul li:first-child a { + border-width: 0; +} + /* enabled hover/active tabs */ -ul#topmenu a.tab:hover, -ul#topmenu a.tabcaution:hover, -ul#topmenu .tabactive, -ul#topmenu .tabactive:hover { +ul#topmenu > li > a:hover, +ul#topmenu > li > .tabactive { margin: 0; padding: 0.2em 0.4em 0.2em 0.4em; text-decoration: none; } +ul#topmenu ul a:hover, +ul#topmenu ul .tabactive { + text-decoration: none; +} + ul#topmenu a.tab:hover, ul#topmenu .tabactive { background-color: ; @@ -713,7 +756,7 @@ ul#topmenu2 a.tabactive { } /* to be able to cancel the bottom border, use
    • */ -ul#topmenu li.active { +ul#topmenu > li.active { border-bottom: 1pt solid ; } diff --git a/themes/darkblue_orange/img/b_more.png b/themes/darkblue_orange/img/b_more.png new file mode 100644 index 0000000000000000000000000000000000000000..161e0ff32086bf279c2549a523a52e3371c246fa GIT binary patch literal 963 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFe_w+M3hAM`dB6B=jtVb)aX^@7BGN-jeSKyVsdtB zi9%9pdS;%j()-=}l@u~lY?Z=IeGPmIoKrJ0J*tXQgRA^PlB=?lEmM^2?G$V(tSWK~ za#KqZ6)JLb@`|l0Y?Z*~TICg6frRyy6u?SKvTcwn`Gtf;oFf&jv zGt@IQHZeCh*HJJsFf`CNFw!?P(ls=+T7#d8;`MLTPi3R$GdIlgbLHwFq;OmQDX>KlDb#X~h zD#E>34K5C;EJ)Q4N-fSWElN%eN=;J+xv9X)xhOTUB)=#mKR*W+iUAqRgR+&UtDnm{r-UW|D3L0D literal 0 HcmV?d00001 diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php index 73f57379d..b2a7aa190 100644 --- a/themes/original/css/theme_right.css.php +++ b/themes/original/css/theme_right.css.php @@ -601,14 +601,44 @@ ul#topmenu li, ul#topmenu2 li { } /* default tab styles */ -ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive { +ul#topmenu a, ul#topmenu span { display: block; margin: 0.2em 0.2em 0 0.2em; padding: 0.2em 0.2em 0 0.2em; white-space: nowrap; } -ul#topmenu2 .tab, ul#topmenu2 .tabactive { +ul#topmenu ul a { + margin: 0; + padding-bottom: 0.2em; +} + +ul#topmenu .submenu { + position: relative; +} + +ul#topmenu ul { + margin: 0; + padding: 0; + position: absolute; + right: 0; + list-style-type: none; + display: none; + -moz-box-shadow: 2px 2px 3px #666; + -webkit-box-shadow: 2px 2px 3px #666; + box-shadow: 2px 2px 3px #666; + border: 1px #666 solid; +} + +ul#topmenu li:hover ul, ul#topmenu .submenuhover ul { + display: block; +} + +ul#topmenu ul li { + width: 100%; +} + +ul#topmenu2 a { display: block; margin: 0.1em; padding: 0.2em; @@ -651,29 +681,42 @@ ul#topmenu2 { clear: both; } -ul#topmenu li { +ul#topmenu > li { border-bottom: 1pt solid black; } /* default tab styles */ -ul#topmenu .tab, ul#topmenu .tabcaution, ul#topmenu .tabactive { +ul#topmenu a, ul#topmenu span { background-color: ; - border: 1pt solid ; - border-bottom: 0; + border: 0 solid ; + border-width: 1pt 1pt 0 1pt; -moz-border-radius: 0.4em 0.4em 0 0; border-radius: 0.4em 0.4em 0 0; } +ul#topmenu ul a { + border-width: 1pt 0 0 0; + -moz-border-radius: 0; + border-radius: 0; +} + +ul#topmenu ul li:first-child a { + border-width: 0; +} + /* enabled hover/active tabs */ -ul#topmenu a.tab:hover, -ul#topmenu a.tabcaution:hover, -ul#topmenu .tabactive, -ul#topmenu .tabactive:hover { +ul#topmenu > li > a:hover, +ul#topmenu > li > .tabactive { margin: 0; padding: 0.2em 0.4em 0.2em 0.4em; text-decoration: none; } +ul#topmenu ul a:hover, +ul#topmenu ul .tabactive { + text-decoration: none; +} + ul#topmenu a.tab:hover, ul#topmenu .tabactive { background-color: ; @@ -688,7 +731,7 @@ ul#topmenu2 a.tabactive { } /* to be able to cancel the bottom border, use
    • */ -ul#topmenu li.active { +ul#topmenu > li.active { border-bottom: 1pt solid ; } diff --git a/themes/original/img/b_more.png b/themes/original/img/b_more.png new file mode 100644 index 0000000000000000000000000000000000000000..4a12e8cda897d9fd8418453f3e1920fd1a8e2a24 GIT binary patch literal 1005 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!s7BuiW)N`mv#O3D+9QW+dm z@{>{(JaZG%Q-e|yQz{EjrrIztFe_w+M3hAM`dB6B=jtVb)aX^@7BGN-jeSKyVsdtB zi9%9pdS;%j()-=}l@u~lY?Z=IeGPmIoKrJ0J*tXQgRA^PlB=?lEmM^2?G$V(tSWK~ za#KqZ6)JLb@`|l0Y?Z*~TICg6frRyy6u?SKvTcwn`Gtf;oFf&jv zGt@IQHZeCh*HJJsFf`CNFw!?P(ls=+T7#d8;`MLTPi3R$GdIlgbLHwFq;OmQDX>KlDb#X~h zD#E>34K5C;EJ)Q4N-fSWElN%eN=;J+xv9X)xhOTUB)=#mKR*W+iUAq*DJz&J^Q!H8Mq`t94@ z!O4Y%hCZ@>`UXy-f=eZ{B^Y8G5;;2fh19JCCh{I!F8M|!!i$AX>Dq@w&vKqzIc+g( eil#Y(!U2XQ&B~W%ZWh=K%7C7(elF{r5}E)aFgK