Completely reworked frontend

file/js/TimWolla.WCF.Chat.js

@@ -16,12 +16,20 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 		messageTemplate: null,
 		init: function(roomID, messageID) {
 			this.bindEvents();
+			$('#chatBox').css('background-color', $('div.main').css('background-color'));
+			$('#chatRoomContent').width($('#chatBox').width() - 400);
 		},
 		bindEvents: function () {
 			$('.smiley').click($.proxy(function (event) {
 				this.insertText($(event.target).attr('alt'));
 			}, this));
 
+			var chatRoomContent = $('#chatRoomContent');
+			var chatBox = $('#chatBox');
+			$(window).resize(function() {
+				chatRoomContent.width(chatBox.width() - 400);
+			});
+			
 			// $(window).bind('beforeunload', function() {
 				// return false;
 			// });
@@ -52,14 +60,8 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				type: 'POST',
 				success: $.proxy(function (data, textStatus, jqXHR) {
 					this.loading = false;
-					target.css({
+					
-						'float' : 'none',
+					target.parent().removeClass('ajaxLoad');
-						'padding' : '5px 25px 7px 35px',
-						'width' : '',
-						'overflow' : 'visible'
-					})
-					.siblings('.ajaxLoad')
-					.remove();
 					
 					// mark as active;
 					$('.activeMenuItem .chatRoom').parent().removeClass('activeMenuItem');
@@ -94,15 +96,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 					
 					this.loading = true;
 
-					target.css({
+					target.parent().addClass('ajaxLoad');
-						'width' : target.width() - 19, 
-						'float' : 'left',
-						'padding' : '5px 0 7px 35px',
-						'overflow': 'hidden'
-					})
-					.parent()
-					.append('<img class="ajaxLoad" src="' + WCF.Icon.get('wcf.icon.loading') + '" alt="" />')
-					.css({'marginTop' : function (index) {return (target.parent().height() / 2) - ($(this).height() / 2);}});
 				}, this)
 			});
 		},
@@ -112,20 +106,21 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				output = this.messageTemplate.fetch(message);
 				
 				li = $('<li></li>');
-				li.addClass('chatMessage'+message.type);
+				li.addClass('chatMessage chatMessage'+message.type);
 				if (message.sender == WCF.User.userID) li.addClass('ownMessage');
 				li.append(output);
 				
-				$('.chatMessage ul').append(li);
+				$('.chatMessageConainer ul').append(li);
 			}
-			$('.chatMessage').animate({scrollTop: $('.chatMessage ul').height()}, 10000);
+			$('.chatMessageConainer').animate({scrollTop: $('.chatMessageConainer ul').height()}, 10000);
 		},
 		insertText: function (text) {
 			// TODO: Add options here
-			$('#chatInput').val(text);
+			var input = $('#chatInput');
+			input.val(input.val() + ' ' + text + ' ');
 		},
 		toggleUserMenu: function (target) {
-			liUserID = '#' + target.parent().attr('id');
+			liUserID = '#' + target.parent().parent().attr('id');
 			if ($(liUserID).hasClass('activeMenuItem')) {
 				$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
 					$(liUserID).removeClass('activeMenuItem');

file/lib/data/chat/room/ChatRoom.class.php

@@ -66,7 +66,7 @@ public function __toString() {
 	 * @see	\wcf\system\request\IRouteController
 	 */
 	public function getTitle() {
-		return WCF::getLanguage()->get($this->title);
+		return \wcf\system\WCF::getLanguage()->get($this->title);
 	}
 	
 	/**

template/chat.tpl

@@ -6,72 +6,141 @@
 	{include file='headInclude' sandbox=false}
 	
 	<style type="text/css">
-		#chatbox {
+		#chatBox {
 			padding: 0;
 		}
 		
-		.table {
+		#chatBox > div {
-			display: table;
+			text-align: center;
-			table-layout: fixed;
-			width: 100%;
 		}
 		
-		.table > div {
+		#chatBox aside, #chatRoomContent {
-			display: table-row;
+			text-align: left;
 		}
 		
-		.first {
+		#chatRoomContent {
-			width: 15%;
+			margin: auto;
-			background-color: #D8E7F5;
+			padding: 1px 10px 10px;
-			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
+			background-color: #FFFFFF;
+			width: 68%;
+			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+			-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+			-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 		}
 		
-		.second {
+		.chatSidebar.left {
-			width: 70%;
+			float: left;
+			margin-left: -1px;
 		}
 	
-		.third {
+		.chatSidebar.right {
-			width: 15%;
+			float: right;
-			background-color: #D8E7F5;
+			margin-right: -1px;
-			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
 		}
 		
-		.column {
+		.chatSidebar {
-			display: table-cell;
+			overflow: auto;
-			margin: 0;
+			padding: 0 1px 0 0;
-			padding: 0;
+			width: 190px;
 		}
 		
-		.second.column > div {
+		#chatRoomContent:after {
-			padding: 0px 15px 25px;
+			clear: both;
+			height: 0;
+			content: "";
+			display: block;
 		}		
 		
-		#topic, #smileyList {
+		.chatSidebar h2 {
+			background-image: url({icon}arrowDown{/icon});
+			font-size: 130%;
+			padding: 7px 25px 7px 35px;
+			background-position: 15px center;
+			background-repeat: no-repeat;
+			background-size: 16px auto;
+			color: #336699;
+			cursor: default;
+			font-weight: bold;
+			margin-top: 5px;			
+		}
+
+		.chatSidebar ul li a {
+			color: #6699CC;
+			display: block;
+			padding: 5px 25px 7px 35px;
+			text-shadow: 0 1px 0 #FFFFFF;
+		}
+		
+		.chatSidebar ul li.activeMenuItem a {
+			color: #336699;
+			font-weight: bold;
+		}
+		
+		.chatSidebar.left ul li.activeMenuItem, .chatSidebar.right ul li.activeMenuItem .bgFix {
+			background-color: #FFFFFF;
+			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+			margin-right: -1px;
+			overflow: hidden;
+		}
+		
+		#topic, #smileyList, #chatOptions {
 			padding: 5px;
 		}	
 		
-		.smilies li {
+		.chatMessageConainer {
+			min-height: 200px;
+			overflow-y: scroll;
+		}
+		
+		#smileyList .smilies li, .smallButtons li {
 			display: inline;
 			margin-right: 5px;
 			margin-top: 5px;
 		}
 		
-		/*
+		#chatForm {
-		.tabMenu {
+			margin-top: 15px;
-			padding: 0 15px;
+			white-space: nowrap;
-			text-align: left;
+			margin-right: 34px;
+			margin-top: 10px;
+			height: 28px;
 		}
-		*/
 		
-		.chatMessage {
+		#chatForm .inputImage {
-			height: 200px;
+			height: 100%;
-			overflow-y: scroll;
+			margin-bottom: -8px;
+		}
+		
+		#chatOptions {
+			display: inline-block;
+		}
+
+		#chatUserList > ul > li > .bgFix a {
+			background-image: url("wcf/icon/arrowRight.svg");
+			background-position: 15px center;
+			background-repeat: no-repeat;
+			background-size: 16px auto;
+		}
+		
+		#chatUserList > ul > li.activeMenuItem > .bgFix a {
+			background-image: url("wcf/icon/arrowDown.svg");
+		}
+		
+		.chatSidebar .chatUserMenu li a {
+			margin-left: 30px !important;
+		}
+		
+		.chatUserMenu {
+			display: none;
+		}
+		
+		#chatUserList > ul li a {
+			margin-left: 20px;
 		}
 		
 		.chatMessage time, .chatMessage time::before, .chatMessage time::after {
 			font-size: .8em;
 		}
-		
 		.chatMessage time::before {
 			content: "[";
 		}
@@ -84,92 +153,14 @@
 			outline: none;
 		}
 		
-		/*
-		.chatSidebar > div h1.activeMenuItem {
-			background-image: url("wcf/icon/arrowDown.svg");
-		}
-		*/
-		
-		.chatSidebar > div h2 {
-			font-size: 130%;
-			padding: 7px 25px 7px 35px;
-		}
-		
-		.chatSidebar > div h2 {
-			background-image: url("wcf/icon/arrowRight.svg");
-			background-position: 15px center;
-			background-repeat: no-repeat;
-			background-size: 16px auto;
-			color: #336699;
-			cursor: pointer;
-			font-weight: bold;
-			margin-top: 5px;
-			position: relative;
-		}
-
-		.chatSidebar #chatUserList .sidebarMenuGroup > ul > li > a {
-			background-image: url("wcf/icon/arrowRight.svg");
-			background-position: 15px center;
-			background-repeat: no-repeat;
-			background-size: 16px auto;
-		}
-		
-		.chatSidebar #chatUserList .sidebarMenuGroup > ul > li.activeMenuItem > a {
-			background-image: url("wcf/icon/arrowDown.svg");
-		}
-		
-		.chatSidebar > div ul li a {
-			color: #6699CC;
-			display: block;
-			padding: 5px 25px 7px 35px;
-			text-shadow: 0 1px 0 #FFFFFF;
-		}
-		
-		.chatSidebar > div ul li.activeMenuItem {
-			background-color: #FFFFFF;
-			box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-			overflow: hidden;
-			z-index: 110;
-			font-size: 110%;
-		}
-		
-		.chatSidebar > div ul li.activeMenuItem a {
-			color: #336699;
-			font-weight: bold;
-			display: block;
-			padding: 5px 25px 7px 35px;
-			text-shadow: 0 1px 0 #FFFFFF;
-		}
-		
-		.chatSidebar.right > div ul li.activeMenuItem {
-			margin-right: -1px;
-		}
-		
-		.chatSidebar.left > div ul li.activeMenuItem {
-			margin-left: -1px;
-		}
-		
-		.chatSidebar .selectedUser {
-			margin-left: 20px;
-		}
-		
-		.chatUserMenu {
-			display: none;
-		}
-		
-		#chatUserList .sidebarMenuGroup > ul li a {
-			margin-left: 20px;
-		}
-		
-		/*
-		.chatUser.activeMenuItem {
-			margin-bottom: 5px;
-		}
-		*/
-		
 		.ajaxLoad {
-			margin-right: 2px;
+			background-position: right center;
-			float: right;
+			background-repeat: no-repeat;
+			background-image: url({icon}spinner1{/icon});
+		}
+		
+		.bgFix {
+			display: block;
 		}
 	</style>
 </head>
@@ -184,53 +175,58 @@
 	</hgroup>
 </header>
 
-<nav class="tabMenu">
+<div class="tabMenuContainer" data-active="chatBox" data-store="activeTabMenuItem">
-	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
+	<nav class="tabMenu">
-		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a title="{lang}wcf.chat.title{/lang}" href="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</a></li>
+		<ul>
-		<li class="ui-state-default ui-corner-top ui-tabs-selected"><a title="{lang}wcf.chat.protocol{/lang}" href="{link controller="Chat" isRaw="true"}Log{/link}">{lang}wcf.chat.protocol{/lang}</a></li>
+			<li class="ui-state-active"><a href="{link controller="Chat"}{/link}" title="{lang}wcf.chat.title{/lang}">{lang}wcf.chat.title{/lang}</a></li>
+			<li><a href="{link controller="Chat" action="Log"}{/link}" title="{lang}wcf.chat.protocol{/lang}">{lang}wcf.chat.protocol{/lang}</a></li>
 		</ul>
-</nav>
+	</nav>
-<div id="chatbox" class="border tabMenuContent ui-tabs-panel ui-widget-content ui-corner-bottom">
+	
-	<div class="table">
+	<section id="chatBox" class="border tabMenuContent hidden" data-menu-item="chatBox">
 		<div>
-			<div class="first column">
+			<aside id="chatRoomList" class="chatSidebar left">
-				<div class="chatSidebar left">
+				<div>
-					<div id="chatChannelList">
+					<h2>{lang}wcf.chat.rooms{/lang}</h2>
-						<h2 class="menuHeader activeMenuItem">{lang}wcf.chat.rooms{/lang}</h1>
-						<div class="sidebarMenuGroup">
 					<ul>
 					{foreach from=$rooms item='roomListRoom'}
 						<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
-									<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom->getTitle()}</a>
+							<a id="room-{$roomListRoom->roomID}" href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom->getTitle()}</a>
 						</li>
 					{/foreach}
 					</ul>
 				</div>
-					</div>
+			</aside>
-				</div>
+			<aside id="chatUserList" class="chatSidebar right">
-			</div>			
+				<h2>{lang}wcf.chat.users{/lang}</h2>
-			<div class="second column">
-				<div>
-					
-					<div class="border" id="topic"{if !$room->topic|language} style="display: none;"{/if}>
-						{$room->topic|language}
-					</div>
-					<div class="chatMessage border content">
 				<ul>
+				{section name=user start=1 loop=11}
+					<li id="user-{$user}" class="chatUser">
+						<span class="bgFix"><a class="chatUserLink" href="javascript:void(0)">User {$user}</a></span>
+						<ul class="chatUserMenu">
+							<li>
+								<a href="javascript:void(0)">Query</a>
+								<a href="javascript:void(0)">Kick</a>
+								<a href="javascript:void(0)">Ban</a>
+								<a href="{link controller="User" id=$user}{/link}">Profil</a>
+							</li>
 						</ul>
+					</li>
+				{/section}
+				</ul>
+			</aside>
+			<div id="chatRoomContent">
+				<div id="topic" class="border">Dieser Raum ist zum Testen da.</div>
+				<div class="chatMessageConainer border content">
+					<ul></ul>
 				</div>
-					<form style="margin-top: 10px;" id="chatForm" action="index.php?form=Chat" method="post">
+				
-						<div class="table">
+				<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
-							<div>
+					<input type="text" id="chatInput" class="inputText" style="width: 100%" name="text" autocomplete="off" />
-								<div class="column" style="width: 95%;">
+					<input type="image" class="inputImage" alt="Absenden" src="{icon size=M}toRight1{/icon}" />
-									<input type="text" id="chatInput" class="inputText" style="width: 100%" name="text" autocomplete="off" placeholder="Insert message here&hellip;" />
-								</div>
-								<div class="column" style="width: 5%; text-align: center;">
-									<input type="image" class="inputImage" alt="Absenden" src="{icon size=M}toRight1{/icon}" style="height: 100%; margin-left: 5px;" />
-								</div>
-							</div>
-						</div>
 				</form>
+				
+				<div id="chatControls">
 					<div id="smileyList" class="border">
 						<ul class="smilies">
 							{foreach from=$smilies item='smiley'}
@@ -240,34 +236,36 @@
 							{/foreach}
 						</ul>
 					</div>
-				</div>
+					<div id="chatOptions" class="border">
-			</div>			
+						<div class="smallButtons">
-			<div class="third column">
-				<div class="chatSidebar right">
-					<div id="chatUserList">
-						<h2 class="menuHeader activeMenuItem">User</h1>
-						<div class="sidebarMenuGroup">
 							<ul>
-								{section name=user start=0 loop=10}
-								<li id="user-{$user + 1}" class="chatUser">
-									<a class="chatUserLink" href="javascript:void(0)">User {$user + 1}</a>
-									<ul class="chatUserMenu">
 								<li>
-											<a href="javascript:void(0)">Query</a>
+									<a id="chatAutoscrollButton" href="javascript: void(0);">
-											<a href="javascript:void(0)">Kick</a>
+										<img alt="" src="{icon}enabled1{/icon}"> <span>Scrollen</span>
-											<a href="javascript:void(0)">Ban</a>
+									</a>
-											<a href="javascript:void(0)">Profil</a>
+								</li>
+								<li>
+									<a href="javascript: void(0);">
+										<img alt="" src="{icon}disabled1{/icon}"> <span>Benachrichtigen</span>
+									</a>
+								</li>
+								<li>
+									<a href="javascript: void(0)">
+										<img alt="" src="{icon}delete1{/icon}"> <span>Chat leeren</span>
+									</a>
+								</li>
+								<li>
+									<a href="javascript: void(0)">
+										<img alt="" src="{icon}check1{/icon}"> <span>Markieren</span>
+									</a>
 								</li>											
 							</ul>
-								</li>
-								{/section}
-							</ul>
-						</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
+	</section>
 </div>
 
 <script type="text/javascript">

template/chatMessage.tpl

@@ -1 +1 @@
-{literal}<time>{@$formattedTime}</time> {@$formattedUsername}{@$formattedMessage}{/literal}
+{literal}<time>{@$formattedTime}</time> {@$formattedUsername} {@$formattedMessage}{/literal}