Merge branch '1848-chat-border' into 'master'

Separate chat and chat filters border shadow

Closes #1848

See merge request Isleward/isleward!589

src/client/ui/templates/messages/messages.js

@@ -296,11 +296,13 @@ define([
 			input.resetKeys();
 
 			this.el.removeClass('typing');
+			this.el.find('.main').removeClass('hasBorderShadow');
 
 			let textbox = this.find('input');
 
 			if (show) {
 				this.el.addClass('typing');
+				this.el.find('.main').addClass('hasBorderShadow');
 
 				if (!config.rememberChatChannel) {
 					this.currentChannel = 'global';

src/client/ui/templates/messages/styles.less

@@ -222,7 +222,6 @@
 	}
 
 	&.typing {
-		box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
 		pointer-events: all;
 
 		.filters {

src/client/ui/templates/messages/template.html

@@ -1,20 +1,22 @@
 <div class="uiMessages active">
 	<div class="filters">
-		<div class="btn filter active" filter="info">info</div>
-		<div class="btn filter active" filter="rep">reputation</div>
-		<div class="btn filter active" filter="chat">players</div>
-		<div class="btn filter active" filter="loot">loot</div>
+		<div class="btn filter active hasBorderShadow" filter="info">info</div>
+		<div class="btn filter active hasBorderShadow" filter="rep">reputation</div>
+		<div class="btn filter active hasBorderShadow" filter="chat">players</div>
+		<div class="btn filter active hasBorderShadow" filter="loot">loot</div>
 	</div>
-	<div class="list rep chat info loot"></div>
-	<div class="bottom">
-		<div class="channelPicker"></div>
-		<input type="text" class="el textbox message">
-		<div class="input el textbox message"></div>
-	</div>
-	<div class="bottom time"></div>
-	<div class="bottom channelOptions">
-		<div class="option">global</div>
-		<div class="option">party</div>
-		<div class="option">direct</div>
+	<div class="main">
+		<div class="list rep chat info loot"></div>
+		<div class="bottom">
+			<div class="channelPicker"></div>
+			<input type="text" class="el textbox message">
+			<div class="input el textbox message"></div>
+		</div>
+		<div class="bottom time"></div>
+		<div class="bottom channelOptions">
+			<div class="option">global</div>
+			<div class="option">party</div>
+			<div class="option">direct</div>
+		</div>
 	</div>
 </div>

src/client/ui/templates/messages/tplTab.html

@@ -1 +1 @@
-<div class="filter active" filter="filterName"></div>
+<div class="filter active hasBorderShadow" filter="filterName"></div>