From 08f0014dae8cdbc2fb52eddd914117d7b99e2a3e Mon Sep 17 00:00:00 2001
From: renato <renato@rezo.net>
Date: Tue, 10 Apr 2007 15:00:47 +0000
Subject: [PATCH] the main toolbar is now an unordered list; each submenu is a
 child on its parent menu and it is an unordered list too; it still need to be
 enhanced to work without js

---
 .gitattributes                  |  1 +
 dist/javascript/presentation.js | 37 ++++++++-----
 dist/style_prive.html           | 82 ++++++++++++++++++++++++++--
 dist/style_prive_defaut.css     | 10 ++--
 dist/style_prive_ie.html        | 40 ++++++++++++++
 ecrire/inc/boutons.php          | 96 +++++++++++++++++++--------------
 ecrire/inc/presentation.php     |  6 ++-
 7 files changed, 211 insertions(+), 61 deletions(-)
 create mode 100644 dist/style_prive_ie.html

diff --git a/.gitattributes b/.gitattributes
index 0e8635eb00..4deab57678 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -250,6 +250,7 @@ dist/puce_rtl.gif -text
 dist/spip.png -text
 dist/style_prive.html -text
 dist/style_prive_defaut.css -text
+dist/style_prive_ie.html -text
 dist/vignettes/abw.png -text
 dist/vignettes/ai.png -text
 dist/vignettes/aiff.png -text
diff --git a/dist/javascript/presentation.js b/dist/javascript/presentation.js
index 1c0aee7df2..6fd11423c9 100644
--- a/dist/javascript/presentation.js
+++ b/dist/javascript/presentation.js
@@ -1,24 +1,33 @@
 var bandeau_elements = false;
 
+function decaleSousMenu() {
+  var sousMenu = $("div.bandeau_sec",this).css({visibility:'hidden',display:'block'});
+  if(!sousMenu.length) return;
+  var left;
+  if($.browser.msie) {
+    var version = navigator.appVersion.match(/MSIE ([^;]+)/);
+    version = parseInt(version[1]);
+    left = parseInt(sousMenu[0].parentNode.offsetLeft);
+    if(version>6) {
+      left += parseInt($("#bandeau-principal div")[0].offsetLeft);
+    }
+  } else left = parseInt(sousMenu[0].offsetLeft);
+  if (left > 0) {
+		var demilargeur = Math.floor( sousMenu[0].offsetWidth / 2 );
+		var gauche = left
+			- demilargeur
+			+ Math.floor(largeur_icone / 2);
+		if (gauche < 0) gauche = 0;
+    sousMenu.css("left",gauche+"px");
+	}
+	sousMenu.css({display:'',visibility:''});
+}
+
 function changestyle(id_couche, element, style) {
 
 	// La premiere fois, regler l'emplacement des sous-menus
 	if (!bandeau_elements) {
 		bandeau_elements = $('#haut-page div.bandeau');
-		if (bug_offsetwidth) {
-			$('#bandeau-principal div.bandeau').each(function(){
-				var left = parseInt(this.style.left);
-				if (left > 0) {
-					demilargeur = Math.floor( this.offsetWidth / 2 );
-					if (demilargeur == 0) demilargeur = 100; // bug offsetwidth MSIE, on fixe une valeur arbitraire
-					gauche = left
-						- demilargeur
-						+ Math.floor(largeur_icone / 2);
-					if (gauche < 0) gauche = 0;
-					this.style.left = gauche+"px";
-				}
-			});
-		}
 	}
 
 	// Masquer les elements du bandeau
diff --git a/dist/style_prive.html b/dist/style_prive.html
index cae093dc62..15808f18c9 100644
--- a/dist/style_prive.html
+++ b/dist/style_prive.html
@@ -83,11 +83,82 @@ select.fondl {
 }
 .maj-debut:first-letter { text-transform: uppercase; }
 
+/*style for horizontal list <div class='h-list'><ul ><li><tag class='menu-item'></tag></li></ul></div>*/
+/*for IE item list must be specified in .menu-item*/
+/*possible added classes lefted centered righted vcentered*/  
+
+.h-list {display:table}
+.h-list ul {
+	display:table-row;
+	list-style:none;
+	padding:0;
+	margin:0;
+}
+
+.h-list li {display:table-cell;padding:0;margin:0}
+
+.h-list ul>li .menu-item {width:auto !important}
+
+.vcentered li {vertical-align:middle}
+.lefted {margin:0 auto 0 0;}
+.centered {margin:0 auto;}
+.righted {margin:0 0 0 auto;}
+
+/*style for bandeau-principal*/
+#bandeau-principal {padding-top:5px;border-bottom: 1px solid #000;position:relative;z-index:90;background:#fff}
+#bandeau-principal .h-list .menu-item {margin:0 auto}
+
+#bandeau-principal a .icon_fond {
+	background:##ENV{couleur_claire,edf3fe};
+	height:48px;
+	width:48px;
+	margin:auto;
+}
+#bandeau-principal a.selection .icon_fond {
+	width:48px;
+	margin:auto
+}
+#bandeau-principal a:hover span.icon_fond {
+	background:url(#EVAL{_DIR_IMG_PACK}fond-gris-anim.gif);
+	height:48px;
+	width:48px;
+	margin:auto;
+}
+#bandeau-principal li.boutons_admin:hover .bandeau_sec,
+#bandeau-principal li.boutons_admin.sfhover .bandeau_sec
+ {
+	display:block;
+}
+#bandeau-principal span.icon_fond span {
+	behavior: url(../win_back_png.htc);
+	background:center top no-repeat;
+	height:48px;
+	display:block;
+	width:48px;
+	margin:0
+}
+
+/*style for submenus*/
+.bandeau_sec {
+	margin-top: 0;
+	padding: 2px;
+	padding-top: 0;
+	background-color: #fff;
+	border-bottom: 1px solid #000;
+	border-left: 1px solid #000;
+	border-right: 1px solid #000;
+	-moz-border-radius-bottomleft: 5px;
+	-moz-border-radius-bottomright: 5px;
+	z-index: 100;
+	display:none;
+	position:absolute;
+}
 
 /*
  * Icones et bandeaux
  */
 
+/* Da cancellare
 #bandeau-principal {
 	background-color: #fff;
 	margin: 0;
@@ -95,6 +166,7 @@ select.fondl {
 	border-bottom: 1px solid #000;
 }
 
+
 .bandeau-icones {
 	background-color: #fff;
 	margin: 0;
@@ -102,7 +174,8 @@ select.fondl {
 	padding-bottom: 2px; 
 	padding-top: 4px;
 }
-
+*/
+/*
 .bandeau_sec .gauche {
 	margin-top: 0;
 	padding: 2px;
@@ -115,7 +188,8 @@ select.fondl {
 	-moz-border-radius-bottomright: 5px;
 	z-index: 100;
 }
-
+*/
+/*
 .bandeau-icones.separateur {
 	vertical-align: middle;
 	height: 100%;
@@ -125,6 +199,8 @@ select.fondl {
 	background: url(#EVAL{_DIR_IMG_PACK}wrapper.php?file=tirets-separation.gif);
 	background-position: 5px 0px;
 }
+*/
+
 .bandeau_couleur {
 	padding-right: 4px;
 	padding-left: 4px;
@@ -1490,4 +1566,4 @@ div.rub-ouverte, a.rub-ouverte {
 	border: 0px;
 	height: 10px;
 	width: 10px;
-}
\ No newline at end of file
+}
diff --git a/dist/style_prive_defaut.css b/dist/style_prive_defaut.css
index 834ed8d1ed..47a0039f48 100644
--- a/dist/style_prive_defaut.css
+++ b/dist/style_prive_defaut.css
@@ -6,7 +6,7 @@ body {
 /*
  * Icones et bandeaux
  */
-
+/* Da cenacellare
 #bandeau-principal {
 	background-color: white;
 	margin: 0;
@@ -21,7 +21,8 @@ body {
 	padding-bottom: 2px; 
 	padding-top: 4px;
 }
-
+*/
+/*
 .bandeau_sec .gauche {
 	margin-top: 0;
 	padding: 2px;
@@ -34,7 +35,8 @@ body {
 	-moz-border-radius-bottomright: 5px;
 	z-index: 100;
 }
-
+*/
+/*
 .bandeau-icones .separateur {
 	vertical-align: middle;
 	height: 100%;
@@ -43,6 +45,8 @@ body {
 	margin: 0;
 	background-position: 5px 0px;
 }
+*/
+
 .bandeau_couleur {
 	padding-right: 4px;
 	padding-left: 4px;
diff --git a/dist/style_prive_ie.html b/dist/style_prive_ie.html
new file mode 100644
index 0000000000..bd9b9f7fb3
--- /dev/null
+++ b/dist/style_prive_ie.html
@@ -0,0 +1,40 @@
+[(#REM)
+
+	Ce squelette definit les styles de l'espace prive
+
+	Note: l'entete "Vary:" sert a repousser l'entete par
+	defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
+	genant en cas de "rotation du cookie de session" apres
+	un changement d'IP (effet de clignotement).
+
+	ATTENTION: il faut absolument le charset sinon Firefox croit que
+	c'est du text/html !
+]
+#CACHE{3600*100,cache-client}
+#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
+#HTTP_HEADER{Vary: Accept-Encoding}
+
+/*style for horizontal list <div class='h-list'><ul ><li><tag class='menu-item'></tag></li></ul></div>*/
+/*for IE item list must be specified in .menu-item*/
+/*possible added classes lefted centered righted vcentered*/  
+
+/*clear without markup*/
+.h-list ul {height:1%}
+/*end clear without markup*/
+
+.h-list li {/*display:inline*/float:[(#ENV{ltr}|choixsiegal{left,left,right})]}
+* html .h-list li {margin-right:-2px}
+
+/*style for bandeau-principal*/
+
+ li * {word-wrap:break-word}
+
+#bandeau-principal li.boutons_admin:hover .bandeau_sec,
+#bandeau-principal li.boutons_admin.sfhover .bandeau_sec
+ {
+	display:block;
+}
+
+/*style for submenus*/
+* html .bandeau_sec {float:none;width:100%}
+* html .bandeau_sec ul {}
diff --git a/ecrire/inc/boutons.php b/ecrire/inc/boutons.php
index 03843ca8b0..5db51d48a8 100644
--- a/ecrire/inc/boutons.php
+++ b/ecrire/inc/boutons.php
@@ -333,9 +333,16 @@ function definir_barre_gadgets() {
 function bandeau_principal($rubrique, $sous_rubrique, $largeur)
 {
 	$res = '';
-	foreach($GLOBALS['boutons_admin'] as $page => $detail) {
+	$decal = 0;
+	//cherche les espacement pour determiner leur largeur 
+  $num_espacements = 0;
+  foreach($GLOBALS['boutons_admin'] as $page => $detail) {
+	 if ($page=='espacement') $num_espacements++;
+	}
+	$larg_espacements = ($largeur-(count($GLOBALS['boutons_admin'])-$num_espacements)*_LARGEUR_ICONES_BANDEAU)/$num_espacements;
+  foreach($GLOBALS['boutons_admin'] as $page => $detail) {
 		if ($page=='espacement') {
-			$res .= "<td> &nbsp; </td>";
+			$res .= "<li class='cellule48' style='width:".$larg_espacements."px'><span class='menu-item' style='width:"._LARGEUR_ICONES_BANDEAU."px'>&nbsp</span></li>";
 		} else {
 			if ($detail->url)
 				$lien_noscript = $detail->url;
@@ -348,22 +355,23 @@ function bandeau_principal($rubrique, $sous_rubrique, $largeur)
 				$lien = $lien_noscript;
 
 			$res .= icone_bandeau_principal(
-					_T($detail->libelle),
+					$detail,
 					$lien,
-					$detail->icone,
 					$page,
 					$rubrique,
 					$lien_noscript,
 					$page,
-					$sous_rubrique);
+					$sous_rubrique,
+          $largeur,$decal);
 		}
+		$decal += _LARGEUR_ICONES_BANDEAU;
 	}
 
-	return "<div class='bandeau-icones'>\n<table width='$largeur' cellpadding='0' cellspacing='0' border='0'><tr>\n$res</tr></table></div>\n";
+	return $res;
 }
 
 // http://doc.spip.org/@icone_bandeau_principal
-function icone_bandeau_principal($texte, $lien, $fond, $rubrique_icone = "vide", $rubrique = "", $lien_noscript = "", $sous_rubrique_icone = "", $sous_rubrique = ""){
+function icone_bandeau_principal($detail, $lien, $rubrique_icone = "vide", $rubrique = "", $lien_noscript = "", $sous_rubrique_icone = "", $sous_rubrique = "",$largeur,$decal){
 	global $spip_display, $menu_accesskey, $compteur_survol;
 
 	$alt = '';
@@ -371,8 +379,7 @@ function icone_bandeau_principal($texte, $lien, $fond, $rubrique_icone = "vide",
 	if ($spip_display == 1){
 	}
 	else if ($spip_display == 3){
-		$title = "title=\"$texte\"";
-		$alt = $texte;
+		$title = " title=\"$texte\"";
 	}
 	
 	if (!$menu_accesskey = intval($menu_accesskey)) $menu_accesskey = 1;
@@ -385,7 +392,7 @@ function icone_bandeau_principal($texte, $lien, $fond, $rubrique_icone = "vide",
 		$menu_accesskey++;
 	}
 
-	$class_select = ($sous_rubrique_icone == $sous_rubrique) ? " class='selection'" : '';
+	$class_select = " class='menu-item boutons_admin".($sous_rubrique_icone == $sous_rubrique ? " selection" : "")."'";
 
 	if (strncasecmp("javascript:",$lien,11)==0) {
 		$a_href = "\nonclick=\"$lien; return false;\" href='$lien_noscript' ";
@@ -398,49 +405,52 @@ function icone_bandeau_principal($texte, $lien, $fond, $rubrique_icone = "vide",
 
 	if ($spip_display != 1 AND $spip_display != 4) {
 		$class ='cellule48';
-		$texte = http_img_pack($fond, $alt, "$title width='48' height='48'")
-		. ($spip_display == 3 ? '' :  "<span>$texte</span>");
+		$texte = "<span class='icon_fond'><span".http_style_background($detail->icone)."></span></span>".($spip_display == 3 ? '' :  "<span>"._T($detail->libelle)."</span>");
 	} else {
 		$class = 'cellule-texte';
 	}  
 		
-	return "<td style='width: "
+	return "<li style='width: "
 	. _LARGEUR_ICONES_BANDEAU
-	. "px' class='$class' onmouseover=\"changestyle('bandeau$rubrique_icone');\"><a$accesskey$a_href$class_select>"
-	.  $texte
-	. "</a></td>\n";
+	. "px' class='$class boutons_admin' onmouseover=\"changestyle('bandeau$rubrique_icone');\"><a$accesskey$a_href$class_select$title>"
+	. $texte
+	. "</a>\n"
+	. bandeau_principal2($detail->sousmenu,$rubrique, $sous_rubrique, $largeur, $decal)
+  . "</li>\n";
 }
 
 // http://doc.spip.org/@bandeau_principal2
-function bandeau_principal2($rubrique, $sous_rubrique, $largeur) {
+function bandeau_principal2($sousmenu,$rubrique, $sous_rubrique, $largeur, $decal) {
 	global $spip_lang_left;
 
 	$res = '';
-	$decal=0;
 	$coeff_decalage = 0;
 	if ($GLOBALS['browser_name']=="MSIE") $coeff_decalage = 1.0;
 	$largeur_maxi_menu = $largeur-100;
 	$largitem_moy = 85;
 
-	foreach($GLOBALS['boutons_admin'] as $page => $detail) {
-		if (($rubrique == $page) AND (!_SPIP_AJAX)) {
+    if (($rubrique == $page) AND (!_SPIP_AJAX)) {
 			$class = "visible_au_chargement";
 		} else {
 			$class = "invisible_au_chargement";
 		}
-
-		$sousmenu= $detail->sousmenu;
+    
+    
 		if($sousmenu) {
 			$offset = (int)round($decal-$coeff_decalage*max(0,($decal+count($sousmenu)*$largitem_moy-$largeur_maxi_menu)));
 			if ($offset<0){	$offset = 0; }
 
-			$res .= "<div class='$class bandeau' id='bandeau$page' style='position: absolute; $spip_lang_left: ".$offset."px;'><div class='bandeau_sec'><table class='gauche'><tr>\n";
 			$width=0;
+			$max_width=0;
 			foreach($sousmenu as $souspage => $sousdetail) {
-				if ($width+1.25*$largitem_moy>$largeur_maxi_menu){$res .= "</tr><tr>\n";$width=0;}
+				if ($width+1.25*$largitem_moy>$largeur_maxi_menu){
+          $res .= "</ul><ul><li>\n";
+          if($width>$max_width) $max_width=$width;
+          $width=0;
+        }
 				if($souspage=='espacement') {
 					if ($width>0){
-						$res .= "<td class='separateur'></td>\n";
+						$res .= "<li class='separateur'></li>\n";
 						$largitem = 0;
 					}
 				} else {
@@ -448,12 +458,12 @@ function bandeau_principal2($rubrique, $sous_rubrique, $largeur) {
 				  $res .= $html;
 				}
 				$width+=$largitem+10;
+				if($width>$max_width) $max_width+=$largitem;
 			}
-			$res .= "</tr></table></div></div>";
+			$res .= "</ul></div>\n";
+			$res = "<div class='bandeau_sec h-list' style='width:{$max_width}px;$spip_lang_left:{$offse}px;'><ul>".$res;
 		}
 		
-		$decal += _LARGEUR_ICONES_BANDEAU;
-	}
 	return $res;
 }
 
@@ -464,15 +474,21 @@ function bandeau_double_rangee($rubrique, $sous_rubrique, $largeur)
 	definir_barre_boutons();
 
 	return "<div class='invisible_au_chargement' style='position: absolute; height: 0px; visibility: hidden;'><a href='oo'>"._T("access_mode_texte")."</a></div>"
-	. "<div id='haut-page'>"
-	. "<div id='bandeau-principal' align='center'>\n"
+	. "<div id='haut-page'>\n"
+	. "<div id='bandeau-principal'>\n"
+  . "<div class='h-list centered' style='width:{$largeur}px'><ul>\n"
 	. bandeau_principal($rubrique, $sous_rubrique, $largeur)
-	. "<table width='$largeur' cellpadding='0' cellspacing='0'><tr><td>"
-	. "<div style='text-align: $spip_lang_left; width: ".$largeur."px; position: relative; z-index: 2000;'>"
-	. bandeau_principal2($rubrique, $sous_rubrique, $largeur)
-	. "</div>"
-	. "</td></tr></table>"
-	. "</div>\n"; 
+	. "</ul></div>\n"
+  . "</div>"
+  //script to show the submenus in IE6, not supporting :hover on li elements
+  . "<script type='text/javascript'>\n"
+  . "var boutons_admin = jQuery('#bandeau-principal li.boutons_admin');\n"
+  . "if(jQuery.browser.msie) boutons_admin.hover(\n"
+  . "function(){jQuery(this).addClass('sfhover')},\n"
+  . "function(){jQuery(this).removeClass('sfhover')}\n"
+  . ");\n"
+  . "boutons_admin.one('mouseover',decaleSousMenu);\n"
+  . "</script>\n"; 
 }
 
 
@@ -517,22 +533,22 @@ function icone_bandeau_secondaire($texte, $lien, $fond, $rubrique_icone = "vide"
 	}
 	if ($spip_display == 3) $accesskey_icone = $accesskey;
 
-	$class_select =  ($rubrique_icone != $rubrique) ? '' : " class='selection'";
+	$class_select = "class='menu-item".($rubrique_icone != $rubrique ? "" : " selection")."'";
 	$compteur_survol ++;
 
 	$a_href = "<a$accesskey href=\"$lien\"$class_select>";
 
 	if ($spip_display != 1) {
-		$res = "<td class='cellule36' style='width: ".$largeur."px;'>";
+		$res = "<li class='cellule36' style='width: ".$largeur."px;'>";
 		$res .= $a_href .
 		  http_img_pack("$fond", $alt, "$title");
 		if ($aide AND $spip_display != 3) $res .= aide($aide)." ";
 		if ($spip_display != 3) {
 			$res .= "<span>$texte</span>";
 		}
-		$res .= "</a></td>\n";
+		$res .= "</a></li>\n";
 	}
-	else $res = "<td style='width: $largeur" . "px' class='cellule-texte'>$a_href". $texte . "</a></td>\n";
+	else $res = "<li style='width: $largeur" . "px' class='cellule-texte'>$a_href". $texte . "</a></li>\n";
 
 	return array($res, $largeur);
 }
diff --git a/ecrire/inc/presentation.php b/ecrire/inc/presentation.php
index 3707f275c6..d475493736 100644
--- a/ecrire/inc/presentation.php
+++ b/ecrire/inc/presentation.php
@@ -1284,7 +1284,11 @@ function envoi_link($nom_site_spip) {
 	// CSS espace prive : la vraie
 	. '<link rel="stylesheet" type="text/css" href="'
 	. generer_url_public('style_prive', $args) .'" />' . "\n"
-
+  . "<!-- [if IE lt 8] -->\n"
+  . '<link rel="stylesheet" type="text/css" href="'
+  . generer_url_public('style_prive_ie', $args) .'" />' . "\n"
+  . "<!-- [endif] -->"
+  
 	// CSS calendrier
 	. '<link rel="stylesheet" type="text/css" href="'
 	. find_in_path('agenda.css') .'" />' . "\n"
-- 
GitLab