using elgg-user-icon instead of usericon and moving the css into core

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

diff --git a/mod/file/views/default/file/css.php b/mod/file/views/default/file/css.php
index 7fff98c97c12c0cbbeec6f2799b93a98f6b1c0b1..8f4d1c6a6348c581e6b06722e07a659a03752b7b 100644 (file)
--- a/mod/file/views/default/file/css.php
+++ b/mod/file/views/default/file/css.php
@@ -26,7 +26,7 @@
 .filerepo_owner_details small {
        color:#666666;
 }
-.filerepo_owner .usericon {
+.filerepo_owner .elgg-user-icon {
        margin: 3px 5px 5px 0;
        float: left;
 }

diff --git a/mod/groups/views/default/groups/css.php b/mod/groups/views/default/groups/css.php
index 534cb3a91d2768c8773341a9ba094b0076fc8a2e..ffe500b2f5bb2658f49e8b5d1fdecc0079649765 100644 (file)
--- a/mod/groups/views/default/groups/css.php
+++ b/mod/groups/views/default/groups/css.php
@@ -48,7 +48,7 @@
 .featured_group {
        margin-bottom:15px;
 }
-.featured_group .usericon {
+.featured_group .elgg-user-icon {
        float:left;
        margin-right:10px;
 }

diff --git a/mod/groups/views/default/groups/icon.php b/mod/groups/views/default/groups/icon.php
index a9e4247c04918ba20c889ca8790a229eec0d92e3..993fb54e5059d91319af5dc856d3a03ea32bb3a0 100644 (file)
--- a/mod/groups/views/default/groups/icon.php
+++ b/mod/groups/views/default/groups/icon.php
@@ -33,7 +33,7 @@
        
 ?>
 
-<div class="usericon">
+<div class="elgg-user-icon">
 <a href="<?php echo $vars['entity']->getURL(); ?>" class="icon" ><img src="<?php echo $vars['entity']->getIcon($vars['size']); ?>" border="0" <?php echo $align; ?> title="<?php echo $name; ?>" <?php echo $vars['js']; ?> /></a>
 </div>
 

diff --git a/mod/profile/start.php b/mod/profile/start.php
index 2f817b6445b82e82da3942c8bfde5565b2637c72..017f91378ff214c070e09cde95545aa0baa75434 100644 (file)
--- a/mod/profile/start.php
+++ b/mod/profile/start.php
@@ -33,7 +33,6 @@ function profile_init() {
 
        elgg_extend_view('html_head/extend', 'profile/metatags');
        elgg_extend_view('css/screen', 'profile/css');
-       elgg_extend_view('js/elgg', 'profile/javascript');
 
        // Register actions
        elgg_register_action("profile/addcomment", $CONFIG->pluginspath . "profile/actions/addcomment.php");

diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index 3ad8d7a29a6e122710443584d4cc25f3720eb507..9de6d0a0b6a0a4a1be682421500bb8fd0876ecda 100644 (file)
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -46,49 +46,6 @@
        margin-left:260px;
 }
 
-/* ***************************************
-       default avatar icons
-*************************************** */
-.usericon {
-       position:relative;
-}
-.usericon.tiny,
-img.tiny {
-       width:25px;
-       height:25px;
-       /* remove the border-radius if you don't want rounded avatars in supported browsers */
-       -webkit-border-radius: 3px; 
-       -moz-border-radius: 3px;
-       -moz-background-clip:  border;
-       
-       -o-background-size: 25px;
-       -webkit-background-size: 25px;
-       -khtml-background-size: 25px;
-       -moz-background-size: 25px;
-}
-.usericon.small,
-img.small {
-       width:40px;
-       height:40px;
-       /* remove the border-radius if you don't want rounded avatars in supported browsers */
-       -webkit-border-radius: 5px; 
-       -moz-border-radius: 5px;
-       -moz-background-clip:  border;
-       
-       -o-background-size: 40px;
-       -webkit-background-size: 40px;
-       -khtml-background-size: 40px;
-       -moz-background-size: 40px;
-}
-img.large {
-       width:200px;
-       height:200px;
-}
-img.medium {
-       width:100px;
-       height:100px;
-}
-
 /* ***************************************
        ownerblock in sidebar
 *************************************** */
@@ -371,98 +328,3 @@ p.visit_twitter a {
 }
 
 
-/* ***************************************
-       avatar drop-down menu
-*************************************** */
-.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;
-}
-/* user avatar submenu options */
-.usericon .sub_menu { 
-       display:none; 
-       position:absolute; 
-       padding:0; 
-       margin:0; 
-       border-top:solid 1px #E5E5E5; 
-       border-left:solid 1px #E5E5E5; 
-       border-right:solid 1px #999999; 
-       border-bottom:solid 1px #999999;  
-       width:164px; 
-       background:#FFFFFF; 
-       text-align:left;
-       -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
-       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
-       font-size:14px;
-}
-div.usericon a.icon img {
-       z-index:10;
-}
-.usericon .sub_menu a:link, 
-.usericon .sub_menu a:visited, 
-.usericon .sub_menu a:hover { 
-       display:block;
-       font-weight: normal;
-}      
-.usericon .sub_menu a:hover {
-       background:#cccccc;
-       text-decoration:none;
-}
-.usericon .sub_menu .displayname {
-       padding:0 !important;
-       margin:0 !important;
-       border-bottom:solid 1px #dddddd !important;
-       font-size:14px !important;
-}
-.usericon .sub_menu .displayname a {
-       padding:3px 3px 3px 8px;
-       font-size:14px;
-       font-weight: bold;
-}
-.usericon .sub_menu .displayname a .username {
-       display:block;
-       font-weight: normal;
-       font-size:12px;
-       text-align: left;
-       margin:0;
-}
-.sub_menu ul.sub_menu_list {
-       list-style: none;
-       margin-bottom:0;
-       padding-left:0;
-}
-.usericon .sub_menu a {
-       padding:2px 3px 2px 8px;
-       font-size:12px;
-}
-/* admin menu options in avatar submenu */
-.user_menu_admin {
-       border-top:solid 1px #dddddd;
-}
-.usericon .sub_menu li.user_menu_admin a {
-       color:red;
-}
-.usericon .sub_menu li.user_menu_admin a:hover {
-       color:white;
-       background:red;
-}

diff --git a/mod/profile/views/default/profile/javascript.php b/mod/profile/views/default/profile/javascript.php
index 96b57fb953d9a3e2922d549d5250d3389780a180..b0dbc79ee8f4ee0378f2a5cc404082d7f3b4f720 100644 (file)
--- a/mod/profile/views/default/profile/javascript.php
+++ b/mod/profile/views/default/profile/javascript.php
@@ -22,7 +22,7 @@ function setup_avatar_menu(parent) {
        }
 
        // avatar image menu link
-       $(parent).find("div.usericon img").mouseover(function() {
+       $(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");
@@ -56,7 +56,7 @@ function setup_avatar_menu(parent) {
                }
                else {
                        // get avatar dimensions
-                       var avatar = $(this).parent().parent().parent().find("div.usericon");
+                       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
@@ -118,8 +118,8 @@ function setup_avatar_menu(parent) {
        // and hide arrow button
        $(document).click(function(event) {
                        var target = $(event.target);
-                       if (target.parents(".usericon").length == 0) {
-                               $(".usericon div.sub_menu").fadeOut();
+                       if (target.parents(".elgg-user-icon").length == 0) {
+                               $(".elgg-user-icon div.sub_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");

diff --git a/mod/tabbed_profile/start.php b/mod/tabbed_profile/start.php
index 08b2ed5bd3cc1df529cf0b700b11e050d8e82d3f..59771ab3092d75732a330eb763ef212a5b0b6267 100644 (file)
--- a/mod/tabbed_profile/start.php
+++ b/mod/tabbed_profile/start.php
@@ -33,7 +33,6 @@ function profile_init() {
 
        elgg_extend_view('html_head/extend', 'profile/metatags');
        elgg_extend_view('css/screen', 'profile/css');
-       elgg_extend_view('js/elgg', 'profile/javascript');
 
        // Register actions
        elgg_register_action("profile/addcomment", $CONFIG->pluginspath . "tabbed_profile/actions/addcomment.php");

diff --git a/mod/tabbed_profile/views/default/profile/css.php b/mod/tabbed_profile/views/default/profile/css.php
index 45c67b6b29ba6a36ed691b8ed5d158481a146fdd..2b4ef11a33a435f8ffa745c8d29ba755629e097c 100644 (file)
--- a/mod/tabbed_profile/views/default/profile/css.php
+++ b/mod/tabbed_profile/views/default/profile/css.php
@@ -39,10 +39,10 @@
 /* ***************************************
        default avatar icons
 *************************************** */
-.usericon {
+.elgg-user-icon {
        position:relative;
 }
-.usericon.tiny,
+.elgg-user-icon.tiny,
 img.tiny {
        width:25px;
        height:25px;
@@ -56,7 +56,7 @@ img.tiny {
        -khtml-background-size: 25px;
        -moz-background-size: 25px;
 }
-.usericon.small,
+.elgg-user-icon.small,
 img.small {
        width:40px;
        height:40px;
@@ -389,7 +389,7 @@ p.visit_twitter a {
        height:15px;
 }
 /* user avatar submenu options */
-.usericon .sub_menu { 
+.elgg-user-icon .sub_menu { 
        display:none; 
        position:absolute; 
        padding:0; 
@@ -405,31 +405,31 @@ p.visit_twitter a {
        -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
        font-size:14px;
 }
-div.usericon a.icon img {
+div.elgg-user-icon a.icon img {
        z-index:10;
 }
-.usericon .sub_menu a:link, 
-.usericon .sub_menu a:visited, 
-.usericon .sub_menu a:hover { 
+.elgg-user-icon .sub_menu a:link, 
+.elgg-user-icon .sub_menu a:visited, 
+.elgg-user-icon .sub_menu a:hover { 
        display:block;
        font-weight: normal;
 }      
-.usericon .sub_menu a:hover {
+.elgg-user-icon .sub_menu a:hover {
        background:#cccccc;
        text-decoration:none;
 }
-.usericon .sub_menu .displayname {
+.elgg-user-icon .sub_menu .displayname {
        padding:0 !important;
        margin:0 !important;
        border-bottom:solid 1px #dddddd !important;
        font-size:14px !important;
 }
-.usericon .sub_menu .displayname a {
+.elgg-user-icon .sub_menu .displayname a {
        padding:3px 3px 3px 8px;
        font-size:14px;
        font-weight: bold;
 }
-.usericon .sub_menu .displayname a .username {
+.elgg-user-icon .sub_menu .displayname a .username {
        display:block;
        font-weight: normal;
        font-size:12px;
@@ -441,7 +441,7 @@ div.usericon a.icon img {
        margin-bottom:0;
        padding-left:0;
 }
-.usericon .sub_menu a {
+.elgg-user-icon .sub_menu a {
        padding:2px 3px 2px 8px;
        font-size:12px;
 }
@@ -449,10 +449,10 @@ div.usericon a.icon img {
 .user_menu_admin {
        border-top:solid 1px #dddddd;
 }
-.usericon .sub_menu li.user_menu_admin a {
+.elgg-user-icon .sub_menu li.user_menu_admin a {
        color:red;
 }
-.usericon .sub_menu li.user_menu_admin a:hover {
+.elgg-user-icon .sub_menu li.user_menu_admin a:hover {
        color:white;
        background:red;
 }

diff --git a/mod/tabbed_profile/views/default/profile/javascript.php b/mod/tabbed_profile/views/default/profile/javascript.php
index 96b57fb953d9a3e2922d549d5250d3389780a180..b0dbc79ee8f4ee0378f2a5cc404082d7f3b4f720 100644 (file)
--- a/mod/tabbed_profile/views/default/profile/javascript.php
+++ b/mod/tabbed_profile/views/default/profile/javascript.php
@@ -22,7 +22,7 @@ function setup_avatar_menu(parent) {
        }
 
        // avatar image menu link
-       $(parent).find("div.usericon img").mouseover(function() {
+       $(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");
@@ -56,7 +56,7 @@ function setup_avatar_menu(parent) {
                }
                else {
                        // get avatar dimensions
-                       var avatar = $(this).parent().parent().parent().find("div.usericon");
+                       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
@@ -118,8 +118,8 @@ function setup_avatar_menu(parent) {
        // and hide arrow button
        $(document).click(function(event) {
                        var target = $(event.target);
-                       if (target.parents(".usericon").length == 0) {
-                               $(".usericon div.sub_menu").fadeOut();
+                       if (target.parents(".elgg-user-icon").length == 0) {
+                               $(".elgg-user-icon div.sub_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");

diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index 6444a44290d78aa8fa54d43da5edd6e73538f86c..8f8070f77de2c0ef718b3bbb2708418e273742b1 100644 (file)
--- a/views/default/css/screen.php
+++ b/views/default/css/screen.php
@@ -282,7 +282,7 @@ a.widget-edit-button:hover, a.widget-delete-button:hover {
        margin: 8px 0 5px 0;
        padding-left: 5px;
 }
-.elgg-river-content .usericon {
+.elgg-river-content .elgg-user-icon {
        float: left;
 }
 .elgg-river-layout .input-pulldown {
@@ -850,6 +850,146 @@ p.elgg-likes-owner {
        border: 2px solid #dedede;
 }
 
+/* ***************************************
+       default avatar icons
+*************************************** */
+.elgg-user-icon {
+       position:relative;
+}
+.elgg-user-icon.tiny,
+img.tiny {
+       width:25px;
+       height:25px;
+       /* remove the border-radius if you don't want rounded avatars in supported browsers */
+       -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+       -moz-background-clip:  border;
+
+       -o-background-size: 25px;
+       -webkit-background-size: 25px;
+       -khtml-background-size: 25px;
+       -moz-background-size: 25px;
+}
+.elgg-user-icon.small,
+img.small {
+       width:40px;
+       height:40px;
+       /* remove the border-radius if you don't want rounded avatars in supported browsers */
+       -webkit-border-radius: 5px;
+       -moz-border-radius: 5px;
+       -moz-background-clip:  border;
+
+       -o-background-size: 40px;
+       -webkit-background-size: 40px;
+       -khtml-background-size: 40px;
+       -moz-background-size: 40px;
+}
+img.large {
+       width:200px;
+       height:200px;
+}
+img.medium {
+       width:100px;
+       height:100px;
+}
+
+/* ***************************************
+       avatar drop-down menu
+*************************************** */
+.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;
+}
+/* user avatar submenu options */
+.elgg-user-icon .sub_menu {
+       display:none;
+       position:absolute;
+       padding:0;
+       margin:0;
+       border-top:solid 1px #E5E5E5;
+       border-left:solid 1px #E5E5E5;
+       border-right:solid 1px #999999;
+       border-bottom:solid 1px #999999;
+       width:164px;
+       background:#FFFFFF;
+       text-align:left;
+       -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
+       -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
+       font-size:14px;
+}
+div.elgg-user-icon a.icon img {
+       z-index:10;
+}
+.elgg-user-icon .sub_menu a:link,
+.elgg-user-icon .sub_menu a:visited,
+.elgg-user-icon .sub_menu a:hover {
+       display:block;
+       font-weight: normal;
+}
+.elgg-user-icon .sub_menu a:hover {
+       background:#cccccc;
+       text-decoration:none;
+}
+.elgg-user-icon .sub_menu .displayname {
+       padding:0 !important;
+       margin:0 !important;
+       border-bottom:solid 1px #dddddd !important;
+       font-size:14px !important;
+}
+.elgg-user-icon .sub_menu .displayname a {
+       padding:3px 3px 3px 8px;
+       font-size:14px;
+       font-weight: bold;
+}
+.elgg-user-icon .sub_menu .displayname a .username {
+       display:block;
+       font-weight: normal;
+       font-size:12px;
+       text-align: left;
+       margin:0;
+}
+.sub_menu ul.sub_menu_list {
+       list-style: none;
+       margin-bottom:0;
+       padding-left:0;
+}
+.elgg-user-icon .sub_menu a {
+       padding:2px 3px 2px 8px;
+       font-size:12px;
+}
+/* admin menu options in avatar submenu */
+.user_menu_admin {
+       border-top:solid 1px #dddddd;
+}
+.elgg-user-icon .sub_menu li.user_menu_admin a {
+       color:red;
+}
+.elgg-user-icon .sub_menu li.user_menu_admin a:hover {
+       color:white;
+       background:red;
+}
+
+
 
 <?php
 

diff --git a/views/default/js/elgg.php b/views/default/js/elgg.php
index fdf9aa8586d5c24b02d0ac4cb6119a2d53461f9c..082122b5d69f798afcd2a7f54d32ec2780786b65 100644 (file)
--- a/views/default/js/elgg.php
+++ b/views/default/js/elgg.php
@@ -323,6 +323,130 @@ 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");
+
+               // 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-user-icon div.sub_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/icon.php b/views/default/profile/icon.php
index 8021157b157ff2cc9c343e158a0b452715a4df41..5685c0a73c096a9a8448b255be9f3ed5b2f6faa4 100644 (file)
--- a/views/default/profile/icon.php
+++ b/views/default/profile/icon.php
@@ -49,7 +49,7 @@ if ($override) {
 }
 
 ?>     
-<div class="usericon <?php echo $size; ?>">
+<div class="elgg-user-icon <?php echo $size; ?>">
 <?php
 $params = array(
        'entity' => $user,