supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 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; border-radius: 3px;
width: 18px; width: 18px;
height: 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 { #sidebar .lobby .add-channel::before {
@ -611,14 +612,14 @@ kbd {
color: #fff; color: #fff;
} }
#sidebar .lobby .add-channel {
opacity: 0.4;
}
#sidebar .lobby .add-channel:hover { #sidebar .lobby .add-channel:hover {
opacity: 1; opacity: 1;
} }
#sidebar .lobby .add-channel.opened {
transform: rotate(45deg);
}
#sidebar .chan.active .close { #sidebar .chan.active .close {
opacity: 0.4; opacity: 0.4;
display: unset; display: unset;

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

@ -8,18 +8,39 @@ const utils = require("./utils");
const sidebar = $("#sidebar"); 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) { function closeForm(network) {
const form = network.find(".join-form"); const form = network.find(".join-form");
form.find("input[name='channel']").val(""); form.find("input[name='channel']").val("");
form.find("input[name='key']").val(""); form.find("input[name='key']").val("");
form.hide(); form.hide();
toggleButton(network);
} }
sidebar.on("click", ".add-channel", (e) => { sidebar.on("click", ".add-channel", function(e) {
const id = $(e.target).data("id"); const id = $(e.target).data("id");
const joinForm = $(`#join-channel-${id}`); const joinForm = $(`#join-channel-${id}`);
joinForm.toggle(); const network = joinForm.closest(".network");
if (joinForm.is(":visible")) {
closeForm(network);
} else {
joinForm.show();
joinForm.find(".input[name='channel']").focus(); joinForm.find(".input[name='channel']").focus();
toggleButton(network);
}
return false; return false;
}); });

2
client/js/lounge.js
View File

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

2
client/views/chan.tpl
View File

@ -1,7 +1,7 @@
{{#each channels}} {{#each channels}}
<div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}"> <div data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan {{type}} chan-{{slugify name}}">
{{#equal type "lobby"}} {{#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> <button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>
</span> </span>
{{/equal}} {{/equal}}