From a392a08c7a85dd2e0958cc0616ed5fcb39be09f3 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Fri, 16 Mar 2018 16:10:28 +0200 Subject: [PATCH] Remove nick editor --- client/css/style.css | 69 +++------------------------------ client/index.html.tpl | 7 +--- client/js/lounge.js | 56 +------------------------- client/js/socket-events/nick.js | 6 +-- client/js/utils.js | 15 ------- 5 files changed, 9 insertions(+), 144 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index ffec738c..3be8fbb4 100644 --- a/client/css/style.css +++ b/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; - height: 24px; - padding-left: 9px; - padding-right: 5px; + line-height: 24px; + padding: 0 8px; 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, -#nick.editable button#cancel-nick { - display: inline-block; +.public #form #nick { + display: block; } -/* End nick editor */ - #form #input { background: transparent; border: none; diff --git a/client/index.html.tpl b/client/index.html.tpl index a07584ca..be00c67e 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -60,12 +60,7 @@
- - - + diff --git a/client/js/lounge.js b/client/js/lounge.js index 809bbfd1..c989a0e4 100644 --- a/client/js/lounge.js +++ b/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"); diff --git a/client/js/socket-events/nick.js b/client/js/socket-events/nick.js index e4889d53..2fb787e7 100644 --- a/client/js/socket-events/nick.js +++ b/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); } }); diff --git a/client/js/utils.js b/client/js/utils.js index 5433247b..3ddc1ccf 100644 --- a/client/js/utils.js +++ b/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) {