cleaned up hover menu

git-svn-id: http://code.elgg.org/elgg/trunk@8027 36083f99-b078-4883-b0ff-0f9b5a30f544

6 files changed, 42 insertions, 164 deletions

diff --git a/views/default/css/elements/grid.php b/views/default/css/elements/grid.php
index f7d23a6f0..04c9a46b5 100644
--- a/views/default/css/elements/grid.php
+++ b/views/default/css/elements/grid.php
@@ -5,7 +5,8 @@
  * @package Elgg.Core
  * @subpackage UI
  * 
- * @todo last column needs to be elgg-body style to absorb subpixel rounding discrepancies
+ * To work around subpixel rounding discrepancies, apply .elgg-col-last to
+ * the last column (@todo we need broswer-specific test cases for this).
  */
 ?>
 /* ***************************************
@@ -52,3 +53,18 @@
 .elgg-col-5of6 {
 	width: 83.33%;
 }
+.elgg-col-last {
+	width: auto;
+	float: none;
+	display: table-cell;
+}
+.elgg-col-last:after {
+	clear: both;
+	display: block;
+	visibility: hidden;
+	overflow: hidden;
+	height: 0 !important;
+	line-height: 0;
+	font-size: xx-large;
+	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
+}
\ No newline at end of file
diff --git a/views/default/css/elements/icons.php b/views/default/css/elements/icons.php
index b8e6b20f0..d465d5efd 100644
--- a/views/default/css/elements/icons.php
+++ b/views/default/css/elements/icons.php
@@ -1,6 +1,6 @@
 <?php
 /**
- *
+ * Elgg icons
  */
 
 ?>
@@ -63,6 +63,20 @@
 .elgg-icon-rss {
 	background-position: -249px 1px;
 }
+.elgg-icon-hover-menu {
+	background-position: -150px 0;
+}
+.elgg-icon-hover-menu:hover {
+	background-position: -150px -32px;
+}
+.elgg-user-icon > .elgg-icon-hover-menu {
+	display: none;
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	margin: 0;
+	cursor: pointer;
+}
 
 <?php //@todo prefix with elgg- ?>
 .ajax-loader {
diff --git a/views/default/css/elements/layout_objects.php b/views/default/css/elements/layout_objects.php
index 87608e205..ebb45bbf3 100644
--- a/views/default/css/elements/layout_objects.php
+++ b/views/default/css/elements/layout_objects.php
@@ -162,11 +162,17 @@ table.styled tr:hover {
 	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
 	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
 }
-
-<?php //@todo core.php? ?>
+/* ***************************************
+	OWNER BLOCK
+*************************************** */
 .elgg-owner-block {
 	margin-bottom: 20px;
 }
+.elgg-owner-block-menu li {
+	float: left;
+	width: 50%;
+	font-size: 90%;
+}
 /* ***************************************
 	WIDGETS
 *************************************** */
diff --git a/views/default/css/elements/navigation.php b/views/default/css/elements/navigation.php
index 4ebe5a6f1..730278399 100644
--- a/views/default/css/elements/navigation.php
+++ b/views/default/css/elements/navigation.php
@@ -241,6 +241,7 @@
 .elgg-hover-menu {
 	display: none;
 	position: absolute;
+	z-index: 10000;
 
 	width: 165px;
 	border-top: solid 1px #E5E5E5;
@@ -274,40 +275,6 @@
 	background-color: red;
 }
 
-<?php //@todo needs revamp ?>
-.avatar_menu_button {
-	width:15px;
-	height:15px;
-	position:absolute;
-	cursor:pointer;
-	display:none;
-	right:0;
-	bottom:0;
-}
-.avatar_menu_arrow {
-	background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px top;
-	width:15px;
-	height:15px;
-}
-.avatar_menu_arrow_on {
-	background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px -16px;
-	width:15px;
-	height:15px;
-}
-.avatar_menu_arrow_hover {
-	background: url(<?php echo elgg_get_site_url(); ?>_graphics/elgg_sprites.png) no-repeat -150px -32px;
-	width:15px;
-	height:15px;
-}
-
-/* ***************************************
-	OWNER BLOCK
-*************************************** */
-.elgg-owner-block-menu li {
-	float: left;
-	width: 50%;
-	font-size: 90%;
-}
 /* ***************************************
 	FOOTER
 *************************************** */
diff --git a/views/default/js/elgg.php b/views/default/js/elgg.php
index 1bf7574bd..872a44e52 100644
--- a/views/default/js/elgg.php
+++ b/views/default/js/elgg.php
@@ -131,128 +131,6 @@ this.each(function() {
 };
 
 
-var submenuLayer = 1000;
-
-function setup_avatar_menu(parent) {
-	if (!parent) {
-		parent = document;
-	}
-
-	// avatar image menu link
-	$(parent).find("div.elgg-user-icon img").mouseover(function() {
-		// find nested avatar_menu_button and show
-		$(this.parentNode.parentNode).children(".avatar_menu_button").show();
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
-		//$(this.parentNode.parentNode).css("z-index", submenuLayer);
-	})
-	.mouseout(function() {
-		if($(this).parent().parent().find("div.sub_menu").css('display')!="block") {
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-			$(this.parentNode.parentNode).children(".avatar_menu_button").hide();
-		}
-		else {
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-			$(this.parentNode.parentNode).children(".avatar_menu_button").show();
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
-		}
-	});
-
-
-	// avatar contextual menu
-	$(".avatar_menu_button img").click(function(e) {
-
-		//var submenu = $(this).parent().parent().find("div.sub_menu");
-		var submenu = $(this).parent().parent().find(".elgg-hover-menu");
-
-		// close submenu if arrow is clicked & menu already open
-		if (submenu.css('display') == "block") {
-			//submenu.hide();
-		} else {
-			// get avatar dimensions
-			var avatar = $(this).parent().parent().parent().find("div.elgg-user-icon");
-			//alert( "avatarWidth: " + avatar.width() + ", avatarHeight: " + avatar.height() );
-
-			// move submenu position so it aligns with arrow graphic
-			if (e.pageX < 840) { // popup menu to left of arrow if we're at edge of page
-				submenu.css("top",(avatar.height()) + "px")
-					.css("left",(avatar.width()-15) + "px")
-					.fadeIn('normal');
-			} else {
-				submenu.css("top",(avatar.height()) + "px")
-					.css("left",(avatar.width()-166) + "px")
-					.fadeIn('normal');
-			}
-
-			// force z-index - workaround for IE z-index bug
-			avatar.css("z-index",  submenuLayer);
-			avatar.find("a.icon img").css("z-index",  submenuLayer);
-			submenu.css("z-index", submenuLayer+1);
-
-			submenuLayer++;
-
-			// change arrow to 'on' state
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
-		}
-
-		// hide any other open submenus and reset arrows
-		$("div.sub_menu:visible").not(submenu).hide();
-		$(".avatar_menu_button").removeClass("avatar_menu_arrow");
-		$(".avatar_menu_button").removeClass("avatar_menu_arrow_on");
-		$(".avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-		$(".avatar_menu_button").hide();
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").show();
-		//alert("submenuLayer = " +submenu.css("z-index"));
-	})
-	// hover arrow each time mouseover enters arrow graphic (eg. when menu is already shown)
-	.mouseover(function() {
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_hover");
-	})
-	// if menu not shown revert arrow, else show 'menu open' arrow
-	.mouseout(function() {
-		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
-		}
-		else {
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
-			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
-		}
-	});
-
-	// hide avatar menu if click occurs outside of menu
-	// and hide arrow button
-	$(document).click(function(event) {
-			var target = $(event.target);
-			if (target.parents(".elgg-user-icon").length == 0) {
-				$(".elgg-hover-menu").fadeOut();
-				$(".avatar_menu_button").removeClass("avatar_menu_arrow");
-				$(".avatar_menu_button").removeClass("avatar_menu_arrow_on");
-				$(".avatar_menu_button").removeClass("avatar_menu_arrow_hover");
-				$(".avatar_menu_button").hide();
-			}
-	});
-
-
-}
-
-$(document).ready(function() {
-
-	setup_avatar_menu();
-
-});
-
-
 <?php
 
 $previous_content = elgg_view('js/initialise_elgg');
diff --git a/views/default/profile/hover.php b/views/default/profile/hover.php
index 689d4dc47..e62c8b170 100644
--- a/views/default/profile/hover.php
+++ b/views/default/profile/hover.php
@@ -5,11 +5,8 @@
 
 ?>
 
-<div class="avatar_menu_button">
-	<img src="<?php echo elgg_get_site_url(); ?>_graphics/spacer.gif" width="15" height="15" />
-</div>
+<span class="elgg-icon elgg-icon-hover-menu"></span>
 
 <?php
 
 echo elgg_view_menu('user_hover', $vars);
-