From 54b01954f02adbb17df1cf44e2b215ddfb54b587 Mon Sep 17 00:00:00 2001 From: cash Date: Sat, 5 Feb 2011 15:45:43 +0000 Subject: cleaned up hover menu git-svn-id: http://code.elgg.org/elgg/trunk@8027 36083f99-b078-4883-b0ff-0f9b5a30f544 --- views/default/css/elements/grid.php | 18 +++- views/default/css/elements/icons.php | 16 +++- views/default/css/elements/layout_objects.php | 10 ++- views/default/css/elements/navigation.php | 35 +------- views/default/js/elgg.php | 122 -------------------------- views/default/profile/hover.php | 5 +- 6 files changed, 42 insertions(+), 164 deletions(-) (limited to 'views/default') 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 @@ @@ -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; +} .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); } - - +/* *************************************** + 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; } - -.avatar_menu_button { - width:15px; - height:15px; - position:absolute; - cursor:pointer; - display:none; - right:0; - bottom:0; -} -.avatar_menu_arrow { - background: url(_graphics/elgg_sprites.png) no-repeat -150px top; - width:15px; - height:15px; -} -.avatar_menu_arrow_on { - background: url(_graphics/elgg_sprites.png) no-repeat -150px -16px; - width:15px; - height:15px; -} -.avatar_menu_arrow_hover { - background: 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(); - -}); - - -
- -
+