Make nick badge editable to set it in the UI

This commit is contained in:
Jérémie Astori 2016-07-29 02:10:29 -04:00
parent 2cbe0caf40
commit 12839af684
3 changed files with 116 additions and 10 deletions

View File

@ -160,7 +160,8 @@ button {
#chat .whois .from:before, #chat .whois .from:before,
#chat .nick .from:before, #chat .nick .from:before,
#chat .action .from:before, #chat .action .from:before,
.context-menu-item:before { .context-menu-item:before,
#nick button:before {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */ font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -260,6 +261,18 @@ button {
margin-right: 9px; margin-right: 9px;
} }
#set-nick:before {
content: "\f040"; /* http://fontawesome.io/icon/pencil/ */
}
#submit-nick:before {
content: "\f00c"; /* http://fontawesome.io/icon/check/ */
}
#cancel-nick:before {
content: "\f00d"; /* http://fontawesome.io/icon/times/ */
}
/* End icons */ /* End icons */
#wrap { #wrap {
@ -1284,32 +1297,61 @@ button {
align-items: flex-end; align-items: flex-end;
} }
[contenteditable]:focus {
outline: none;
}
/* Nick editor */
#form #nick { #form #nick {
background: #f6f6f6; background: #f6f6f6;
color: #666; color: #666;
font: inherit; font: inherit;
font-size: 11px; font-size: 11px;
margin: 4px; margin: 4px;
line-height: 26px; line-height: 22px;
height: 24px; height: 24px;
padding: 0 9px; padding-left: 9px;
border-radius: 1px; padding-right: 5px;
border-radius: 2px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
border: 1px solid transparent;
transition: border-color .2s;
} }
#form #nick:empty { #form #nick-value {
visibility: hidden; padding-right: 5px;
} }
#form #nick:after { #form #nick.editable {
content: ":"; 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 button#submit-nick,
#nick button#cancel-nick {
display: none;
}
#nick.editable button#submit-nick,
#nick.editable button#cancel-nick {
display: inline-block;
}
/* End nick editor */
#form #input { #form #input {
background: transparent; background: transparent;
border: none; border: none;

View File

@ -59,7 +59,13 @@
<div id="chat"></div> <div id="chat"></div>
<form id="form" method="post" action=""> <form id="form" method="post" action="">
<div class="input"> <div class="input">
<label for="input" id="nick"></label> <span id="nick">
<span id="nick-value" spellcheck="false"></span><!-- Comments here remove spaces between elements
--><button id="set-nick" type="button" title="Set Nick" aria-label="Set nick"></button><!--
--><button id="cancel-nick" type="button" title="Cancel Nick" aria-label="Cancel nick"></button><!--
--><button id="submit-nick" type="button" title="Submit Nick" aria-label="Submit nick"></button>
</span>
</span>
<textarea id="input" class="mousetrap"></textarea> <textarea id="input" class="mousetrap"></textarea>
<span class="tooltipped tooltipped-w" aria-label="Send message"> <span class="tooltipped tooltipped-w" 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

@ -713,6 +713,61 @@ $(function() {
.first(); .first();
} }
$("button#set-nick").on("click", function() {
toggleNickEditor(true);
// Selects existing nick in the editable text field
var element = document.querySelector("#nick-value");
element.focus();
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
});
$("button#cancel-nick").on("click", cancelNick);
$("button#submit-nick").on("click", submitNick);
function toggleNickEditor(toggle) {
$("#nick").toggleClass("editable", toggle);
$("#nick-value").attr("contenteditable", toggle);
}
// FIXME Reset content when new nick is invalid (already in use, forbidden chars, ...)
function submitNick() {
var newNick = $("#nick-value").text();
socket.emit("input", {
target: chat.data("id"),
text: "/nick " + newNick
});
toggleNickEditor(false);
}
function cancelNick() {
setNick(sidebar.find(".chan.active").closest(".network").data("nick"));
}
$("#nick-value").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;
}
}).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() {
var name = $(this).data("chan"); var name = $(this).data("chan");
var chan = findCurrentNetworkChan(name); var chan = findCurrentNetworkChan(name);
@ -1198,7 +1253,10 @@ $(function() {
} }
function setNick(nick) { function setNick(nick) {
$("#nick").text(nick); $("#nick-value").text(nick);
// Closes the nick editor when canceling, changing channel, or when a nick
// is set in a different tab / browser / device.
toggleNickEditor(false);
} }
function move(array, old_index, new_index) { function move(array, old_index, new_index) {