Fix chat CSS - refs #7558

main/inc/lib/javascript/chat/css/chat.css

@@ -8,7 +8,7 @@
     display: block;
 }
 .chatboxheadmain {	
-	padding:7px 7px 7px 0px;
+	padding: 5px;
 	color: #333333;		
 	background-color: #EBEEF4;		
     border-top: 1px solid rgba(29, 49, 91, 0.3);
@@ -45,20 +45,23 @@
 	width:16px;
 	display:inline;
 	float:left;
-	padding: 0px 4px 0px 4px;	
 }
 
 .chatboxtitle {
 	font-weight: bold;
 	float: left;
 	font-size: 13px;
-	width: 160px;
+	width: 153px;
 	cursor:pointer;
+        overflow: hidden;
+        padding-left: 2px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
 }
 
 .chatboxhead {
 	/* background-color: #222; */
-	padding:7px 7px 7px 0px;
+	padding: 5px;
 	color: #ffffff;
 	border-right:1px solid #222;
 	border-left:1px solid #222;
@@ -99,7 +102,7 @@
 	font-size: 13px;
 	color: #333333;
 	height:200px;
-	width:209px;
+	width:225px;
 	overflow-y:auto;
 	overflow-x:auto;
 	padding:7px;

main/inc/lib/javascript/chat/js/chat.js

@@ -352,20 +352,66 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
 
 	user_is_online = return_online_user(user_id, online);
 
-	$("<div />" ).attr("id","chatbox_"+user_id)
-	.addClass("chatbox")
-	.html('<div class="chatboxhead">\n\
-			'+user_is_online+'	\n\
-			<div class="chatboxtitle">'+chatboxtitle+'</div>\n\
-			<div class="chatboxoptions">\n\
-				<a class="togglelink" rel="'+user_id+'" href="javascript:void(0)" > _ </a>&nbsp;\n\
-				<a class="closelink" rel="'+user_id+'" href="javascript:void(0)">X</a></div>\n\
-				<br clear="all"/></div>\n\
-			<div class="chatboxcontent"></div>\n\
-			<div class="chatboxinput"><textarea class="chatboxtextarea" onkeydown="javascript:return checkChatBoxInputKey(event,this,\''+user_id+'\');"></textarea></div>')
-	.appendTo($( "body" ));
-
-	$("#chatbox_"+user_id).css('bottom', '0px');
+        var chatbox = $('<div>')
+            .attr({
+                id: 'chatbox_' + user_id
+            })
+            .addClass('chatbox')
+            .css('bottom', 0);
+
+        var chatboxHead = $('<div>')
+            .addClass('chatboxhead')
+            .append(user_is_online);
+
+        $('<div>')
+            .addClass('chatboxtitle')
+            .append(chatboxtitle)
+            .appendTo(chatboxHead);
+
+        var chatboxoptions = $('<div>')
+            .addClass('chatboxoptions')
+            .appendTo(chatboxHead);
+
+        $('<a>')
+            .addClass('btn btn-xs togglelink')
+            .attr({
+                href: 'javascript:void(0)',
+                rel: user_id
+            })
+            .html('<i class="fa fa-toggle-down"></i>')
+            .appendTo(chatboxoptions);
+
+        $('<a>')
+            .addClass('btn btn-xs closelink')
+            .attr({
+                href: 'javascript:void(0)',
+                rel: user_id
+            })
+            .html('<i class="fa fa-close"></i>')
+            .appendTo(chatboxoptions);
+
+        $('<br>')
+            .attr('clear', 'all')
+            .appendTo(chatboxHead);
+
+        var chatboxContent = $('<div>')
+            .addClass('chatboxcontent');
+
+        var chatboxInput = $('<div>')
+            .addClass('chatboxinput');
+
+        $('<textarea>')
+            .addClass('chatboxtextarea')
+            .on('keydown', function(e) {
+                return checkChatBoxInputKey(e.originalEvent, this, user_id);
+            })
+            .appendTo(chatboxInput);
+
+        chatbox
+            .append(chatboxHead)
+            .append(chatboxContent)
+            .append(chatboxInput)
+            .appendTo('body');
 
 	chatBoxeslength = 0;
 
@@ -398,6 +444,7 @@ function createChatBox(user_id, chatboxtitle, minimizeChatBox, online) {
 		}
 
 		if (minimize == 1) {
+                        $('.togglelink').html('<i class="fa fa-toggle-up"></i>');
 			$('#chatbox_'+user_id+' .chatboxcontent').css('display','none');
 			$('#chatbox_'+user_id+' .chatboxinput').css('display','none');
 		}
@@ -481,6 +528,8 @@ function toggleChatBoxGrowth(user_id) {
 		$('#chatbox_'+user_id+' .chatboxcontent').css('display','block');
 		$('#chatbox_'+user_id+' .chatboxinput').css('display','block');
 		$("#chatbox_"+user_id+" .chatboxcontent").scrollTop($("#chatbox_"+user_id+" .chatboxcontent")[0].scrollHeight);
+
+                $('.togglelink').html('<i class="fa fa-toggle-down"></i>');
 	} else {
 		var newCookie = user_id;
 		if ($.cookie('chatbox_minimized')) {
@@ -489,6 +538,8 @@ function toggleChatBoxGrowth(user_id) {
 		$.cookie('chatbox_minimized',newCookie);
 		$('#chatbox_'+user_id+' .chatboxcontent').css('display','none');
 		$('#chatbox_'+user_id+' .chatboxinput').css('display','none');
+
+                $('.togglelink').html('<i class="fa fa-toggle-up"></i>');
 	}
 }