Merge pull request #1867 from thelounge/yamanickill/867-collapsible-network

Add support for collapsing networks

client/css/style.css

@@ -248,7 +248,8 @@ kbd {
 #help .report-issue-link::before,
 #nick button::before,
 #image-viewer .previous-image-btn::before,
-#image-viewer .next-image-btn::before {
+#image-viewer .next-image-btn::before,
+#sidebar .collapse-network::before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -523,6 +524,10 @@ kbd {
 	font-size: 14px;
 }
 
+#sidebar .network.collapsed .chan:not(.lobby) {
+	display: none;
+}
+
 #sidebar button,
 #sidebar .chan,
 #sidebar .sign-out {
@@ -559,7 +564,7 @@ kbd {
 #sidebar .chan,
 #sidebar .chan-placeholder {
 	display: block;
-	padding: 8px 25px;
+	padding: 8px 16px 8px 32px;
 	transition: color 0.2s;
 	width: 100%;
 }
@@ -703,6 +708,33 @@ kbd {
 	transform: rotate(45deg) translateZ(0);
 }
 
+#sidebar .network .collapse-network {
+	border-radius: 3px;
+	width: 32px;
+	height: 34px;
+	float: left;
+	opacity: 0.4;
+	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
+}
+
+button.collapse-network:first-child:nth-last-child(3) {
+	/* Hide collapse button if there are no channels/queries */
+	display: none;
+}
+
+#sidebar .network.collapsed .collapse-network {
+	transform: rotate(-90deg);
+}
+
+#sidebar .network .collapse-network::before {
+	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
+	color: #fff;
+}
+
+#sidebar .collapse-network:hover {
+	opacity: 1;
+}
+
 #sidebar .chan.active .close {
 	opacity: 0.4;
 	display: unset;

client/js/render.js

@@ -25,6 +25,7 @@ const historyObserver = window.IntersectionObserver ?
 module.exports = {
 	appendMessage,
 	buildChannelMessages,
+	collapseNetwork,
 	renderChannel,
 	renderChannelUsers,
 	renderNetworks,
@@ -304,3 +305,17 @@ function loadMoreHistory(entries) {
 		target.trigger("click");
 	});
 }
+
+sidebar.on("click", ".collapse-network", (event) => collapseNetwork($(event.target)));
+
+function collapseNetwork(collapseButton) {
+	$("#sidebar").find(`.network[data-id='${collapseButton.attr("data-id")}']`).toggleClass("collapsed");
+
+	if (collapseButton.attr("aria-expanded") === "true") {
+		collapseButton.attr("aria-expanded", false);
+		collapseButton.attr("aria-label", "Expand");
+	} else {
+		collapseButton.attr("aria-expanded", true);
+		collapseButton.attr("aria-label", "Collapse");
+	}
+}

client/js/socket-events/join.js

@@ -9,7 +9,7 @@ const sidebar = $("#sidebar");
 
 socket.on("join", function(data) {
 	const id = data.network;
-	const network = sidebar.find("#network-" + id);
+	const network = sidebar.find(`#network-${id}-chanlist`);
 	network.append(
 		templates.chan({
 			channels: [data.chan],

client/js/socket-events/quit.js

@@ -7,7 +7,7 @@ const sidebar = $("#sidebar");
 
 socket.on("quit", function(data) {
 	const id = data.network;
-	const network = sidebar.find("#network-" + id);
+	const network = sidebar.find(`#network-${id}-chanlist`);
 
 	network.children(".chan").each(function() {
 		// this = child

client/js/socket-events/sync_sort.js

@@ -24,12 +24,12 @@ socket.on("sync_sort", function(data) {
 				return true; // No point in continuing
 			}
 
-			const network = container.find("#network-" + value);
+			const network = container.find(`#network-${data.target}-chanlist`);
 
 			$(network).insertBefore(position);
 		});
 	} else if (type === "channels") {
-		const network = $("#network-" + data.target);
+		const network = $(`#network-${data.target}-chanlist`);
 
 		$.each(order, function(index, value) {
 			if (index === 0) { // Shouldn't attempt to move lobby

client/themes/crypto.css

@@ -64,7 +64,7 @@ a:hover,
 	font-size: 12px;
 }
 
-#sidebar .chan:first-child {
+#sidebar .chan.lobby {
 	color: #00ff0e;
 }
 

client/views/network.tpl

@@ -6,6 +6,11 @@
 	data-nick="{{nick}}"
 	data-options="{{tojson serverOptions}}"
 >
+	<div id="network-{{id}}-chanlist" role="region" class="chanlist">
+		<button class="collapse-network" aria-label="Collapse" data-id="{{id}}"
+			aria-controls="network-{{id}}-chanlist" aria-expanded="true">
+		</button>
 		{{> chan}}
+	</div>
 </section>
 {{/each}}