cleaned up hover menu

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

diff --git a/documentation/css/preview/grid.php b/documentation/css/preview/grid.php
index c59fb83803b63c33ba6424f3cb1b7e5cb1871c3d..193972dd69c152b43fb521b1457b1f0421441734 100644 (file)
--- 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 a7a50abd565a7dbd96c74ccf3b2ae2561bb46af6..a8d44fccbea2e89c35452f818f1ebe19ad4011d8 100644 (file)
--- 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 9a2f892f3faa65e0ea2f3b0f4782a4cc3db9e904..bf918cbf4fe32897eca11ab205e0c3f4c6ad491c 100644 (file)
--- 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 f7d23a6f005ab5605b10b9cccbd0ac26422f24db..04c9a46b5a983b53f257a0d48025afb725fa6637 100644 (file)
--- 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 b8e6b20f052309959892c5af0a634f9895d74254..d465d5efd4505cf1419b7b07a82ac9745f1aa424 100644 (file)
--- 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 87608e2056aba6f02c065b61898118adbe503b6c..ebb45bbf323965c820c0dab08e709bd783156df5 100644 (file)
--- 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 4ebe5a6f1db856057669a5d386296691a1f6573f..7302783997774a0072ed32f5915dc52dd83903c2 100644 (file)
--- 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 1bf7574bd15c690d21bd39ca2cb0d2e68a0d72cf..872a44e52bdea392c7fd11080ecad2802a0709d6 100644 (file)
--- 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 689d4dc474bfcd02a7f53579ee0958ec0d791787..e62c8b170453d192105368b8e3ee1fe6cf65ffcf 100644 (file)
--- 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);
-