Rewrite frontend

With this commit pretty much the whole frontend has been rewritten. This should hopefully fix most of the issues in “exotic” styles. The changes include: - Overall cleanup - Better adaption to the WCF design - Reworked private channels menu - Reworked sidebar (may change later, currently the heights of the elements are hardcoded and not dynamic) - Working user action menu - Fixed auto scrolling - Better visual notifications - This software does not contain any easter eggs - No penguins were harmed in the production of this software Todo: - Fullscreen mode - Some language variables
wbbaddons · Feb 8, 2014 · 92ed075 · 92ed075
1 parent 4d208f8
commit 92ed075
Show file tree

Hide file tree

Showing 8 changed files with 739 additions and 631 deletions.
diff --git a/file/js/be.bastelstu.Chat.litcoffee b/file/js/be.bastelstu.Chat.litcoffee
diff --git a/file/style/be.bastelstu.chat.less b/file/style/be.bastelstu.chat.less
diff --git a/template/__copyright.tpl b/template/__copyright.tpl
@@ -36,10 +36,10 @@
 				<dd>
 					<ul>
 						<li><a href="http://www.wbbaddons.de/user/2020-noone/" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>-noone-</a></li>
-						<li><a href="https://github.com/Gabbid" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>Gabi</a></li>
+						<li>Gabi</li>
 						<li>Alexandra Glass</li>
 						<li><a href="https://github.com/Leon-" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}>Stefan Hahn</a></li>
-						<li><a href="https://kittblog.com/" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>Matthias Kittsteiner</a></li>
+						<li><a href="http://kittmedia.com/" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>Matthias Kittsteiner</a></li>
 						<li><a href="http://www.wbbaddons.de" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>Martin Schwendowius</a></li>
 						<li><a href="http://www.cls-design.com/" class="externalURL" {if EXTERNAL_LINK_TARGET_BLANK}target="_blank"{/if}>Tom</a></li>
 					</ul>

diff --git a/template/chat.tpl b/template/chat.tpl
@@ -10,39 +10,44 @@
 			(function ($, window) {
 				$(function(){
 					WCF.Language.addObject({
-						'chat.general.query': '{lang}chat.general.query{/lang}',
-						'chat.general.kick': '{lang}chat.general.kick{/lang}',
 						'chat.general.ban': '{lang}chat.general.ban{/lang}',
-						'chat.general.profile': '{lang}chat.general.profile{/lang}',
-						'chat.general.notify.title': '{lang}chat.general.notify.title{/lang}',
-						'chat.general.privateChannelTopic': '{lang}chat.general.privateChannelTopic{/lang}',
 						'chat.general.closePrivateChannel': '{lang}chat.general.closePrivateChannel{/lang}',
 						'chat.general.closeTopic': '{lang}chat.general.closeTopic{/lang}',
-						'chat.error.onMessageLoad': '{@"chat.error.onMessageLoad"|language|encodeJS}',
+						'chat.general.notify.title': '{lang}chat.general.notify.title{/lang}',
+						'chat.general.privateChannelTopic': '{lang}chat.general.privateChannelTopic{/lang}',
+						'chat.general.profile': '{lang}chat.general.profile{/lang}',
+						'chat.general.query': '{lang}chat.general.query{/lang}',
+						'chat.general.whisper': '{lang}chat.general.whisper{/lang}',
 						'chat.error.duplicateTab': '{lang}chat.error.duplicateTab{/lang}',
 						'chat.error.join': '{lang}chat.error.join{/lang}',
+						'chat.error.onMessageLoad': '{@"chat.error.onMessageLoad"|language|encodeJS}',
 						'chat.error.reload': '{lang}chat.error.reload{/lang}',
+						'chat.message.{$messageTypes[TYPE_ATTACHMENT]}': '{lang}chat.message.{$messageTypes[TYPE_ATTACHMENT]}{/lang}',
+						'wcf.attachment.insert': '{lang}wcf.attachment.insert{/lang}',
+						'wcf.attachment.delete.sure': '{lang}wcf.attachment.delete.sure{/lang}',
 						'wcf.attachment.upload.error.invalidExtension': '{lang}wcf.attachment.upload.error.invalidExtension{/lang}',
 						'wcf.attachment.upload.error.tooLarge': '{lang}wcf.attachment.upload.error.tooLarge{/lang}',
 						'wcf.attachment.upload.error.reachedLimit': '{lang}wcf.attachment.upload.error.reachedLimit{/lang}',
 						'wcf.attachment.upload.error.reachedRemainingLimit': '{lang}wcf.attachment.upload.error.reachedRemainingLimit{/lang}',
 						'wcf.attachment.upload.error.uploadFailed': '{lang}wcf.attachment.upload.error.uploadFailed{/lang}',
-						'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}',
-						'wcf.attachment.insert': '{lang}wcf.attachment.insert{/lang}',
-						'wcf.attachment.delete.sure': '{lang}wcf.attachment.delete.sure{/lang}',
-						'chat.message.{$messageTypes[TYPE_ATTACHMENT]}': '{lang}chat.message.{$messageTypes[TYPE_ATTACHMENT]}{/lang}'
+						'wcf.global.button.upload': '{lang}wcf.global.button.upload{/lang}'
 					});
 					
 					// Boot the chat
-					{if MODULE_SMILEY}WCF.TabMenu.init();{/if}
 					{if MODULE_ATTACHMENT && $__wcf->session->getPermission('user.chat.canUploadAttachment')}
 						new be.bastelstu.Chat.Attachment();
 						new be.bastelstu.Chat.Action.Delete('wcf\\data\\attachment\\AttachmentAction', '#timsChatUploadDropdownMenu > li');
 					{/if}
-					new WCF.Message.Smilies();
+					
+					WCF.TabMenu.init();
+					
+					{if MODULE_SMILEY}
+						new WCF.Message.Smilies();
+					{/if}
 					
 					{capture assign='messageTemplate'}{include application='chat' file='message'}{/capture}
 					{capture assign='userTemplate'}{include application='chat' file='userListUser'}{/capture}
+					{capture assign='userMenuTemplate'}{include application='chat' file='userListUserMenu'}{/capture}
 					
 					var config = {
 						reloadTime: {@CHAT_RELOADTIME},
@@ -58,12 +63,13 @@
 						config,
 						new WCF.Template('{literal}{if $newMessageCount}({#$newMessageCount}) {/if}{$title} - {/literal}{"chat.general.title"|language|encodeJS} - {PAGE_TITLE|language|encodeJS}'),
 						new WCF.Template('{@$messageTemplate|encodeJS}'),
-						new WCF.Template('{@$userTemplate|encodeJS}')
+						new WCF.Template('{@$userTemplate|encodeJS}'),
+						new WCF.Template('{@$userMenuTemplate|encodeJS}')
 					);
 					
 					{event name='afterInit'}
 					
-					$('#timsChatCopyright').click(function (event) {
+					$('#timsChatCopyright a').click(function (event) {
 						event.preventDefault();
 						if (!$.wcfIsset('timsChatCopyrightDialog')) $('<div id="timsChatCopyrightDialog"></div>').appendTo('body');
 						$('#timsChatCopyrightDialog').load('{link application="chat" controller="Copyright"}{/link}').wcfDialog({
@@ -80,78 +86,118 @@
 	{capture assign='sidebar'}{include application='chat' file='sidebar'}{/capture}
 	{include file='header' sandbox=false sidebarOrientation='right'}
 	
-	<div id="timsChatTopic" class="marginTop container{if $room->topic|language === ''} empty{/if}">
-		<span class="icon icon16 icon-remove jsTopicCloser jsTooltip" title="{lang}chat.general.closeTopic{/lang}"></span>
-		<span class="topic">{$room->topic|language}</span>
-	</div>
-	
-	<div id="privateChannelsMenu">
-		<ul>
-			<li id="privateChannel0" class="privateChannel active" data-private-channel-id="0">
-				<span class="userAvatar framed small">
-					<span class="icon icon16 icon-comment-alt jsTooltip" title="{lang}chat.general.room{/lang}"></span>
-				</span>
-				<span class="userAvatar framed large">
-					<span class="icon icon32 icon-comment-alt jsTooltip" title="{lang}chat.general.room{/lang}"></span>
-				</span>
-			</li>
-		</ul>
-	</div>
-	
-	<div id="timsChatMessageContainer0" class="timsChatMessageContainer marginTop container active" data-user-id="0">
-		<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
-		<ul>
-		</ul>
-	</div>
-	
-	<form id="timsChatForm" action="{link application='chat' controller='Chat' action='Send'}{/link}" method="post">
-		<fieldset>
-			<dl class="wide" id="timsChatInputContainer">
-				<dt>
-					{lang}chat.general.message{/lang}
-				</dt>
-				<dd>
-					<input id="timsChatInput" accesskey="w" type="text" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" placeholder="{lang}chat.general.submit.default{/lang}" />
-					<small class="innerError" style="display: none;">Lorem ipsum dolor sit amet.</small>
-				</dd>
-			</dl>
-		</fieldset>
-		<button type="submit" class="invisible" accesskey="s"></button>
-	</form>
-
-	{if MODULE_SMILEY && $smileyCategories|count}
-		{include file='messageFormSmilies' wysiwygSelector=''}
-	{/if}
-	
-	<nav id="timsChatOptions" class="marginTop jsMobileNavigation buttonGroupNavigation">
-		<span class="invisible">{lang}chat.general.controls{/lang}</span>
-		<ul class="smallButtons buttonGroup">
-			<li><a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" title="{lang}chat.general.scroll{/lang}" data-status="1"><span class="icon icon16 icon-arrow-down"></span><span class="invisible">{lang}chat.general.scroll{/lang}</span></a></li>{*
-			
-			*}<li><a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" title="{lang}chat.general.fullscreen{/lang}" data-status="0"><span class="icon icon16 icon-fullscreen"></span><span class="invisible">{lang}chat.general.fullscreen{/lang}</span></a></li>{*
-			
-			*}<li><a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" title="{lang}chat.general.notify{/lang}" data-status="0"><span class="icon icon16 icon-bell-alt"></span><span class="invisible">{lang}chat.general.notify{/lang}</span></a></li>{*
-			
-			*}<li{if !MODULE_SMILEY || !$smileyCategories|count} style="display: none;"{/if}><a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" title="{lang}chat.general.smilies{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}"><span class="icon icon16 icon-smile"></span><span class="invisible">{lang}chat.general.smilies{/lang}</span></a></li>{*
-			
-			*}{if MODULE_ATTACHMENT && $__wcf->session->getPermission('user.chat.canUploadAttachment')}{*
-			*}<li id="timsChatUploadContainer" class="dropdown" data-max-size="{$attachmentHandler->getMaxSize()}">
-				<a id="timsChatUpload" class="dropdownToggle button jsTooltip" title="{lang}wcf.attachment.attachments{/lang}" data-toggle="timsChatUploadContainer">
-						<span class="icon icon16 icon-paper-clip"></span>
-						<span class="invisible">{lang}wcf.attachment.attachments{/lang}</span>
-				</a>
-				<ul id="timsChatUploadDropdownMenu" class="dropdownMenu">
-					<li class="uploadButton" style="margin-top: 0;">
-						<span><label for="timsChatUploadInput">{lang}wcf.global.button.upload{/lang}</label></span>
+	<div class="clearfix">
+		<div id="timsChatTopic" class="container containerPadding marginTop{if $room->topic|language === ''} empty{/if}">
+			<span id="timsChatTopicCloser" class="icon icon16 icon-remove jsTooltip" title="{lang}chat.general.closeTopic{/lang}"></span>
+			<span class="topic">{$room->topic|language}</span>
+		</div>
+		
+		<div id="timsChatMessageTabMenu" class="tabMenuContainer singleTab" data-active="timsChatMessageContainer0">
+			<nav class="tabMenu">
+				<ul>
+					<li>
+						<a id="timsChatMessageTabMenuAnchor0" href="{$__wcf->getAnchor('timsChatMessageContainer0')}" class="timsChatMessageTabMenuAnchor" data-user-id="0">
+							<span class="icon icon16 icon-warning-sign notifyIcon"></span>{*
+							*}<span class="userAvatar framed">
+								<span class="icon icon16 icon-group"></span>
+							</span>{*
+							*}<span>{$room}</span>
+						</a>
 					</li>
 				</ul>
-			</li>{/if}{*
+			</nav>
 			
-			*}<li><a id="timsChatClear" class="button jsTooltip" title="{lang}chat.general.clear{/lang}"><span class="icon icon16 icon-remove"></span><span class="invisible">{lang}chat.general.clear{/lang}</span></a></li>{*
+			<div id="timsChatMessageContainer0" class="tabMenuContent timsChatMessageContainer container containerPadding active" data-user-id="0">
+				<p class="error noJsOnly" style="display: none;">{lang}chat.general.noJs{/lang}</p>
+				<ul></ul>
+			</div>
+		</div>
+		
+		<form id="timsChatForm" action="{link application='chat' controller='Chat' action='Send'}{/link}" method="post">
+			<fieldset>
+				<dl class="wide" id="timsChatInputContainer">
+					<dt>
+						{lang}chat.general.message{/lang}
+					</dt>
+					<dd>
+						<input id="timsChatInput" accesskey="w" type="text" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" placeholder="{lang}chat.general.submit.default{/lang}" />
+						<small class="innerError" style="display: none;">Lorem ipsum dolor sit amet.</small>
+					</dd>
+				</dl>
+			</fieldset>
+			<button type="submit" class="marginTop invisible" accesskey="s">{lang}wcf.global.button.submit{/lang}</button>
+		</form>
+
+		{if MODULE_SMILEY && $smileyCategories|count}
+			{include file='messageFormSmilies' wysiwygSelector=''}
+		{/if}
+		
+		<div id="timsChatOptions" class="marginTop">
+			<span id="timsChatSmileyPopupButton" class="button smallButtons">
+				<span class="icon icon16 icon-smile"></span>
+				<span>{lang}chat.general.smilies{/lang}</span>
+			</span>
 			
-			*}<li><a id="timsChatMark" class="button timsChatToggle jsTooltip" title="{lang}chat.general.mark{/lang}" data-status="0"><span class="icon icon16 icon-check"></span><span class="invisible">{lang}chat.general.mark{/lang}</span></a></li>
-		</ul>
-	</nav>
+			<nav class="jsMobileNavigation buttonGroupNavigation">
+				<ul class="buttonGroup">
+					<li>
+						<a id="timsChatAutoscroll" accesskey="d" class="button active timsChatToggle jsTooltip" title="{lang}chat.general.scroll{/lang}" data-status="1">
+							<span class="icon icon16 icon-arrow-down"></span>
+							<span class="invisible">{lang}chat.general.scroll{/lang}</span>
+						</a>
+					</li>
+					<li>
+						<a id="timsChatFullscreen" accesskey="f" class="button timsChatToggle jsTooltip" title="{lang}chat.general.fullscreen{/lang}" data-status="0">
+								<span class="icon icon16 icon-fullscreen"></span>
+								<span class="invisible">{lang}chat.general.fullscreen{/lang}</span>
+						</a>
+					</li>
+					<li>
+						<a id="timsChatNotify" accesskey="n" class="button timsChatToggle jsTooltip" title="{lang}chat.general.notify{/lang}" data-status="0">
+							<span class="icon icon16 icon-bell-alt"></span>
+							<span class="invisible">{lang}chat.general.notify{/lang}</span>
+						</a>
+					</li>
+					
+					{if MODULE_SMILEY && $smileyCategories|count}
+					<li>
+						<a id="timsChatSmilies" accesskey="e" class="button{if ENABLE_SMILIES_DEFAULT_VALUE} active{/if} timsChatToggle jsTooltip" title="{lang}chat.general.smilies{/lang}" data-status="{@ENABLE_SMILIES_DEFAULT_VALUE}">
+							<span class="icon icon16 icon-smile"></span>
+							<span class="invisible">{lang}chat.general.smilies{/lang}</span>
+						</a>
+					</li>
+					{/if}
+					
+					{if MODULE_ATTACHMENT && $__wcf->session->getPermission('user.chat.canUploadAttachment')}
+						<li id="timsChatUploadContainer" class="dropdown" data-max-size="{$attachmentHandler->getMaxSize()}">
+							<a id="timsChatUpload" class="dropdownToggle button jsTooltip" title="{lang}wcf.attachment.attachments{/lang}" data-toggle="timsChatUploadContainer">
+									<span class="icon icon16 icon-paper-clip"></span>
+									<span class="invisible">{lang}wcf.attachment.attachments{/lang}</span>
+							</a>
+							<ul id="timsChatUploadDropdownMenu" class="dropdownMenu">
+								<li class="uploadButton" style="margin-top: 0;">
+									<span><label for="timsChatUploadInput" class="pointer">{lang}wcf.global.button.upload{/lang}</label></span>
+								</li>
+							</ul>
+						</li>
+					{/if}
+					
+					<li>
+						<a id="timsChatClear" class="button jsTooltip" title="{lang}chat.general.clear{/lang}">
+							<span class="icon icon16 icon-remove"></span>
+							<span class="invisible">{lang}chat.general.clear{/lang}</span>
+						</a>
+					</li>
+					<li>
+						<a id="timsChatMark" class="button timsChatToggle jsTooltip" title="{lang}chat.general.mark{/lang}" data-status="0">
+							<span class="icon icon16 icon-check"></span>
+							<span class="invisible">{lang}chat.general.mark{/lang}</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
 	
 	{include file='footer' sandbox=false}
 </body>

diff --git a/template/message.tpl b/template/message.tpl
@@ -1,12 +1,12 @@
 {literal}
-	{if $message.type == $messageTypes.LEAVE || $message.type == $messageTypes.JOIN}
-		<div class="messageIcon">
-			<span class="icon icon16 icon-{if $message.type == $messageTypes.LEAVE}signout{elseif $message.type == $messageTypes.JOIN}signin{/if}"></span>
+	{if $message.type == $messageTypes.JOIN || $message.type == $messageTypes.LEAVE}
+		<div class="timsChatMessageIcon">
+			<span class="icon icon16 icon-{if $message.type == $messageTypes.JOIN}signin{else}signout{/if}"></span>
 		</div>
 	{/if}
-	<div class="innerMessageContainer{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.INFORMATION || $message.type == $messageTypes.ATTACHMENT} bubble{/if}{if $message.type == $messageTypes.WHISPER && $message.sender != $__wcf.User.userID} right{/if}">
-		<div class="avatarContainer">
-			<div class="userAvatar{if $message.type != $messageTypes.INFORMATION} framed{/if}">
+	<div class="timsChatInnerMessageContainer{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.INFORMATION || $message.type == $messageTypes.ATTACHMENT} bubble{/if}{if $message.type == $messageTypes.WHISPER && $message.sender != $__wcf.User.userID} right{/if}">
+		<div class="timsChatAvatarContainer">
+			<div class="userAvatar framed">
 				{if $message.type != $messageTypes.INFORMATION}
 					{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
 						{@$message.avatar[32]}
@@ -18,46 +18,38 @@
 				{/if}
 			</div>
 			{if $message.type == $messageTypes.ATTACHMENT}
-				<small class="framed avatarExtra">
+				<small class="framed timsChatAvatarExtraIcon">
 					<span class="icon icon16 icon-paperclip"></span>
 				</small>
 			{/if}
 		</div>
-		<div class="innerMessage">
-			<span class="username">
-			{if ($message.type == $messageTypes.WHISPER && $message.sender == WCF.User.userID) || $message.type != $messageTypes.WHISPER}
+		<div class="timsChatInnerMessage">
+			<span class="timsChatUsernameContainer">
 				{@$message.formattedUsername}
-			{else}
-				{$message.additionalData.receiverUsername}
-			{/if}
 
-			{if $message.type == $messageTypes.WHISPER}
-				<span class="icon icon16 icon-double-angle-{if $message.sender == WCF.User.userID}right{else}left{/if} jsTooltip" title="{/literal}{lang}chat.ui.whispers{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $message.receiver == WCF.User.userID}{$message.username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$message.additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span>
-				{if ($message.type == $messageTypes.WHISPER && $message.sender == WCF.User.userID) || $message.type != $messageTypes.WHISPER}
-					{$message.additionalData.receiverUsername}
-				{else}
-					{@$message.formattedUsername}
+				{if $message.type == $messageTypes.WHISPER}
+					<span class="icon icon16 icon-double-angle-right jsTooltip" title="{/literal}{lang}chat.general.whisper{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $message.receiver == WCF.User.userID}{$message.username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$message.additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span>
+					<span class="reciever">{$message.additionalData.receiverUsername}</span>
 				{/if}
-			{/if}
 			</span>
 
 			<time>{@$message.formattedTime}</time>
 
 			{if $message.type == $messageTypes.NORMAL || $message.type == $messageTypes.WHISPER || $message.type == $messageTypes.ATTACHMENT}
 				{if $message.type == $messageTypes.ATTACHMENT}<span>{lang}chat.message.{$messageTypes.ATTACHMENT}{/lang}</span>{/if}
-				<ul class="text">
+				<ul class="timsChatText">
 					<li>
 						{if $message.isFollowUp} <time>{@$message.formattedTime}</time>{/if}
 						{@$message.formattedMessage}
 					</li>
 				</ul>
 			{elseif $message.type == $messageTypes.INFORMATION}
-				<div class="text">{@$message.formattedMessage}</div>
+				<div class="timsChatText">{@$message.formattedMessage}</div>
 			{else}
-				<span class="text">{@$message.formattedMessage}</span>
+				<span class="timsChatText">{@$message.formattedMessage}</span>
 			{/if}
 		</div>
-		<span class="markContainer">
+		<span class="timsChatMarkContainer">
 			<input type="checkbox" value="{@$message.messageID}" />
 		</span>
 	</div>