diff --git a/client/components/Channel.vue b/client/components/Channel.vue index e00bcc76..be6082f2 100644 --- a/client/components/Channel.vue +++ b/client/components/Channel.vue @@ -1,7 +1,6 @@ {{ channel.unread | roundBadgeNumber }} + :aria-label="joinChannelLabel" + class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"> + :aria-label="joinChannelLabel" + @click.stop="$emit('toggleJoinChannel')"/> @@ -94,6 +93,12 @@ export default { activeChannel: Object, network: Object, channel: Object, + isJoinChannelShown: Boolean, + }, + computed: { + joinChannelLabel() { + return this.isJoinChannelShown ? "Cancel" : "Join a channel…"; + }, }, methods: { onCollapseClick() { diff --git a/client/components/JoinChannel.vue b/client/components/JoinChannel.vue index c6d932d6..d95dbe82 100644 --- a/client/components/JoinChannel.vue +++ b/client/components/JoinChannel.vue @@ -5,8 +5,12 @@ method="post" action="" autocomplete="off" + @keydown.esc.prevent="$emit('toggleJoinChannel')" + @submit.prevent="onSubmit" > diff --git a/client/components/Network.vue b/client/components/Network.vue index d5e15814..76b88f16 100644 --- a/client/components/Network.vue +++ b/client/components/Network.vue @@ -31,8 +31,14 @@ :channel="network.channels[0]" :network="network" :active-channel="activeChannel" + :is-join-channel-shown="network.isJoinChannelShown" + @toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown" + /> + - { - closeForm(form.closest(".network")); - - return false; - }); - }); - - form.on("submit", () => { - const networkElement = form.closest(".network"); - const channel = form.find("input[name='channel']").val(); - const key = form.find("input[name='key']").val(); - const existingChannel = utils.findCurrentNetworkChan(channel); - - if (existingChannel) { - $(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click"); - } else { - socket.emit("input", { - text: `/join ${channel} ${key}`, - target: networkElement.find(".lobby").data("id"), - }); - } - - closeForm(networkElement); - - return false; - }); - } -} diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js index dc152155..be1dc302 100644 --- a/client/js/socket-events/init.js +++ b/client/js/socket-events/init.js @@ -23,6 +23,7 @@ socket.on("init", function(data) { const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed"))); for (const network of data.networks) { + network.isJoinChannelShown = false; network.isCollapsed = networks.has(network.uuid); for (const channel of network.channels) { diff --git a/client/js/socket-events/network.js b/client/js/socket-events/network.js index 5eb9ef67..26d39f1d 100644 --- a/client/js/socket-events/network.js +++ b/client/js/socket-events/network.js @@ -10,6 +10,9 @@ const {vueApp} = require("../vue"); socket.on("network", function(data) { const network = data.networks[0]; + network.isJoinChannelShown = false; + network.isCollapsed = false; + for (const channel of network.channels) { if (channel.type === "channel") { channel.usersOutdated = true; diff --git a/client/js/socket-events/topic.js b/client/js/socket-events/topic.js index 33e6d8b9..4bf3641b 100644 --- a/client/js/socket-events/topic.js +++ b/client/js/socket-events/topic.js @@ -4,7 +4,7 @@ const socket = require("../socket"); const {findChannel} = require("../vue"); socket.on("topic", function(data) { - let channel = findChannel(data.chan); + const channel = findChannel(data.chan); if (channel) { channel.channel.topic = data.topic;