Make nick badge editable to set it in the UI
This commit is contained in:
parent
2cbe0caf40
commit
12839af684
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user