worked on chat for #871

src/client/ui/templates/menu/menu.js

@@ -50,8 +50,9 @@ define([
 			}
 		},
 
-		toggleButtons: function () {
+		toggleButtons: function (e) {
 			this.el.toggleClass('active');
+			e.stopPropagation();
 		}
 	};
 });

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

@@ -37,9 +37,21 @@ define([
 			this.onEvent('onGetCustomChatChannels', this.onGetCustomChatChannels.bind(this));
 			this.onEvent('onGetBlockedPlayers', this.onGetBlockedPlayers.bind(this));
 
+			this
+				.find('.filter:not(.channel):not(.btn)')
+				.on('mouseover', this.onFilterHover.bind(this, true))
+				.on('mouseleave', this.onFilterHover.bind(this, false))
+				.on('click', this.onClickFilter.bind(this));
+
 			if (isMobile) {
-				this.on('click', this.toggle(true));
+				this.el.on('click', this.toggle.bind(this, true));
 				this.renderKeyboard();
+
+				$(tplTab)
+					.appendTo(this.find('.filters'))
+					.addClass('btnClose')
+					.html('x')
+					.on('click', this.toggle.bind(this, false, true));
 			} else {
 				this.find('input')
 					.on('keydown', this.sendChat.bind(this))
@@ -47,12 +59,6 @@ define([
 					.on('blur', this.toggle.bind(this, false, true));
 			}
 
-			this
-				.find('.filter:not(.channel)')
-				.on('mouseover', this.onFilterHover.bind(this, true))
-				.on('mouseleave', this.onFilterHover.bind(this, false))
-				.on('click', this.onClickFilter.bind(this));
-
 			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
 			this.onEvent('onKeyUp', this.onKeyUp.bind(this));
 		},
@@ -81,7 +87,7 @@ define([
 			let container = $('<div class="keyboard"></div>')
 				.appendTo(this.el);
 
-			'|1234567890|qwertyuiop|asdfghjkl|zxcvbnm>|'	
+			'1234567890|qwertyuiop|asdfghjkl|zxcvbnm>'	
 				.split('')
 				.forEach(k => {
 					if (k === '|') {
@@ -98,18 +104,23 @@ define([
 		},
 
 		clickKey: function (key) {
+			window.navigator.vibrate(20);
+
 			if (key === '>') {
 				this.sendChat({
 					which: 13
 				});
+				this.find('.input').html('');
+				this.find('input').val('');
+
 				return;
 			}
 
-			let input = this.find('input');
-			input.val(input.val() + key);
+			let elInput = this.find('input');
+			elInput.val(elInput.val() + key);
 			this.checkChatLength();
 
-			this.find('.input').html(input.val());
+			this.find('.input').html(elInput.val());
 		},
 
 		checkChatLength: function () {
@@ -277,7 +288,7 @@ define([
 			events.emit('onShowItemTooltip', item, ttPos, true, true);
 		},
 
-		toggle: function (show, isFake) {
+		toggle: function (show, isFake, e) {
 			if ((isFake) && (this.hoverFilter))
 				return;
 
@@ -293,6 +304,9 @@ define([
 				this.find('.list').scrollTop(9999999);
 			} else 
 				textbox.val('');
+
+			if (e)
+				e.stopPropagation();
 		},
 
 		sendChat: function (e) {

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

@@ -184,18 +184,38 @@
 }
 
 .mobile .uiMessages {
-	z-index: 999999999;
+	padding: 0px;
+	pointer-events: all;
+
+	.btnClose.active {
+		float: right;
+		margin-right: 0px;
+		padding: 5px 20px;
+		color: @redA;
+	}
 
 	input {
 		display: none;
 	}
 
+	.filters {
+		margin-bottom: 0px;
+	}
+
+	.list {
+		height: 100%;
+		max-height: 100%;
+	}
+
 	&.typing {
 		left: 0px;
 		top: 0px;
 		width: 100%;
 		height: 100%;
 		background-color: fade(@darkGray, 90%);
+		display: flex;
+		flex-direction: column;
+		z-index: 999999999;
 
 		.input {
 			display: block;
@@ -212,11 +232,9 @@
 			flex-direction: row;
 			flex-wrap: wrap;
 			background-color: @blackB;
-			position: absolute;
-			bottom: 10px;
 			justify-content: center;
 			align-items: center;
-			padding: 10px;
+			height: 224px;
 
 			.key {
 				flex: 1;
@@ -239,6 +257,7 @@
 		bottom: auto;
 		width: @btnSize;
 		height: @btnSize;
+		background-color: fade(@darkGray, 90%);
 
 		&:after {
 			content: '';
@@ -246,7 +265,7 @@
 			left: 0px;
 			top: 0px;
 			background: url('../../../images/uiIcons.png');
-			background-position: -448px -64px;
+			background-position: -0px -128px;
 			width: @btnSize;
 			height: @btnSize;
 		}
@@ -255,4 +274,4 @@
 			display: none;
 		}
 	}
-}
+}