Merge remote-tracking branch 'origin/frontendImprovements'

file/js/be.bastelstu.Chat.litcoffee

@@ -35,6 +35,8 @@ exposed by a function if necessary.
 		chatSession = Date.now()
 		errorVisible = false
 
+		lastMessage = null
+
 		remainingFailures = 3
 
 		events =
@@ -411,6 +413,13 @@ Insert the given messages into the chat stream.
 			for message in messages
 				events.newMessage.fire message
 				
+				createNewMessage = yes
+				if  $('.timsChatMessage:last-child .text').is('ul') and lastMessage isnt null and lastMessage.type in [ 0, 7 ]
+					if lastMessage.type is message.type and lastMessage.sender is message.sender and lastMessage.receiver is message.receiver
+						createNewMessage = no
+				
+				if createNewMessage
+					message.isFollowUp = no
 					output = v.messageTemplate.fetch message
 					li = $ '<li></li>'
 					li.addClass 'timsChatMessage'
@@ -420,7 +429,12 @@ Insert the given messages into the chat stream.
 					li.append output
 				
 					li.appendTo $ '#timsChatMessageContainer > ul'
+				else
+					message.isFollowUp = yes
+					output = v.messageTemplate.fetch message
+					$('.timsChatMessage:last-child .text').append $(output).find('.text li:last-child')
 				
+				lastMessage = message
 			$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer').prop('scrollHeight') if $('#timsChatAutoscroll').data('status') is 1
 
 Rebuild the userlist based on the given `users`.

file/style/be.bastelstu.wcf.chat.less

@@ -38,7 +38,7 @@
 	}
 	
 	.timsChatMessageContainer {
-		height: 200px;
+		height: 320px;
 		overflow-y: scroll;
 		overflow-x: hidden;
 		display: none;
@@ -84,40 +84,100 @@
 				}
 				
 				&:nth-child(even) {
+					> .innerMessageContainer.normal .innerMessage {
 						background-color: @wcfContainerAccentBackgroundColor;
+						
+						&:after {
+							border-color: transparent @wcfContainerAccentBackgroundColor;
+						}
+					}
 				}
 				
-				> {
+				> .innerMessageContainer {
-					time, .usernameContainer, .text, .markContainer {
+					padding: 5px 20px 5px 5px;
-						display: table-cell;
+					
-						vertical-align: top;
+					.userAvatar {
-						padding: @wcfGapTiny 0;
+						float: left;
+						margin-left: 16px;
 					}
 					
-					.markContainer {
+					.innerMessage {
-						display: none;
+						margin-left: 46px;
-						padding: 0;
+						padding: 2px 5px 5px;
-					}
 						
 						time {
-						&::before {
+							float: right;
-							content: "[";
+							font-weight: bold;
-						}
-						&::after {
-							content: "]";
 						}
 					}
 					
-					.usernameContainer {
+					&.bubble {
-						text-align: right;
+						.userAvatar {
-						min-width: 100px;
+							margin-left: 0;
-						padding-right: @wcfGapSmall;
+						}
-						white-space: nowrap;
+						
+						.innerMessage {
+							border-width: 1px;
+							border-style: solid;
+							border-color: @wcfContainerBorderColor;
+							border-radius: @wcfContainerBorderRadius;
+							background-color: @wcfContainerBackgroundColor;
+							position: relative;
+									
+							.username {
 								font-weight: bold;
 							}
 							
-					.text {
+							> ul.text {
-						width: 100%;
+								li {
+									.clearfix;
+									border-style: solid;
+									border-width: 0 0 1px 0;
+									border-color: @wcfContainerBorderColor;
+									padding: 3px 0 4px;
+									
+									&:last-child {
+										border-style: none;
+										padding: 3px 0 0 0;
+									}
+									
+									> time {
+										font-weight: normal;
+									}
+								}
+							}
+							
+							&:before {
+								border-color: transparent @wcfContainerBorderColor;
+								border-style: solid;
+								border-width: 6px 6px 6px 0;
+								content: "";
+								display: block;
+								left: -6px;
+								position: absolute;
+								top: 5px;
+								width: 0;
+							}
+							
+							&:after {
+								border-color: transparent @wcfContainerBackgroundColor;;
+								border-style: solid;
+								border-width: 5px 5px 5px 0;
+								content: "";
+								display: block;
+								left: -5px;
+								position: absolute;
+								top: 6px;
+								width: 0;
+							}
+						}
+					}
+					
+					> .markContainer {
+						display: none;
+						position: absolute;
+						right: 0px;
+						top: 6px;
 					}
 				}
 			}

template/chat.tpl

@@ -61,7 +61,7 @@
 		//]]>
 	</script>
 	
-	<style type="text/css">
+	<!--<style type="text/css">
 		/*<![CDATA[*/
 		.timsChatMessage::before {
 			content: "";
@@ -80,7 +80,7 @@
 			content: "\f05a";
 		}
 		/*]]>*/
-	</style>
+	</style>-->
 </head>
 
 <body id="tpl{$templateName|ucfirst}">

template/message.tpl

@@ -1,24 +1,31 @@
 {literal}
-	<time>{@$formattedTime}</time>
+	<div class="innerMessageContainer{if $type == 0 || $type == 7} bubble{/if}">
-	<span class="usernameContainer">
+		<div class="userAvatar framed">
-		<span class="username">{*
+			{if $type == 0 || $type == 7}
-			*}{if $type != 7}{*
+				{@$avatar[32]}
-				*}{@$formattedUsername}{*
+			{else}
-			*}{else}
+				{@$avatar[16]}
-				{if $receiver == WCF.User.userID}
-					{@$formattedUsername}
 			{/if}
+		</div>
+		<div class="innerMessage">
+			<span class="username">
+			{@$formattedUsername}
+			{if $type == 7}
 				<span class="icon icon16 icon-double-angle-right jsTooltip" title="{/literal}{lang}chat.ui.whispers{/lang}{literal}" onclick="be.bastelstu.Chat.insertText('/whisper {if $receiver == WCF.User.userID}{$username.replace("\\", "\\\\").replace("'", "\\'")}{else}{$additionalData.receiverUsername.replace("\\", "\\\\").replace("'", "\\'")}{/if}, ', { append: false });"></span>
-				{if $receiver != WCF.User.userID}
+				{$additionalData.receiverUsername}
-					{$additionalData.receiverUsername}{/if}{*
-				*}{/if}{*
-		*}</span>{*
-		*}{if $receiver != WCF.User.userID}{*
-			*}<span class="separator">{$separator}</span>
 			{/if}
 			</span>
+			<time>{@$formattedTime}</time>
+			{if $type == 0 || $type == 7}
+				<ul>
+					<li class="text">{@$formattedMessage}</li>
+				</ul>
+			{else}
 				<span class="text">{@$formattedMessage}</span>
+			{/if}
+		</div>
 		<span class="markContainer">
 			<input type="checkbox" value="{@$messageID}" />
 		</span>
+	</div>
 {/literal}