Riverdashboard refreshed, and updated display of comments and likes (the loading of these needs to be moved to ajax callbacks)

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

4 files changed, 169 insertions, 162 deletions

diff --git a/mod/riverdashboard/views/default/river/item/wrapper.php b/mod/riverdashboard/views/default/river/item/wrapper.php
index 0dba70e5c..dba6f9953 100644
--- a/mod/riverdashboard/views/default/river/item/wrapper.php
+++ b/mod/riverdashboard/views/default/river/item/wrapper.php
@@ -8,6 +8,8 @@
 $object = get_entity($vars['item']->object_guid);
 //get object url
 $object_url = $object->getURL();
+$numoflikes = elgg_count_likes($object);
+
 //user
 //if displaying on the profile get the object owner, else the subject_guid
 if(get_context() == 'profile' && $object->getSubtype() ==  'thewire')
@@ -29,7 +31,7 @@ switch($vars['item']->subtype){
 //count comment annotations
 $comment_count = count_annotations($vars['item']->object_guid, $vars['item']->type, $vars['item']->subtype, $annotation_comment);
 
-//get last two comments display
+//get last three comments display
 $get_comments = get_annotations($vars['item']->object_guid, "", "", $annotation_comment, "", "", 3, 0, "desc");
 
 if($get_comments){
@@ -37,7 +39,7 @@ if($get_comments){
 	$get_comments = array_reverse($get_comments);	
 }
 
-//minus two off the comment total as we display two by default
+//minus 3 off the comment total as we display 3 by default
 if($comment_count < 3)
 	$num_comments = 0;
 else
@@ -48,32 +50,40 @@ else
 		<?php echo elgg_view("profile/icon",array('entity' => $user, 'size' => 'small')); ?>
 	</span>
 	<div class="river_item_contents clearfloat">
-		<!-- body contents, generated by the river view in each plugin -->
-		<?php echo $vars['body']; ?>
-	</div>
+	<?php 
+		// body contents, generated by the river view in each plugin
+		echo $vars['body'];	
 	
-<!-- display comments and likes -->
-<?php
-	//likes
-	echo "<div class='river_comments'>";
-	echo "<div class='river_comment latest clearfloat'>";
-	echo elgg_view_likes($object);
-	echo "</div></div>";
-	//display latest 2 comments if there are any
+	//display latest 3 comments if there are any
 	if($get_comments){
 		$counter = 0;
-		$background = "";
-		echo "<div class='river_comments'>";
+		//$background = "";
 			
-		//display the number of comments if there are any
-		if($num_comments != 0){
-			//set the correct context comment or comments
-			if($num_comments == 1)
-				echo "<a class='river_more_comments' href=\"{$object_url}\">+{$num_comments} more comment</a>";
-			else
-				echo "<a class='river_more_comments' href=\"{$object_url}\">+{$num_comments} more comments</a>";
+		echo "<div class='river_comments_tabs clearfloat'>";
+		
+		if($comment_count <= 3) {
+			echo "<a class='river_more_comments show_comments_button link'>Comments</a>";
+		}	
+		
+		//display 'more comments' if there are any
+		if($num_comments != 0){			
+			echo "<a class='river_more_comments show_comments_button link'>Comments (+{$num_comments} more)</a>";
 		}
-			
+		
+		if($numoflikes != 0){
+			echo elgg_view('likes/forms/display', array('entity' => $object));
+		}
+		echo "</div>"; // close river_comments_tabs
+		
+		echo "<div class='river_comments'>";
+
+		if($numoflikes != 0){
+			//show the users who liked the object
+			echo "<div class='likes_list hidden'>";
+			echo list_annotations($object->getGUID(), 'likes', 99);
+			echo "</div>";
+		}
+		
 		foreach($get_comments as $gc){
 			//get the comment owner
 			$comment_owner = get_user($gc->owner_guid);
@@ -92,7 +102,7 @@ else
 			echo "</span>";
 			//truncate comment to 150 characters
 			if(strlen($gc->value) > 150) {
-		        	$gc->value = substr($gc->value, 0, strpos($gc->value, ' ', 150)) . "...";
+		        	$gc->value = substr($gc->value, 0, strpos($gc->value, ' ', 150)) . "&hellip;";
 		    }
 			$contents = strip_tags($gc->value);
 		    echo "<div class='river_comment_contents'>";
@@ -101,20 +111,33 @@ else
 			echo "</div></div>";
 			$counter++;
 		}
+			echo elgg_make_river_comment($object);
+			echo "</div>"; // close river_comments
+	} else {
+		// tab bar nav - for users that liked object
+		echo "<div class='river_comments_tabs clearfloat'>";
+			$numoflikes = elgg_count_likes($object);
+			if($numoflikes != 0){
+				echo elgg_view('likes/forms/display', array('entity' => $object));
+			}	
+		echo "</div>"; // close river_comments_tabs
+		
+		echo "<div class='river_comments'>";
+		
+		if($numoflikes != 0){
+			//show the users who liked the object
+			echo "<div class='likes_list hidden'>";
+			echo list_annotations($object->getGUID(), 'likes', 99);
 			echo "</div>";
 		}
-			//display the comment link
-		if($vars['item']->type != 'user'){
-			//for now don't display the comment link on wire and conversations for now
-			if($vars['item']->subtype != 'thewire' && $vars['item']->subtype != 'conversations' && $vars['item']->subtype != '')
-				//don't display the comment option on group discussions atm
-				if($vars['item']->subtype == 'groupforumtopic'){
-					echo "<a class='comment_link' href=\"{$object_url}\">Visit discussion</a>";
-				}else{
-					echo "<div class='river_post_comment'>";
-					echo elgg_make_river_comment($object);
-					echo "</div>";
-				}
-			}
-		?>
+		
+		// if there are no comments to display
+		// and this is not a user or a group discussion entry - include the inline comment form
+		if($vars['item']->type != 'user' && $vars['item']->subtype != 'groupforumtopic') {
+			echo elgg_make_river_comment($object);
+		}
+		echo "</div>";
+	}
+echo "</div>"; // close river_item_contents
+?>
 </div>
\ No newline at end of file
diff --git a/mod/riverdashboard/views/default/riverdashboard/css.php b/mod/riverdashboard/views/default/riverdashboard/css.php
index c8c004213..9a6109de0 100644
--- a/mod/riverdashboard/views/default/riverdashboard/css.php
+++ b/mod/riverdashboard/views/default/riverdashboard/css.php
@@ -36,6 +36,11 @@
 .river_item p {
 	margin:0;
 }
+.river_item .entity_subtext {
+	padding-left:5px;
+	padding-right:5px;
+	font-size:85%;
+}
 .river_item_useravatar {
 	float:left;
 	margin-top:3px;
@@ -46,8 +51,9 @@
 }
 .river_content_display {
 	border-left:1px solid #DDDDDD;
-	font-size:90%;
-	margin:8px 0 6px 0;
+	font-size:85%;
+	line-height:1.5em;
+	margin:8px 0 5px 0;
 	padding-left:5px;
 }
 .following_icon {
@@ -58,148 +64,95 @@
 }
 
 /* LATEST COMMENTS IN RIVER */
+.river_comments_tabs {
+	max-height: 19px;
+	overflow:hidden;
+}
 .river_comments {
-	margin:5px 0 0 55px;
-	width:auto;
+	-moz-border-radius-bottomleft:5px;
+	-moz-border-radius-bottomright:5px;
+	-moz-border-radius-topleft:5px;
+	-moz-border-radius-topright:0;
+	-webkit-border-top-left-radius:5px;
+	-webkit-border-top-right-radius:0;
+	-webkit-border-bottom-right-radius:5px;
+	-webkit-border-bottom-left-radius:5px; 
+    background-color: #eeeeee;
 }
 .river_comment {
-	background-color: #f8f8f8;
 	padding:3px;
-	margin-bottom:3px;
-	-webkit-border-radius: 4px; 
-	-moz-border-radius: 4px;	
+	border-bottom:1px solid white;	
 }
 .river_comment.penultimate {
-	background-color: #eeeeee;
+
 }
 .river_comment.latest {
-	background-color: #dedede;
-	margin-bottom:0;
-}
-a.river_more_comments {
-	display:block;
-	float:right;
-	padding:2px 4px 7px 30px;
-	text-align:right;
-	width:auto;
-}
-.river_comment_owner_icon {
-	float:left;
-	margin:3px 8px 4px 2px;
-}
-.river_comment_contents {
-	margin-left:34px;
-}
-.river_item .comment_link {
-	margin-left:55px;
-}
-.river_comments .entity_subtext {
-	display: block;
-}
 
-/*  ACTIVITY WIDGET?
-	@todo 
-	
-.collapsable_box_content .river_user_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_profile.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_user_profileupdate {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_profile.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_user_profileiconupdate {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_profile.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_annotate {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_bookmarks_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_bookmarks.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_bookmarks_comment {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_status_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_status.gif) no-repeat left -1px;
 }
-.collapsable_box_content .river_object_file_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_files.gif) no-repeat left -1px;
+/* hidden inline comment form */
+.river_comment_form.hidden {
+	padding:5px;	
 }
-.collapsable_box_content .river_object_file_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_files.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_file_comment {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_widget_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_plugin.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_forums_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_forums_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_widget_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_plugin.gif) no-repeat left -1px;	
-}
-.collapsable_box_content .river_object_blog_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_blog.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_blog_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_blog.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_blog_comment {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_forumtopic_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_user_friend {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_friends.gif) no-repeat left -1px;
-}
-.collapsable_box_content .river_object_relationship_friend_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_friends.gif) no-repeat left -1px;
+.river_comment_form.hidden .input_text {
+	width:560px;
+	padding:3px;
 }
-.collapsable_box_content .river_object_relationship_member_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
+.river_comment_form.hidden .submit_button {
+	margin:0 0 0 10px;
+	float:right;
 }
-.collapsable_box_content .river_object_thewire_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_thewire.gif) no-repeat left -1px;
+.river_link_divider {
+	color:#999999;
 }
-.collapsable_box_content .river_group_join {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
+.river_comment_form_button,
+.river_user_like_button {
+	font-size:85%;
 }
-.collapsable_box_content .river_object_groupforumtopic_annotate {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
+.elgg_likes_user {
+	border-bottom:1px solid white;
+	padding:3px;
 }
-.collapsable_box_content .river_object_groupforumtopic_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_forum.gif) no-repeat left -1px;
+.elgg_likes_user .entity_listing_icon {
+	margin:3px 0 4px 2px;
 }
-.collapsable_box_content .river_object_sitemessage_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_blog.gif) no-repeat left -1px;	
+.elgg_likes_user .entity_listing_info {
+	width:635px;
 }
-.collapsable_box_content .river_user_messageboard {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;	
+.elgg_likes_user .entity_metadata {
+	margin-top:3px;
 }
-.collapsable_box_content .river_object_page_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_pages.gif) no-repeat left -1px;
+.river_item p.elgg_likes_owner {
+	padding-top:4px;
 }
-.collapsable_box_content .river_object_page_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_pages.gif) no-repeat left -1px;
+a.river_more_comments {
+	display:block;
+	float:right;
+	padding:1px 7px 1px 7px;
+	margin-left:6px;
+	text-align:right;
+	font-size:85%;
+	width:auto;
+	background-color: #eeeeee;
+	-moz-border-radius-topleft:4px;
+	-moz-border-radius-topright:4px;
+	-webkit-border-top-left-radius:4px;
+	-webkit-border-top-right-radius:4px;
 }
-.collapsable_box_content .river_object_page_top_create {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_pages.gif) no-repeat left -1px;
+a.river_more_comments.off {
+	background-color: white;
 }
-.collapsable_box_content .river_object_page_top_update {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_pages.gif) no-repeat left -1px;
+.river_comment_owner_icon {
+	float:left;
+	margin:3px 8px 4px 2px;
 }
-.collapsable_box_content .river_object_page_top_comment {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
+.river_comment_contents {
+	margin-left:34px;
 }
-.collapsable_box_content .river_object_page_comment {
-	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
+/*
+.river_item .comment_link {
+	margin-left:55px;
 }
-
 */
 
 
+
diff --git a/mod/riverdashboard/views/default/riverdashboard/js.php b/mod/riverdashboard/views/default/riverdashboard/js.php
index ad96a6069..b1bace04a 100644
--- a/mod/riverdashboard/views/default/riverdashboard/js.php
+++ b/mod/riverdashboard/views/default/riverdashboard/js.php
@@ -1,7 +1,35 @@
 <script type="text/javascript">
 	$(document).ready(function() {
 		$('.river_comment_form_button').click(function() {
-			$(this).next('.river_comment_form').toggle();
+			elgg_slide_toggle(this,'.river_item','.river_comment_form');			
 		});
+		
+		$('.likes_user_list_button').click(function() {
+			var myParent = $(this).closest('.river_item');
+			if (myParent.find('.likes_list').css('display') == 'none') {
+				// hide comments
+				myParent.find('.river_comment').animate({"height": "toggle", "opacity": "toggle"}, { duration: 400 });
+				// change selected tab
+				myParent.find('.show_comments_button').addClass('off');
+				myParent.find('.likes_user_list_button').removeClass('off');
+				// show users that liked object
+				elgg_slide_toggle(this,'.river_item','.likes_list');
+			}
+		});
+		
+		
+		$('.show_comments_button').click(function() {
+			var myParent = $(this).closest('.river_item');
+			if (myParent.find('.river_comment').css('display') == 'none') {
+				// hide comments
+				myParent.find('.likes_list').animate({"height": "toggle", "opacity": "toggle"}, { duration: 400 });
+				// change selected tab
+				myParent.find('.show_comments_button').removeClass('off');
+				myParent.find('.likes_user_list_button').addClass('off');
+				// show users that liked object
+				elgg_slide_toggle(this,'.river_item','.river_comment');
+			}
+		});		
+		
 	});
 </script>
\ No newline at end of file
diff --git a/mod/riverdashboard/views/default/riverdashboard/rivercomment.php b/mod/riverdashboard/views/default/riverdashboard/rivercomment.php
index 32d1b4675..d440e7ab6 100644
--- a/mod/riverdashboard/views/default/riverdashboard/rivercomment.php
+++ b/mod/riverdashboard/views/default/riverdashboard/rivercomment.php
@@ -5,11 +5,14 @@
  */
 
 if (isset($vars['entity']) && isloggedin()) {
-	$form_body = "<a class=\"river_comment_form_button\">Add comment</a>";
-	$form_body .= "<div class=\"river_comment_form\" style=\"display:none;\">";
-	$form_body .= elgg_view('input/text',array('internalname' => 'generic_comment', 'value' => 'Add a comment...'));
+	$form_body = "<div class='river_comment_form hidden'>";
+	$form_body .= elgg_view('input/text',array(
+							'internalname' => 'generic_comment',
+							'value' => 'Add a comment...',
+							'js' => "onfocus=\"if (this.value=='Add a comment...') { this.value='' };\" onblur=\"if (this.value=='') { this.value='Add a comment...' }\""
+							));
 	$form_body .= elgg_view('input/hidden', array('internalname' => 'entity_guid', 'value' => $vars['entity']->getGUID()));
-	$form_body .= elgg_view('input/submit', array('value' => elgg_echo("post")));
+	$form_body .= elgg_view('input/submit', array('value' => elgg_echo("Comment")));
 	$form_body .= "</div>";
 	echo elgg_view('input/form', array('body' => $form_body, 'action' => "{$vars['url']}action/comments/add"));
 }
\ No newline at end of file