diff options
-rw-r--r-- | mod/file/views/default/file/css.php | 2 | ||||
-rw-r--r-- | mod/groups/views/default/groups/css.php | 2 | ||||
-rw-r--r-- | mod/groups/views/default/groups/icon.php | 2 | ||||
-rw-r--r-- | mod/profile/start.php | 1 | ||||
-rw-r--r-- | mod/profile/views/default/profile/css.php | 138 | ||||
-rw-r--r-- | mod/profile/views/default/profile/javascript.php | 8 | ||||
-rw-r--r-- | mod/tabbed_profile/start.php | 1 | ||||
-rw-r--r-- | mod/tabbed_profile/views/default/profile/css.php | 30 | ||||
-rw-r--r-- | mod/tabbed_profile/views/default/profile/javascript.php | 8 | ||||
-rw-r--r-- | views/default/css/screen.php | 142 | ||||
-rw-r--r-- | views/default/js/elgg.php | 124 | ||||
-rw-r--r-- | views/default/profile/icon.php | 2 |
12 files changed, 292 insertions, 168 deletions
diff --git a/mod/file/views/default/file/css.php b/mod/file/views/default/file/css.php index 7fff98c97..8f4d1c6a6 100644 --- 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 534cb3a91..ffe500b2f 100644 --- 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 a9e4247c0..993fb54e5 100644 --- 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 2f817b644..017f91378 100644 --- 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 3ad8d7a29..9de6d0a0b 100644 --- a/mod/profile/views/default/profile/css.php +++ b/mod/profile/views/default/profile/css.php @@ -47,49 +47,6 @@ } /* *************************************** - 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 *************************************** */ #profile_sidebar #owner_block { @@ -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 96b57fb95..b0dbc79ee 100644 --- 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 08b2ed5bd..59771ab30 100644 --- 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 45c67b6b2..2b4ef11a3 100644 --- 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 96b57fb95..b0dbc79ee 100644 --- 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 6444a4429..8f8070f77 100644 --- 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 fdf9aa858..082122b5d 100644 --- 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 8021157b1..5685c0a73 100644 --- 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, |