more work on mod chat

4 files changed, 167 insertions, 101 deletions

diff --git a/view/css/mod_chat.css b/view/css/mod_chat.css
index c59d8d459..69c2e1528 100644
--- a/view/css/mod_chat.css
+++ b/view/css/mod_chat.css
@@ -20,77 +20,67 @@
 	padding: 7px 10px;
 }
 
+section,
+aside {
+	padding-bottom: 0px;
+}
+
+#chatTopBar {
+	float: left;
+	height: 400px;
+	overflow-y: auto;
+}
 
- #chatContainer {
-	 height: 100%;
-	 width: 100%;
- }
- 
- #chatTopBar {
-	 float: left;
-	 height: 400px;
-	 width: 77%;
-	 overflow-y: auto;
- }
- 
- #chatSide {
-	 float: right;
-	 width: 20%;
-	 height: 100%;
- }
-
- #chatDrop {
-	margin: 20px 0;
-	float: right;
-}
-
- #chatUsers {
-	border: 1px solid #000;
-}
-
- #chatBottomBar {
-	 position: relative;
-	 bottom: 0;
-	 height: 150px;
-	 margin-top: 20px;
- }
- 
-#chatOptionsBar {
-	margin-top: 20px;
-}
-
- #chatText {
-	 width: 100%;
- }
-
- section {
-	 padding-bottom: 0;
- }
 
-.chat-item {
-	padding: 3px;
+#chatUsers img {
+	float: left;
+	margin-right: 5px;
+}
+
+.name {
+	font-weight: bold;
 }
 
-.chat-item-end {
-	clear: both;
+#chatBottomBar {
+	position: relative;
+	bottom: 0;
+	margin-top: 10px;
+}
+
+.chat-item {
+	display: table;
+	table-layout: fixed;
+
 }
 
 .chat-item-photo {
-	float: left;
+	display: table-cell;
 	height: 32px;
 	width: 32px;
+	vertical-align: top;
 }
 
 .chat-body {
-	float: left;
-	width: 80%;
-	margin-left: 15px;
+	display: table-cell;
+	vertical-align: top;
+	padding: 0px 0px 20px 10px;
 }
 
-.chat-item-text {
-	float: left;
-	padding: 3px;
+.chat-item-title {
 	display: inline-block;
+	padding: 3px;
+	margin-bottom: 3px;
 }
 
+.online {
+	color: green;
+}
+
+.away {
+	color: orange;
+}
+
+.leave {
+	color: red;
+}
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index b92fe5afe..7f9f621a3 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1263,7 +1263,8 @@ img.mail-conv-sender-photo {
 
 .wall-item-content,
 .mail-conv-body,
-.page-body {
+.page-body,
+.chat-item-text {
 	font-size: $font_size;
 	clear: both;
 }
@@ -1366,9 +1367,9 @@ img.mail-conv-sender-photo {
 	border-radius: $radiuspx;
 }
 
-.chat-item-text {
+.chat-item-title {
 	border-radius: $radiuspx;
-	background-color: #eee;
+	background-color: $item_colour;
 }
 
 /* nav bootstrap */
diff --git a/view/tpl/chat.tpl b/view/tpl/chat.tpl
index 5ea1ae22e..a040cbd3f 100644
--- a/view/tpl/chat.tpl
+++ b/view/tpl/chat.tpl
@@ -1,44 +1,101 @@
-<div class="generic-content-wrapper-styled">
-
-	{{if $is_owner}} 
-	<div id="chatDrop">
-	<form id="chat-destroy" method="post" action="chat">
-		<input type="hidden" name="room_name" value="{{$room_name}}" />
-		<input type="hidden" name="action" value="drop" />
-		<input type="submit" name="submit" value="{{$drop}}" onclick="return confirmDelete();"/>
-	</form>
-	</div>		
-	{{/if}}
-
-<h1>{{$room_name}}</h1>
-
-
-<div id="chatContainer">
-
-    <div id="chatTopBar">
-    	<div id="chatLineHolder"></div>
-	</div>
-
-	<div id="chatSide">
-
-    <div id="chatUsers"></div><br />
+<div class="generic-content-wrapper">
+	<div class="section-title-wrapper">
+		{{if $is_owner}}
+		<div id="chatDrop" class="pull-right">
+			<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>
+		</div>
+		{{/if}}
+		<h2>{{$room_name}}</h2>
+		<div class="clear"></div>
 	</div>
-	<div class="clear"></div>
-    <div id="chatBottomBar">
-        <div class="tip"></div>
-
-        <form id="chat-form" method="post" action="#">
-			<input type="hidden" name="room_id" value="{{$room_id}}" />
-            <textarea id="chatText" name="chat_text" rows=3></textarea><br />
-            <input type="submit" name="submit" value="{{$submit}}" />
-        </form>
-
-    </div>
-	<div id="chatOptionsBar">
-		<a href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave">{{$leave}}</a> | <a href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away">{{$away}}</a> | <a href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online">{{$online}}</a>{{if $bookmark_link}} | <a href="{{$bookmark_link}}" target="_blank" >{{$bookmark}}</a>{{/if}}
+	<div id="chatContainer" class="section-content-wrapper">
+		<div id="chatTopBar">
+			<div id="chatLineHolder"></div>
+		</div>
+
+
+		<div class="clear"></div>
+
+		<div id="chatBottomBar" >
+			<div class="tip"></div>
+			<form id="chat-form" method="post" action="#">
+				<input type="hidden" name="room_id" value="{{$room_id}}" />
+					<textarea id="chatText" name="chat_text" class="form-control"></textarea>
+				<div class="form-group">
+
+				</div>
+				<div id="chat-submit-wrapper" class="form-group">
+					<div id="chat-submit" class="btn-group dropup pull-right">
+						<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"><i class="icon-caret-down"></i></button>
+						<button class="btn btn-primary btn-sm" type="submit" id="chat-submit" name="submit" value="{{$submit}}">{{$submit}}</button>
+						<ul class="dropdown-menu">
+							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=online"><i class="icon-circle online"></i>&nbsp;{{$online}}</a></li>
+							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chatsvc?f=&room_id={{$room_id}}&status=away"><i class="icon-circle away"></i>&nbsp;{{$away}}</a></li>
+							<li class="nav-item"><a class="nav-link" href="{{$baseurl}}/chat/{{$nickname}}/{{$room_id}}/leave"><i class="icon-circle leave"></i>&nbsp;{{$leave}}</a></li>
+							{{if $bookmark_link}}
+							<li class="divider"></li>
+							<li class="nav-item"><a class="nav-link" href="{{$bookmark_link}}" target="_blank" ><i class="icon-bookmark"></i>&nbsp;{{$bookmark}}</a></li>
+							{{/if}}
+						</ul>
+					</div>
+					<div id="chat-tools" class="btn-toolbar pull-left">
+						<div class="btn-group">
+							<button id="main-editor-bold" class="btn btn-default btn-sm" title="{{$bold}}" onclick="inserteditortag('b', 'chatText'); return false;">
+								<i class="icon-bold jot-icons"></i>
+							</button>
+							<button id="main-editor-italic" class="btn btn-default btn-sm" title="{{$italic}}" onclick="inserteditortag('i', 'chatText'); return false;">
+								<i class="icon-italic jot-icons"></i>
+							</button>
+							<button id="main-editor-underline" class="btn btn-default btn-sm" title="{{$underline}}" onclick="inserteditortag('u', 'chatText'); return false;">
+								<i class="icon-underline jot-icons"></i>
+							</button>
+							<button id="main-editor-quote" class="btn btn-default btn-sm" title="{{$quote}}" onclick="inserteditortag('quote', 'chatText'); return false;">
+								<i class="icon-quote-left jot-icons"></i>
+							</button>
+							<button id="main-editor-code" class="btn btn-default btn-sm" title="{{$code}}" onclick="inserteditortag('code', 'chatText'); return false;">
+								<i class="icon-terminal jot-icons"></i>
+							</button>
+						</div>
+						<div class="btn-group hidden-xs">
+							<button id="chat-link-wrapper" class="btn btn-default btn-sm" onclick="chatJotGetLink(); return false;" >
+								<i id="chat-link" class="icon-link jot-icons" title="{{$insert}}" ></i>
+							</button-->
+						</div>
+						{{if $feature_encrypt}}
+						<div class="btn-group hidden-sm hidden-xs">
+							<button id="chat-encrypt-wrapper" class="btn btn-default btn-sm" onclick="red_encrypt('{{$cipher}}', '#chatText', $('#chatText').val()); return false;">
+								<i id="chat-encrypt" class="icon-key jot-icons" title="{{$encrypt}}" ></i>
+							</button>
+						</div>
+						{{/if}}
+						<div class="btn-group visible-xs visible-sm">
+							<button type="button" id="more-tools" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+								<i id="more-tools-icon" class="icon-caret-down jot-icons"></i>
+							</button>
+							<ul class="dropdown-menu dropdown-menu-right" role="menu">
+								<li class="visible-xs"><a href="#" onclick="chatJotGetLink(); return false;" ><i class="icon-link"></i>&nbsp;{{$insert}}</a></li>
+								{{if $feature_encrypt}}
+								<li class="divider visible-xs"></li>
+								<li class="visible-sm visible-xs"><a href="#" onclick="red_encrypt('{{$cipher}}', '#chatText' ,$('#chatText').val()); return false;"><i class="icon-key"></i>&nbsp;{{$encrypt}}</a></li>
+								{{/if}}
+							</ul>
+						</div>
+
+
+					</div>
+					<div id="chat-rotator-wrapper" class="pull-left">
+						<div id="chat-rotator"></div>
+					</div>
+					<div class="clear"></div>
+				</div>
+			</form>
+		</div>
 	</div>
 </div>
-</div>
 
 <script>
 var room_id = {{$room_id}};
@@ -63,7 +120,6 @@ $('#chat-form').submit(function(ev) {
 });
 
 function load_chats() {
-
 	$.get("chatsvc?f=&room_id=" + room_id + '&last=' + last_chat + ((stopped) ? '&stopped=1' : ''),function(data) {
 		if(data.success && (! stopped)) {
 			update_inroom(data.inroom);
@@ -80,7 +136,7 @@ function update_inroom(inroom) {
 	var count = inroom.length;
 	$.each( inroom, function(index, item) {
 		var newNode = document.createElement('div');
-		$(newNode).html('<img style="height: 32px; width: 32px;" src="' + item.img + '" alt="' + item.name + '" /> ' + item.status + '<br />' + item.name + '<br/>');
+		$(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);	
@@ -93,7 +149,7 @@ function update_chats(chats) {
 		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"><span class="chat-item-name">' + item.name + ' </span><span class="autotime chat-item-time" title="' + item.isotime + '">' + item.localtime + '</span><br /><span class="chat-item-text">' + item.text + '</span></div><div class="chat-item-end"></div>');
+		$(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>');
 		$('#chatLineHolder').append(newNode);
 		$(".autotime").timeago();
 
@@ -103,6 +159,22 @@ function update_chats(chats) {
 
 }
 
+
+function chatJotGetLink() {
+	reply = prompt("{{$linkurl}}");
+	if(reply && reply.length) {
+		$('#chat-rotator').spin('tiny');
+		$.get('linkinfo?f=&url=' + reply, function(data) {
+			addmailtext(data);
+			$('#chat-rotator').spin(false);
+		});
+	}
+}
+
+function addmailtext(data) {
+	var currentText = $("#chatText").val();
+	$("#chatText").val(currentText + data);
+}
 </script>
 <script>
 function isMobile() {
@@ -127,7 +199,7 @@ $(function(){
 	}
     else if (e.keyCode == 13) {
 	  e.preventDefault();
-      $(this).parent('form').trigger('submit');
+      $('#chat-form').trigger('submit');
     }
   });
 });
diff --git a/view/tpl/chatroomlist.tpl b/view/tpl/chatroomlist.tpl
index dfdce8afb..542ff9a0c 100644
--- a/view/tpl/chatroomlist.tpl
+++ b/view/tpl/chatroomlist.tpl
@@ -8,5 +8,8 @@
 		{{/foreach}}
 	</ul>
 	{{/if}}
+	<div id="chatSide">
+		<div id="chatUsers"></div>
+	</div>
 </div>