mod chat rework continued

10 files changed, 103 insertions, 26 deletions

diff --git a/include/widgets.php b/include/widgets.php
index 014160867..50e4cb184 100644
--- a/include/widgets.php
+++ b/include/widgets.php
@@ -809,6 +809,14 @@ function widget_chatroom_list($arr) {
 	}
 }
 
+function widget_chatroom_members() {
+	$o = replace_macros(get_markup_template('chatroom_members.tpl'), array(
+		'$header' => t('Chatroom Members')
+	));
+
+	return $o;
+}
+
 function widget_bookmarkedchats($arr) {
 	$h = get_observer_hash();
 	if(! $h)
diff --git a/mod/chatsvc.php b/mod/chatsvc.php
index 829fef6f8..bdf4a9f8c 100644
--- a/mod/chatsvc.php
+++ b/mod/chatsvc.php
@@ -137,7 +137,8 @@ function chatsvc_content(&$a) {
 					'name' => $rr['xchan_name'],
 					'isotime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'c'),
 					'localtime' => datetime_convert('UTC', date_default_timezone_get(), $rr['created'], 'r'),
-					'text' => smilies(bbcode($rr['chat_text']))
+					'text' => smilies(bbcode($rr['chat_text'])),
+					'self' => ((get_observer_hash() == $rr['chat_xchan']) ? 'self' : '')
 				);
 			}
 		}
diff --git a/view/css/mod_chat.css b/view/css/mod_chat.css
index 69c2e1528..9d46d9860 100644
--- a/view/css/mod_chat.css
+++ b/view/css/mod_chat.css
@@ -1,4 +1,5 @@
-#chatroom-new {
+#chatroom-new,
+#inline {
 	display: none;
 }
 
@@ -25,14 +26,23 @@ aside {
 	padding-bottom: 0px;
 }
 
+#chat-destroy {
+	display: inline;
+}
+
 #chatTopBar {
 	float: left;
+	width: 100%;
 	height: 400px;
 	overflow-y: auto;
 }
 
+#chatroom_list,
+#chatroom_members {
+	display: none;
+}
 
-#chatUsers img {
+#chatMembers img {
 	float: left;
 	margin-right: 5px;
 }
@@ -49,11 +59,16 @@ aside {
 
 .chat-item {
 	display: table;
-	table-layout: fixed;
+	float: left;
+}
 
+.chat-item-self {
+	display: table;
+	float: right;
 }
 
-.chat-item-photo {
+.chat-item-photo,
+.chat-item-photo-self {
 	display: table-cell;
 	height: 32px;
 	width: 32px;
@@ -66,7 +81,17 @@ aside {
 	padding: 0px 0px 20px 10px;
 }
 
-.chat-item-title {
+.chat-body-self {
+	display: table-cell;
+	vertical-align: top;
+	padding: 0px 10px 20px 0px;
+	text-align: right;
+}
+
+
+
+.chat-item-title,
+.chat-item-title-self {
 	display: inline-block;
 	padding: 3px;
 	margin-bottom: 3px;
@@ -84,3 +109,12 @@ aside {
 	color: red;
 }
 
+.generic-content-wrapper.fullscreen {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	z-index: 10000;
+}
+
diff --git a/view/pdl/mod_chat.pdl b/view/pdl/mod_chat.pdl
index 564199bed..664e77f53 100644
--- a/view/pdl/mod_chat.pdl
+++ b/view/pdl/mod_chat.pdl
@@ -3,4 +3,5 @@
 [widget=chatroom_list][/widget]
 [widget=bookmarkedchats][/widget]
 [widget=suggestedchats][/widget]
+[widget=chatroom_members][/widget]
 [/region]
diff --git a/view/pdl/mod_cloud.pdl b/view/pdl/mod_cloud.pdl
index 6b1d2a15e..d8f50ad7a 100644
--- a/view/pdl/mod_cloud.pdl
+++ b/view/pdl/mod_cloud.pdl
@@ -1,3 +1,3 @@
 [region=aside]
-[widget=profile][/widget]
+[widget=vcard][/widget]
 [/region]
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 7f9f621a3..43607a95c 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1264,7 +1264,8 @@ img.mail-conv-sender-photo {
 .wall-item-content,
 .mail-conv-body,
 .page-body,
-.chat-item-text {
+.chat-item-text,
+.chat-item-text-self {
 	font-size: $font_size;
 	clear: both;
 }
@@ -1363,11 +1364,13 @@ img.mail-conv-sender-photo {
 	cursor: pointer;
 }
 
-.chat-item-photo {
+.chat-item-photo,
+.chat-item-photo-self {
 	border-radius: $radiuspx;
 }
 
-.chat-item-title {
+.chat-item-title,
+.chat-item-title-self {
 	border-radius: $radiuspx;
 	background-color: $item_colour;
 }
diff --git a/view/tpl/bookmarkedchats.tpl b/view/tpl/bookmarkedchats.tpl
index ab4372c25..3aabf835a 100644
--- a/view/tpl/bookmarkedchats.tpl
+++ b/view/tpl/bookmarkedchats.tpl
@@ -1,5 +1,5 @@
 {{if $rooms}}
-<div class="widget">
+<div id="chatroom_bookmarks" class="widget">
 <h3>{{$header}}</h3>
 <ul class="bookmarkchat nav nav-pills nav-stacked">
 {{foreach $rooms as $room}}
@@ -7,4 +7,4 @@
 {{/foreach}}
 </ul>
 </div>
-{{/if}}
\ No newline at end of file
+{{/if}}
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index a040cbd3f..b18318044 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -1,14 +1,16 @@
 <div class="generic-content-wrapper">
 	<div class="section-title-wrapper">
-		{{if $is_owner}}
-		<div id="chatDrop" class="pull-right">
+		<div class="pull-right">
+			<button id="fullscreen" type="button" class="btn btn-default btn-xs" onclick="makeFullScreen();"><i class="icon-resize-full"></i></button>
+			<button id="inline" type="button" class="btn btn-default btn-xs" onclick="makeInline();"><i class="icon-resize-small"></i></button>
+			{{if $is_owner}}
 			<form id="chat-destroy" method="post" action="chat">
 				<input type="hidden" name="room_name" value="{{$room_name}}" />
 				<input type="hidden" name="action" value="drop" />
 				<button class="btn btn-danger btn-xs" type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"><i class="icon-trash"></i>&nbsp;{{$drop}}</button>
 			</form>
+			{{/if}}
 		</div>
-		{{/if}}
 		<h2>{{$room_name}}</h2>
 		<div class="clear"></div>
 	</div>
@@ -103,10 +105,19 @@ var last_chat = 0;
 var chat_timer = null;
 
 $(document).ready(function() {
+	$('#chatTopBar').spin('small');
 	chat_timer = setTimeout(load_chats,300);
+	$('#chatroom_bookmarks, #vcard').hide();
+	$('#chatroom_list, #chatroom_members').show();
+
+	$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 40 );
 
 });
 
+$(window).resize(function () {
+	var navHeight = $('.generic-content-wrapper').hasClass('fullscreen') ? 0 : $('nav').outerHeight(true)
+	$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - navHeight - 40 );
+});
 
 $('#chat-form').submit(function(ev) {
 	$('body').css('cursor','wait');
@@ -124,6 +135,7 @@ function load_chats() {
 		if(data.success && (! stopped)) {
 			update_inroom(data.inroom);
 			update_chats(data.chats);
+			$('#chatTopBar').spin(false);
 		}
 	});
 	
@@ -136,20 +148,27 @@ function update_inroom(inroom) {
 	var count = inroom.length;
 	$.each( inroom, function(index, item) {
 		var newNode = document.createElement('div');
+		newNode.setAttribute('class', 'member-item');
 		$(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + '<span class="name">' + item.name + '</span><br /><span class="' + item.status_class + '">' + item.status + '</span>');
 		html.appendChild(newNode);
 	});
-	$('#chatUsers').html(html);	
+	$('#chatMembers').html(html);
 }
 
 function update_chats(chats) {
-
 	var count = chats.length;
 	$.each( chats, function(index, item) {
 		last_chat = item.id;
 		var newNode = document.createElement('div');
-		newNode.setAttribute('class', 'chat-item');
-		$(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><div class="chat-item-title"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text">' + item.text + '</div></div><div class="chat-item-end"></div>');
+
+		if(item.self) {
+			newNode.setAttribute('class', 'chat-item-self clear');
+			$(newNode).html('<div class="chat-body-self"><div class="chat-item-title-self"><span class="chat-item-name-self">' + item.name + ' </span><span class="autotime chat-item-time-self" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text-self">' + item.text + '</div></div><img class="chat-item-photo-self" src="' + item.img + '" alt="' + item.name + '" />');
+		}
+		else {
+			newNode.setAttribute('class', 'chat-item clear');
+			$(newNode).html('<img class="chat-item-photo" src="' + item.img + '" alt="' + item.name + '" /><div class="chat-body"><div class="chat-item-title"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span></div><div class="chat-item-text">' + item.text + '</div></div>');
+		}
 		$('#chatLineHolder').append(newNode);
 		$(".autotime").timeago();
 
@@ -175,6 +194,22 @@ function addmailtext(data) {
 	var currentText = $("#chatText").val();
 	$("#chatText").val(currentText + data);
 }
+
+function makeFullScreen() {
+	$('#fullscreen').hide();
+	$('#inline').show();
+	$('.generic-content-wrapper').addClass('fullscreen');
+	$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - 20);
+
+}
+
+function makeInline() {
+	$('#fullscreen').show();
+	$('#inline').hide();
+	$('.generic-content-wrapper').removeClass('fullscreen');
+	$('#chatTopBar').height($(window).height() - $('#chatBottomBar').outerHeight(true) - $('.section-title-wrapper').outerHeight(true) - $('nav').outerHeight(true) - 40 );
+}
+
 </script>
 <script>
 function isMobile() {
diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl
index 542ff9a0c..ff4b79a4b 100644
--- a/view/tpl/chatroomlist.tpl
+++ b/view/tpl/chatroomlist.tpl
@@ -1,15 +1,10 @@
-<div class="widget">
+<div id="chatroom_list" class="widget">
 	<h3>{{$header}}</h3>
-	{{if $items}}
 	<ul class="nav nav-pills nav-stacked">
 		<li><a href="{{$baseurl}}/chat/{{$nickname}}">{{$overview}}</a></li>
 		{{foreach $items as $item}}
 		<li><a href="{{$baseurl}}/chat/{{$nickname}}/{{$item.cr_id}}"><span class="badge pull-right">{{$item.cr_inroom}}</span>{{$item.cr_name}}</a></li>
 		{{/foreach}}
 	</ul>
-	{{/if}}
-	<div id="chatSide">
-		<div id="chatUsers"></div>
-	</div>
 </div>
 
diff --git a/view/tpl/xchan_vcard.tpl b/view/tpl/xchan_vcard.tpl
index ad409d75b..52bf6ab47 100755
--- a/view/tpl/xchan_vcard.tpl
+++ b/view/tpl/xchan_vcard.tpl
@@ -1,4 +1,4 @@
-<div class="vcard">
+<div id="vcard" class="vcard">
 <div id="profile-photo-wrapper"><a href="{{$link}}"><img class="vcard-photo photo" src="{{$photo}}" alt="{{$name}}" /></a></div>
 {{if $connect}}
 <div class="connect-btn-wrapper"><a href="follow?f=&url={{$follow}}" class="btn btn-block btn-success btn-sm"><i class="icon-plus"></i> {{$connect}}</a></div>