Merge pull request #2337 from thelounge/xpaw/remove-nick-edit

Remove nick editor

client/css/style.css

@@ -246,7 +246,6 @@ kbd {
 #help .website-link::before,
 #help .documentation-link::before,
 #help .report-issue-link::before,
-#nick button::before,
 #image-viewer .previous-image-btn::before,
 #image-viewer .next-image-btn::before,
 #sidebar .not-secure-icon::before,
@@ -277,6 +276,7 @@ kbd {
 .context-menu-action-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/  */ }
 .context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
 .context-menu-network::before { content: "\f233"; /* https://fontawesome.com/icons/server?style=solid */ }
+.context-menu-edit::before { content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */ }
 
 #sidebar .not-secure-icon::before {
 	content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
@@ -419,19 +419,6 @@ kbd {
 	margin-right: 9px;
 }
 
-.context-menu-edit::before,
-#set-nick::before {
-	content: "\f303"; /* https://fontawesome.com/icons/pencil-alt?style=solid */
-}
-
-#submit-nick::before {
-	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
-}
-
-#cancel-nick::before {
-	content: "\f00d"; /* http://fontawesome.io/icon/times/ */
-}
-
 #image-viewer .previous-image-btn::before {
 	content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */
 }
@@ -1846,67 +1833,21 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	display: block;
 }
 
-[contenteditable]:focus {
-	outline: none;
-}
-
-[contenteditable="true"] {
-	-webkit-user-select: text;
-	-moz-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-	cursor: text;
-}
-
-/* Nick editor */
-
 #form #nick {
 	background: #f6f6f6;
 	color: #666;
-	font: inherit;
 	font-size: 13px;
 	margin: 4px;
-	line-height: 22px;
+	line-height: 24px;
-	height: 24px;
+	padding: 0 8px;
-	padding-left: 9px;
-	padding-right: 5px;
 	border-radius: 2px;
-	flex: 0 0 auto;
-	border: 1px solid transparent;
-	transition: border-color 0.2s;
-}
-
-#form #nick-value {
-	padding-right: 5px;
-}
-
-#form #nick.editable {
-	border-color: black;
-}
-
-#nick button#set-nick,
-#nick button#submit-nick,
-#nick button#cancel-nick {
-	color: #aaa;
-	width: 18px;
-}
-
-#nick.editable button#set-nick,
-#nick.editable #set-nick-tooltip,
-#nick button#submit-nick,
-#nick:not(.editable) #save-nick-tooltip,
-#nick button#cancel-nick,
-#nick:not(.editable) #cancel-nick-tooltip {
 	display: none;
 }
 
-#nick.editable button#submit-nick,
+.public #form #nick {
-#nick.editable button#cancel-nick {
+	display: block;
-	display: inline-block;
 }
 
-/* End nick editor */
-
 #form #input {
 	background: transparent;
 	border: none;

client/index.html.tpl

@@ -60,12 +60,7 @@
 					<div id="connection-error"></div>
 					<form id="form" method="post" action="">
 						<div class="input">
-							<span id="nick">
+							<span id="nick"></span>
-								<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
-								--><span id="set-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Change nick…"><button id="set-nick" type="button" aria-label="Change nick…"></button></span><!--
-								--><span id="cancel-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Cancel"><button id="cancel-nick" type="button" aria-label="Cancel"></button></span><!--
-								--><span id="save-nick-tooltip" class="tooltipped tooltipped-e" aria-label="Save"><button id="submit-nick" type="button" aria-label="Save"></button></span>
-							</span>
 							<textarea id="input" class="mousetrap"></textarea>
 							<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message">
 								<button id="submit" type="submit" aria-label="Send message"></button>

client/js/lounge.js

@@ -141,60 +141,6 @@ $(function() {
 		return false;
 	});
 
-	$("button#set-nick").on("click", function() {
-		utils.toggleNickEditor(true);
-
-		// Selects existing nick in the editable text field
-		const element = document.querySelector("#nick-value");
-		element.focus();
-		const range = document.createRange();
-		range.selectNodeContents(element);
-		const selection = window.getSelection();
-		selection.removeAllRanges();
-		selection.addRange(range);
-	});
-
-	$("button#cancel-nick").on("click", cancelNick);
-	$("button#submit-nick").on("click", submitNick);
-
-	function submitNick() {
-		const newNick = $("#nick-value").text().trim();
-
-		if (newNick.length === 0) {
-			cancelNick();
-			return;
-		}
-
-		utils.toggleNickEditor(false);
-
-		socket.emit("input", {
-			target: chat.data("id"),
-			text: "/nick " + newNick,
-		});
-	}
-
-	function cancelNick() {
-		utils.setNick(sidebar.find(".chan.active").closest(".network").data("nick"));
-	}
-
-	$("#nick-value").on("keypress", function(e) {
-		switch (e.keyCode ? e.keyCode : e.which) {
-		case 13: // Enter
-			// Ensures a new line is not added when pressing Enter
-			e.preventDefault();
-			break;
-		}
-	}).on("keyup", function(e) {
-		switch (e.keyCode ? e.keyCode : e.which) {
-		case 13: // Enter
-			submitNick();
-			break;
-		case 27: // Escape
-			cancelNick();
-			break;
-		}
-	});
-
 	chat.on("click", ".inline-channel", function() {
 		const name = $(this).data("chan");
 		const chan = utils.findCurrentNetworkChan(name);
@@ -302,7 +248,7 @@ $(function() {
 
 		if (self.hasClass("chan")) {
 			$("#chat-container").addClass("active");
-			utils.setNick(self.closest(".network").data("nick"));
+			$("#nick").text(self.closest(".network").data("nick"));
 		}
 
 		const chanChat = chan.find(".chat");

client/js/socket-events/nick.js

@@ -2,15 +2,13 @@
 
 const $ = require("jquery");
 const socket = require("../socket");
-const utils = require("../utils");
-const sidebar = $("#sidebar");
 
 socket.on("nick", function(data) {
 	const id = data.network;
 	const nick = data.nick;
-	const network = sidebar.find("#network-" + id).data("nick", nick);
+	const network = $("#sidebar").find("#network-" + id).data("nick", nick);
 
 	if (network.find(".active").length) {
-		utils.setNick(nick);
+		$("#nick").text(nick);
 	}
 });

client/js/utils.js

@@ -19,8 +19,6 @@ module.exports = {
 	hasRoleInChannel,
 	move,
 	resetHeight,
-	setNick,
-	toggleNickEditor,
 	toggleNotificationMarkers,
 	requestIdleCallback,
 	togglePreviewMoreButtonsIfNeeded,
@@ -84,19 +82,6 @@ function join(args) {
 	}
 }
 
-function toggleNickEditor(toggle) {
-	$("#nick").toggleClass("editable", toggle);
-	$("#nick-value").prop("contenteditable", toggle);
-}
-
-function setNick(nick) {
-	// Closes the nick editor when canceling, changing channel, or when a nick
-	// is set in a different tab / browser / device.
-	toggleNickEditor(false);
-
-	$("#nick-value").text(nick);
-}
-
 const favicon = $("#favicon");
 
 function toggleNotificationMarkers(newState) {