From a03f894888d487516ab83a508bfaad2ea57b359f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Thu, 21 Dec 2017 16:23:22 -0500
Subject: [PATCH] Change content of tooltip and button when opening/closing
 join channel form

---
 client/css/style.css      | 11 ++++++-----
 client/js/join-channel.js | 27 ++++++++++++++++++++++++---
 client/js/lounge.js       |  2 +-
 client/views/chan.tpl     |  2 +-
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 94d8f7e2..03dfe793 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -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;
diff --git a/client/js/join-channel.js b/client/js/join-channel.js
index a8858ffd..811a2e70 100644
--- a/client/js/join-channel.js
+++ b/client/js/join-channel.js
@@ -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;
 });
 
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 52703016..5bcf4d63 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -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}"]`));
diff --git a/client/views/chan.tpl b/client/views/chan.tpl
index 939a69eb..c84608a6 100644
--- a/client/views/chan.tpl
+++ b/client/views/chan.tpl
@@ -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}}