Remove nick editor

This commit is contained in:
Pavel Djundik 2018-03-16 16:10:28 +02:00
parent efae5fd28d
commit a392a08c7a
5 changed files with 9 additions and 144 deletions

View File

@ -246,7 +246,6 @@ kbd {
#help .website-link::before, #help .website-link::before,
#help .documentation-link::before, #help .documentation-link::before,
#help .report-issue-link::before, #help .report-issue-link::before,
#nick button::before,
#image-viewer .previous-image-btn::before, #image-viewer .previous-image-btn::before,
#image-viewer .next-image-btn::before, #image-viewer .next-image-btn::before,
#sidebar .not-secure-icon::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-whois::before { content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */ }
.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ } .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-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 { #sidebar .not-secure-icon::before {
content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */ content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
@ -419,19 +419,6 @@ kbd {
margin-right: 9px; 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 { #image-viewer .previous-image-btn::before {
content: "\f104"; /* http://fontawesome.io/icon/angle-left/ */ 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; 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 { #form #nick {
background: #f6f6f6; background: #f6f6f6;
color: #666; color: #666;
font: inherit;
font-size: 13px; font-size: 13px;
margin: 4px; margin: 4px;
line-height: 22px; line-height: 24px;
height: 24px; padding: 0 8px;
padding-left: 9px;
padding-right: 5px;
border-radius: 2px; 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; 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 { #form #input {
background: transparent; background: transparent;
border: none; border: none;

View File

@ -60,12 +60,7 @@
<div id="connection-error"></div> <div id="connection-error"></div>
<form id="form" method="post" action=""> <form id="form" method="post" action="">
<div class="input"> <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> <textarea id="input" class="mousetrap"></textarea>
<span id="submit-tooltip" class="tooltipped tooltipped-w tooltipped-no-touch" aria-label="Send message"> <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> <button id="submit" type="submit" aria-label="Send message"></button>

View File

@ -141,60 +141,6 @@ $(function() {
return false; 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() { chat.on("click", ".inline-channel", function() {
const name = $(this).data("chan"); const name = $(this).data("chan");
const chan = utils.findCurrentNetworkChan(name); const chan = utils.findCurrentNetworkChan(name);
@ -302,7 +248,7 @@ $(function() {
if (self.hasClass("chan")) { if (self.hasClass("chan")) {
$("#chat-container").addClass("active"); $("#chat-container").addClass("active");
utils.setNick(self.closest(".network").data("nick")); $("#nick").text(self.closest(".network").data("nick"));
} }
const chanChat = chan.find(".chat"); const chanChat = chan.find(".chat");

View File

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

View File

@ -19,8 +19,6 @@ module.exports = {
hasRoleInChannel, hasRoleInChannel,
move, move,
resetHeight, resetHeight,
setNick,
toggleNickEditor,
toggleNotificationMarkers, toggleNotificationMarkers,
requestIdleCallback, requestIdleCallback,
togglePreviewMoreButtonsIfNeeded, 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"); const favicon = $("#favicon");
function toggleNotificationMarkers(newState) { function toggleNotificationMarkers(newState) {