Added a popup list of users for Likes.

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

3 files changed, 59 insertions, 92 deletions

diff --git a/views/default/css.php b/views/default/css.php
index 70cc7ab4d..e2b846886 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -10,7 +10,6 @@
 	PAGE LAYOUT					main page content blocks: header, sidebar, footer...
 	GENERIC SELECTORS			reusable generic classes
 	ELGG TOPBAR					elgg topbar
-	[ TOOLS MENU					drop-down tools menu in topbar ]
 	HEADER CONTENTS
 	ELGG SITE NAVIGATION		Primary site navigation in header
 	FOOTER CONTENTS
@@ -26,6 +25,7 @@
 	USER SETTINGS & ADMIN AREA	styles for user settings and default admin area
 	GENERAL FORM ELEMENTS		default styles for all elgg input/form elements
 	FRIENDS PICKER
+	LIKES
 	ADMIN AREA
 
 
@@ -408,91 +408,6 @@ h2 {
 
 
 /* ***************************************
-	TOOLS MENU
-*************************************** */
-/*
-#elgg_topbar_contents ul.tools_menu,
-#elgg_topbar_contents ul.tools_menu ul {
-	margin:0;
-	padding:0;
-	display:inline;
-	float:left;
-	list-style-type: none;
-	z-index: 9000;
-	position: relative;
-}
-#elgg_topbar_contents ul.tools_menu {
-	margin:0 20px 0 5px;
-}
-#elgg_topbar_contents li.menu a.tools {
-	background:transparent url(<?php echo $vars['url']; ?>_graphics/topbar_icons.png) no-repeat 3px 1px;
-	padding-left:24px !important;
-}
-#elgg_topbar_contents ul.tools_menu li {
-	display: block;
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	float: left;
-	position: relative;
-}
-#elgg_topbar_contents ul.tools_menu a {
-	display:block;
-}
-#elgg_topbar_contents ul.tools_menu ul {
-	display: none;
-	position: absolute;
-	left: 0;
-	margin: 0;
-	padding: 0;
-}
-#elgg_topbar_contents ul.tools_menu ul li {
-	float: none;
-}
-*/
-/* elgg toolbar drop-down menu style */
-/*
-#elgg_topbar_contents ul.tools_menu ul {
-	width: 150px;
-	top: 24px;
-	overflow: hidden;
-	border-top:1px solid black;
-}
-#elgg_topbar_contents ul.tools_menu *:hover {
-	background-color: none;
-}
-#elgg_topbar_contents ul.tools_menu a {
-	padding:2px 7px 4px 7px;
-	text-decoration:none;
-	color:white;
-	overflow-y: hidden;
-}
-#elgg_topbar_contents ul.tools_menu li.hover a {
-	background-color: #333333;
-	text-decoration: none;
-}
-#elgg_topbar_contents ul.tools_menu ul li a {
-	background-color: #333333; 
-	font-weight: bold;
-	padding-left:6px;
-	padding-top:4px;
-	padding-bottom:0;
-	height:22px;
-	width:150px;
-	display: block;
-	border-bottom: 1px solid white;
-}
-#elgg_topbar_contents ul.tools_menu ul a.hover {
-	background-color: #0054a7;
-}
-#elgg_topbar_contents ul.tools_menu ul a {
-	opacity: 0.9;
-}
-*/
-
-
-
-/* ***************************************
 	HEADER CONTENTS
 *************************************** */
 #elgg_header_contents h1 a {
@@ -1530,6 +1445,44 @@ a.action_button:focus {
 
 
 /* ***************************************
+	LIKES
+*************************************** */
+.likes_list_holder {
+    position: relative;
+    float:right;
+}
+.likes_list_holder .likes_list {
+	background-color: white;
+	border:1px solid #cccccc;
+    width: 345px;
+    height: auto;
+    position: absolute;
+    text-align: left;
+    z-index: 9999;
+    -webkit-border-radius: 6px; 
+    -moz-border-radius: 6px;
+	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
+}
+.likes_list_holder .elgg_likes_user {
+	border-bottom:1px solid #cccccc;
+	padding:3px;
+}
+.likes_list_holder .elgg_likes_user .entity_listing_info {
+	width:305px;
+}
+.elgg_likes_user .entity_listing_icon {
+	margin:3px 0 4px 2px;
+}
+.elgg_likes_user .entity_metadata {
+	margin-top:3px;
+}
+p.elgg_likes_owner {
+	padding-top:4px;
+}
+
+
+/* ***************************************
 	ADMIN AREA
 	@todo - replace with standalone admin area
 *************************************** */
diff --git a/views/default/js/initialise_elgg.php b/views/default/js/initialise_elgg.php
index c7dbed4aa..4679f551c 100644
--- a/views/default/js/initialise_elgg.php
+++ b/views/default/js/initialise_elgg.php
@@ -53,8 +53,17 @@ $(document).ready(function () {
 		hoverClass: 'droppable-hover'
 	});
 
-	$('.likes_list_button').click(function() {
-		$(this).next('.likes_list').toggle();
+	// user likes
+	$(".likes_list_button").click(function(event) {	
+		if ($(this).next(".likes_list").css('display') == 'none') {	// show list
+			var topPosition = -$('.likes_list').height();
+			$('.likes_list').css('top',topPosition + 10);
+			$('.likes_list').css('left', -$('.likes_list').width()+40);
+			$(this).next(".likes_list").animate({opacity: "toggle", top: topPosition}, 500);
+		} else { // hide list
+			var topPosition = -$('.likes_list').height() + 5;
+			$(this).next(".likes_list").animate({opacity: "toggle", top: topPosition}, 500);
+		}
 	});
 
 }); /* end document ready function */
diff --git a/views/default/likes/forms/edit.php b/views/default/likes/forms/edit.php
index be019d749..329479435 100644
--- a/views/default/likes/forms/edit.php
+++ b/views/default/likes/forms/edit.php
@@ -25,11 +25,16 @@ if (isset($vars['entity']) && isloggedin()) {
 			$user_string = elgg_echo('likes:userslikedthis');
 		}
 
-		echo "<a class='likes_list_button link'>" . elgg_count_likes($vars['entity']) . " " . $user_string . "</a>";
+		echo "<div class='likes_list_holder'><a class='likes_list_button link'>" . elgg_count_likes($vars['entity']) . " " . $user_string . "</a>";
 
 		//show the users who liked the object
-		echo "<div class='likes_list hidden'>";
+		echo "<div class='likes_list hidden clearfloat'>";
 		echo list_annotations($vars['entity']->getGUID(), 'likes', 99);
-		echo "</div>";	
+		echo "</div></div>";	
 	}
-}
\ No newline at end of file
+}
+
+
+
+
+