Merge pull request #217 from NodeBB/group-chat

Group chat

less/chats.less

@@ -41,7 +41,7 @@
 		}
 
 		.username {
-			font-size: 18px;
+			font-size: 14px;
 
 			&:after {
 				display: inline-block;
@@ -54,9 +54,6 @@
 
 		.teaser-timestamp {
 			font-size: 10px;
-			position: absolute;
-			top: 8px;
-			right: 24px;
 		}
 
 		a {

less/header.less

@@ -17,7 +17,6 @@
 
 			img, .user-icon {
 				.user-icon-style(@border-radius: 50%);
-				float: left;
 			}
 
 			a {

lib/client/chats.js

@@ -2,12 +2,12 @@ define('persona/chats', ['components', 'forum/chats'], function(components, core
 	var Chats = {};
 
 	Chats.init = function() {
-		components.get('chat/recent').off('click').on('click', 'li', function(e) {
+		components.get('chat/recent').off('click').on('click', '[component="chat/recent/room"]', function(e) {
 			var env = utils.findBootstrapEnvironment();
 			if (env === 'xs' || env === 'sm') {
-				app.openChat($(this).attr('data-username'), $(this).attr('data-uid'));
+				app.openChat($(this).attr('data-roomid'));
 			} else {
-				coreChats.switchChat(parseInt($(this).attr('data-uid'), 10), $(this).attr('data-username'));
+				coreChats.switchChat($(this).attr('data-roomid'));
 			}
 		});
 	};

templates/chat.tpl

@@ -2,15 +2,17 @@
 <div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
 	<div class="modal-dialog">
 		<div class="modal-content">
+
 			<div class="modal-header">
 				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 				<button type="button" class="close" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
-				<h4>
+				<h4>[[modules:chat.chatting_with]]</h4>
-					<i component="user/status" class="fa fa-circle status offline" title="[[global:offline]]"></i>
+
-					[[modules:chat.chatting_with]]
+				<div class="users-tag-container inline-block">
-					<span class="user-typing hide"><i class="fa fa-keyboard-o fa-fw"></i></span>
+					<input class="users-tag-input" type="text" class="form-control" placeholder="enter users here" tabindex="4"/>
-				</h4>
 				</div>
+			</div>
+
 			<div class="modal-body">
 				<span class="since-bar">
 				<a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>

templates/chats.tpl

@@ -4,12 +4,23 @@
 <div class="row">
 	<div class="col-md-4">
 		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
-			<!-- BEGIN chats -->
+			<!-- BEGIN rooms -->
-			<!-- IMPORT partials/chat_contact.tpl -->
+			<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
-			<!-- END chats -->
+
-			<!-- BEGIN contacts -->
+				<div data-username="{rooms.lastUser.username}" data-uid="{rooms.lastUser.uid}">
-			<!-- IMPORT partials/chat_contact.tpl -->
+					<!-- IF rooms.lastUser.picture -->
-			<!-- END contacts -->
+					<img class="user-img" src="{rooms.lastUser.picture}">
+					<!-- ELSE -->
+					<div class="user-icon user-img" style="background-color: {rooms.lastUser.icon:bgColor};">{rooms.lastUser.icon:text}</div>
+					<!-- ENDIF rooms.lastUser.picture -->
+					<i component="user/status" title="[[global:{rooms.lastUser.status}]]" class="fa fa-circle status {rooms.lastUser.status}"></i>
+					<span class="username">{rooms.usernames}</span>
+				</div>
+
+				<span class="teaser-content">{rooms.teaser.content}</span>
+				<span class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></span>
+			</li>
+			<!-- END rooms -->
 		</ul>
 	</div>
 
@@ -19,12 +30,15 @@
 			[[error:chat-restricted]]
 		</div>
 		<!-- ENDIF !allowed -->
-		<!-- IF meta -->
+		<!-- IF roomId -->
-		<div component="chat/messages" class="expanded-chat" data-uid="{meta.uid}" data-username="{meta.username}">
+		<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
 
 			<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
-			<h1 component="chat/title">{meta.username}</h1>
+			<h4 component="chat/title">[[modules:chat.chatting_with]]</h4>
 
+			<div class="users-tag-container">
+				<input class="users-tag-input" type="text" class="form-control" placeholder="enter users here" tabindex="4"/>
+			</div>
 
 			<span class="since-bar"><a href="#" class="selected" data-since="recent">[[recent:title]]</a> &bull; <a href="#" data-since="week">[[modules:chat.seven_days]]</a> &bull; <a href="#" data-since="month">[[modules:chat.thirty_days]]</a> &bull; <a href="#" data-since="threemonths">[[modules:chat.three_months]]</a></span>
 			<ul class="chat-content">
@@ -41,6 +55,6 @@
 		<div class="alert alert-info">
 			[[modules:chat.no-messages]]
 		</div>
-		<!-- ENDIF meta -->
+		<!-- ENDIF roomId -->
 	</div>
 </div>

templates/partials/chat_contact.tpl

@@ -1,4 +1,4 @@
-			<li data-username="{../username}" data-uid="{../uid}" class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
+			<div data-username="{../username}" data-uid="{../uid}">
 				<!-- IF ../picture -->
 				<img class="user-img" src="{../picture}">
 				<!-- ELSE -->
@@ -6,6 +6,5 @@
 				<!-- ENDIF ../picture -->
 				<i component="user/status" title="[[global:{../status}]]" class="fa fa-circle status {../status}"></i>
 				<span class="username">{../username}</span>
-				<span class="teaser-content">{../teaser.content}</span>
+
-				<span class="teaser-timestamp timeago" title="{../teaser.timestampISO}"></span>
+			</div>
-			</li>