cleaned up hover menu

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

9 files changed, 94 insertions, 165 deletions

diff --git a/documentation/css/preview/grid.php b/documentation/css/preview/grid.php
index c59fb8380..193972dd6 100644
--- a/documentation/css/preview/grid.php
+++ b/documentation/css/preview/grid.php
@@ -71,7 +71,7 @@ h3 {text-align: center;}
 		</div>
 	</div>
 </div>
-<div class="elgg-col elgg-col-1of5">
+<div class="elgg-col elgg-col-1of5 elgg-col-last">
 	<div class="preview-outline">
 		<h3>1/5</h3>
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
diff --git a/documentation/css/preview/icons.php b/documentation/css/preview/icons.php
index a7a50abd5..a8d44fccb 100644
--- a/documentation/css/preview/icons.php
+++ b/documentation/css/preview/icons.php
@@ -22,6 +22,7 @@ require dirname(__FILE__) . '/head.php';
 			<li><span class="elgg-icon elgg-icon-following"></span>Following</li>
 			<li><span class="elgg-icon elgg-icon-rss"></span>RSS</li>
 			<li><span class="elgg-icon elgg-icon-arrow-s"></span>Arrow S</li>
+			<li><span class="elgg-icon elgg-icon-hover-menu"></span>Hover Menu</li>
 		</ul>
 	</div>
 </body>
diff --git a/js/lib/ui.js b/js/lib/ui.js
index 9a2f892f3..bf918cbf4 100644
--- a/js/lib/ui.js
+++ b/js/lib/ui.js
@@ -1,6 +1,9 @@
 elgg.provide('elgg.ui');
 
 elgg.ui.init = function () {
+
+	elgg.ui.initHoverMenu();
+	
 	//if the user clicks a system message, make it disappear
 	$('.elgg-system-messages li').live('click', function() {
 		$(this).stop().fadeOut('fast');
@@ -79,4 +82,51 @@ elgg.ui.toggleLikes = function(event) {
 	event.preventDefault();
 }
 
+/**
+ * Initialize the hover menu
+ *
+ * @param {Object} parent
+ * @return void
+ */
+elgg.ui.initHoverMenu = function(parent) {
+	if (!parent) {
+		parent = document;
+	}
+
+	// avatar image menu link
+	$(parent).find(".elgg-user-icon").mouseover(function() {
+		$(this).children(".elgg-icon-hover-menu").show();
+	})
+	.mouseout(function() {
+		$(this).children(".elgg-icon-hover-menu").hide();
+	});
+
+
+	// avatar contextual menu
+	$(".elgg-user-icon > .elgg-icon-hover-menu").click(function(e) {
+
+		var $hovermenu = $(this).parent().find(".elgg-hover-menu");
+
+		// close hovermenu if arrow is clicked & menu already open
+		if ($hovermenu.css('display') == "block") {
+			$hovermenu.fadeOut();
+		} else {
+			$avatar = $(this).closest(".elgg-user-icon");
+			$hovermenu.css("top", ($avatar.height()) + "px")
+					.css("left", ($avatar.width()-15) + "px")
+					.fadeIn('normal');
+		}
+
+		// hide any other open hover menus
+		$(".elgg-hover-menu:visible").not($hovermenu).fadeOut();
+	});
+
+	// hide avatar menu when user clicks elsewhere
+	$(document).click(function(event) {
+		if ($(event.target).parents(".elgg-user-icon").length == 0) {
+			$(".elgg-hover-menu").fadeOut();
+		}
+	});
+}
+
 elgg.register_event_handler('init', 'system', elgg.ui.init);
\ No newline at end of file
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);
-