fixes #1338

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

@@ -91,37 +91,57 @@ define([
 			let container = $('<div class="keyboard"></div>')
 				.appendTo(this.el);
 
-			let controls = ['|', 'caps', 'space', 'backspace', 'enter'];
-
 			let keyboard = {
-				0: '1234567890|qwertyuiop|asdfghjkl|zxcvbnm',
-				1: '!@#$%^&*()|QWERTYUIOP|ASDFGHJKL|ZXCVBNM',
-				2: '!@#$%^&*()|     {}[]\\|`-=_+;\':"|~,./<>?'
-			}[this.kbUpper].split('').concat(controls);
-
-			keyboard
-				.forEach(k => {
-					if (k === '|') {
-						$('<div class="newline"></div>')
-							.appendTo(container);
-
-						return;	
-					}
+				0: 'qwertyuiop|asdfghjkl|zxcvbnm',
+				1: 'QWERTYUIOP|ASDFGHJKL|ZXCVBNM',
+				2: '1234567890|@#&*-+=()|_$"\';/'
+			}[this.kbUpper].split('');
+
+			//Hacky: Insert control characters in correct positions
+			//Backspace goes after 'm'
+			if (this.kbUpper === 0) {
+				keyboard.splice(keyboard.indexOf('z'), 0, 'caps');
+				keyboard.splice(keyboard.indexOf('m') + 1, 0, '<<');
+			} else if (this.kbUpper === 1) {
+				keyboard.splice(keyboard.indexOf('Z'), 0, 'caps');
+				keyboard.splice(keyboard.indexOf('M') + 1, 0, '<<');
+			} else if (this.kbUpper === 2) 
+				keyboard.splice(keyboard.indexOf('/') + 1, 0, '<<');
+
+			keyboard.push(...['|', '123', ',', 'space', '.', 'send']);
+
+			let row = 0;
+			keyboard.forEach(k => {
+				if (k === '|') {
+					row++;
+
+					const postGapCount = row === 4 ? 0 : row - 1;
+					for (let i = 0; i < postGapCount; i++) 
+						$('<div class="gap" />').appendTo(container);
+					
+					$('<div class="newline" />').appendTo(container);
+					
+					const preGapCount = row === 3 ? 0 : row;
+					for (let i = 0; i < preGapCount; i++) 
+						$('<div class="gap" />').appendTo(container);
+
+					return;	
+				}
 
-					let className = (k.match(/[a-z]/i) || k.length > 1) ? 'key' : 'key special';
-					if (k === ' ') {
-						k = '.';
-						className = 'key hidden';
-					}
+				let className = (k.length === 1) ? 'key' : 'key special';
+				if (k === ' ') {
+					k = '.';
+					className = 'key hidden';
+				}
 
-					className += ' ' + k;
+				className += ' ' + k;
 
-					let elKey = $(`<div class="${className}">${k}</div>`)
-						.appendTo(container);
+				let elKey = $(`<div class="${className}">${k}</div>`)
+					.appendTo(container);
 
-					if (!className.includes('hidden')) 	
-						elKey.on('click', this.clickKey.bind(this, k));
-				});
+				if (!className.includes('hidden')) 	
+					elKey.on('click', this.clickKey.bind(this, k));
+			});
 		},
 
 		clickKey: function (key) {
@@ -131,7 +151,12 @@ define([
 
 			const handler = {
 				caps: () => {
-					this.kbUpper = (this.kbUpper + 1) % 3;
+					this.kbUpper = (this.kbUpper + 1) % 2;
+					this.renderKeyboard();
+				},
+
+				123: () => {
+					this.kbUpper = (this.kbUpper === 2) ? 0 : 2;
 					this.renderKeyboard();
 				},
 
@@ -139,12 +164,12 @@ define([
 					this.clickKey(' ');
 				},
 
-				backspace: () => {
+				'<<': () => {
 					elInput.val(elInput.val().slice(0, -1));
 					this.find('.input').html(elInput.val());
 				},
 
-				enter: () => {
+				send: () => {
 					this.sendChat({
 						which: 13
 					});

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

@@ -1,5 +1,4 @@
 @import "../../../css/colors.less";
-
 @pad: 8px;
 @btnSize: 64px;
 
@@ -7,10 +6,8 @@
 	position: absolute;
 	left: 10px;
 	bottom: 10px;
-
 	width: 480px;
 	padding: @pad;
-
 	pointer-events: none;
 
 	.input {
@@ -28,6 +25,7 @@
 			&.time {
 				display: none;
 			}
+
 		}
 
 		.filters {
@@ -42,13 +40,16 @@
 			.list-message {
 				filter: none;
 			}
+
 		}
+
 	}
 
 	&.active {
 		.list-message {
 			opacity: 1 !important;
 		}
+
 	}
 
 	.filters {
@@ -79,8 +80,11 @@
 					background-color: @blackA;
 					color: @grayB;
 				}
+
 			}
+
 		}
+
 	}
 
 	.list {
@@ -93,18 +97,14 @@
 			width: 100%;
 			padding: 5px 10px;
 			color: white;
-			filter:
-				drop-shadow(0px -2px 0px @blackD)
-				drop-shadow(0px 2px 0px @blackD)
-				drop-shadow(2px 0px 0px @blackD)
-				drop-shadow(-2px 0px 0px @blackD);
-
-			-moz-filter:
-				drop-shadow(0px -2px 0px @blackD)
-				drop-shadow(0px 2px 0px @blackD)
-				drop-shadow(2px 0px 0px @blackD)
-				drop-shadow(-2px 0px 0px @blackD);
-
+			filter: drop-shadow(0px -2px 0px @blackD)
+			drop-shadow(0px 2px 0px @blackD)
+			drop-shadow(2px 0px 0px @blackD)
+			drop-shadow(-2px 0px 0px @blackD);
+			-moz-filter: drop-shadow(0px -2px 0px @blackD)
+			drop-shadow(0px 2px 0px @blackD)
+			drop-shadow(2px 0px 0px @blackD)
+			drop-shadow(-2px 0px 0px @blackD);
 			word-wrap: break-word;
 			line-height: 18px;
 
@@ -120,7 +120,8 @@
 				color: @greenB;
 			}
 
-			a, &.q2 {
+			a,
+			&.q2 {
 				color: @blueB;
 			}
 
@@ -147,12 +148,25 @@
 			&.color-tealC {
 				color: @tealC;
 			}
+
+		}
+
+		&.rep .rep {
+			display: block;
+		}
+
+		&.chat .chat {
+			display: block;
+		}
+
+		&.info .info {
+			display: block;
+		}
+
+		&.loot .loot {
+			display: block;
 		}
 
-		&.rep .rep { display: block; }
-		&.chat .chat { display: block; }
-		&.info .info { display: block; }
-		&.loot .loot { display: block; }
 	}
 
 	.el {
@@ -168,27 +182,24 @@
 			background-color: transparent;
 			text-align: left;
 			padding: 5px 10px;
-
-			filter:
-				drop-shadow(0px -2px 0px @blackD)
-				drop-shadow(0px 2px 0px @blackD)
-				drop-shadow(2px 0px 0px @blackD)
-				drop-shadow(-2px 0px 0px @blackD);
-
-			-moz-filter:
-				drop-shadow(0px -2px 0px @blackD)
-				drop-shadow(0px 2px 0px @blackD)
-				drop-shadow(2px 0px 0px @blackD)
-				drop-shadow(-2px 0px 0px @blackD);
+			filter: drop-shadow(0px -2px 0px @blackD)
+			drop-shadow(0px 2px 0px @blackD)
+			drop-shadow(2px 0px 0px @blackD)
+			drop-shadow(-2px 0px 0px @blackD);
+			-moz-filter: drop-shadow(0px -2px 0px @blackD)
+			drop-shadow(0px 2px 0px @blackD)
+			drop-shadow(2px 0px 0px @blackD)
+			drop-shadow(-2px 0px 0px @blackD);
 		}
 
 		width: 100%;
 		color: @white;
 	}
+
 }
 
 .mobile .uiMessages {
-	padding: 10px 0px;
+	padding: 0px;
 	pointer-events: all;
 
 	.btnClose.active {
@@ -204,6 +215,8 @@
 
 	.filters {
 		margin-bottom: 0px;
+		flex-shrink: 0;
+		background-color: @darkGray;
 	}
 
 	.list {
@@ -223,12 +236,16 @@
 
 		.input {
 			display: block;
+			height: 26px;
+			flex-shrink: 0;
 		}
 
 		.el.textbox:not(.input) {
-			&.message, &.time {
+			&.message,
+			&.time {
 				display: none;
 			}
+
 		}
 
 		.keyboard {
@@ -238,7 +255,8 @@
 			background-color: @blackC;
 			justify-content: center;
 			align-items: center;
-			height: 292px;
+			height: 128px;
+			flex-shrink: 0;
 
 			.key {
 				flex: 1;
@@ -246,9 +264,6 @@
 				color: @white;
 				padding: 8px 10px;
 				text-align: center;
-				border-top: 2px solid #373041;
-				border-left: 1px solid #373041;
-				border-right: 1px solid #373041;
 
 				&.special {
 					color: @orange;
@@ -261,12 +276,20 @@
 				&.space {
 					flex: 5;
 				}
+
 			}
 
 			.newline {
 				width: 100%;
 			}
+
+			.gap {
+				width: 5%;
+				flex-shrink: 0;
+			}
+
 		}
+
 	}
 
 	&:not(.typing) {
@@ -292,5 +315,7 @@
 		> * {
 			display: none;
 		}
+
 	}
+
 }