supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Change content of tooltip and button when opening/closing join channel form

Browse Source
This commit is contained in:
Jérémie Astori 2017-12-21 16:23:22 -05:00
parent d2b0385431
commit a03f894888
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
4 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/css/style.css
View File

@ -598,7 +598,8 @@ kbd {
border-radius: 3px;
width: 18px;
height: 18px;
transition: opacity 0.2s, background-color 0.2s;
opacity: 0.4;
transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}
#sidebar .lobby .add-channel::before {
@ -611,14 +612,14 @@ kbd {
color: #fff;
}
#sidebar .lobby .add-channel {
opacity: 0.4;
}
#sidebar .lobby .add-channel:hover {
opacity: 1;
}
#sidebar .lobby .add-channel.opened {
transform: rotate(45deg);
}
#sidebar .chan.active .close {
opacity: 0.4;
display: unset;

27
client/js/join-channel.js
View File

@ -8,18 +8,39 @@ const utils = require("./utils");
const sidebar = $("#sidebar");
function toggleButton(network) {
// Transform the + button to a ×
network.find("button.add-channel").toggleClass("opened");
// Toggle content of tooltip
const tooltip = network.find(".add-channel-tooltip");
const altLabel = tooltip.data("alt-label");
tooltip.data("alt-label", tooltip.attr("aria-label"));
tooltip.attr("aria-label", altLabel);
}
function closeForm(network) {
const form = network.find(".join-form");
form.find("input[name='channel']").val("");
form.find("input[name='key']").val("");
form.hide();
toggleButton(network);
}
sidebar.on("click", ".add-channel", (e) => {
sidebar.on("click", ".add-channel", function(e) {
const id = $(e.target).data("id");
const joinForm = $(`#join-channel-${id}`);
joinForm.toggle();
joinForm.find(".input[name='channel']").focus();
const network = joinForm.closest(".network");
if (joinForm.is(":visible")) {
closeForm(network);
} else {
joinForm.show();
joinForm.find(".input[name='channel']").focus();
toggleButton(network);
}
return false;
});

2
client/js/lounge.js
View File

@ -485,7 +485,7 @@ $(function() {
const contextMenuActions = {
join: function(itemData) {
$(`#join-channel-${itemData}`).show();
$(`#join-channel-${itemData}`).closest(".network").find("button.add-channel").click();
},
close: function(itemData) {
closeChan($(`.networks .chan[data-target="${itemData}"]`));

2
client/views/chan.tpl
View File

@ -1,7 +1,7 @@
{{#each channels}}
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}">
{{#equal type "lobby"}}
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…">
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
<button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>
</span>
{{/equal}}