Merge pull request #2149 from thelounge/xpaw/sidebar-flex

Cleanup sidebar to use flexbox

client/css/style.css

@@ -249,7 +249,9 @@ kbd {
 #nick button::before,
 #image-viewer .previous-image-btn::before,
 #image-viewer .next-image-btn::before,
-#sidebar .collapse-network::before {
+#sidebar .not-secure-icon::before,
+#sidebar .not-connected-icon::before,
+#sidebar .collapse-network-icon::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;
@@ -276,14 +278,13 @@ kbd {
 .context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
 
 .context-menu-network::before,
-#sidebar .chan.lobby::before,
 #chat .lobby .title::before { content: "\f0a0"; /* http://fontawesome.io/icon/hdd-o/ */ }
 
-#sidebar .not-secure .chan.lobby::before {
+#sidebar .not-secure-icon::before {
 	content: "\f09c"; /* https://fontawesome.com/v4.7.0/icon/unlock/ */
 }
 
-#sidebar .not-connected .chan.lobby::before {
+#sidebar .not-connected-icon::before {
 	content: "\f127"; /* https://fontawesome.com/v4.7.0/icon/chain-broken/ TODO v5: unlink */
 }
 
@@ -555,6 +556,7 @@ kbd {
 
 #sidebar .network,
 #sidebar .network-placeholder {
+	position: relative;
 	margin-bottom: 30px;
 	touch-action: pan-y;
 }
@@ -567,8 +569,8 @@ kbd {
 
 #sidebar .chan,
 #sidebar .chan-placeholder {
-	display: block;
+	display: flex;
-	padding: 8px 16px 8px 32px;
+	padding: 8px 14px;
 	transition: color 0.2s;
 	width: 100%;
 }
@@ -577,18 +579,40 @@ kbd {
 	color: #84ce88;
 	font-size: 15px;
 	font-weight: bold;
+	padding-left: 0;
 }
 
-#sidebar .chan.lobby:hover,
+#sidebar .lobby-wrap {
+	display: flex;
+	flex-grow: 1;
+}
+
+#sidebar .chan.lobby .lobby-wrap:hover,
 #sidebar .chan.lobby.active {
 	color: #c0f8c3;
 }
 
+#sidebar .not-connected-tooltip,
+#sidebar .not-secure-tooltip {
+	display: none;
+	margin: 0 8px;
+}
+
+#sidebar .not-connected .not-connected-tooltip,
+#sidebar .not-secure .not-secure-tooltip {
+	display: inline-block;
+}
+
+#sidebar .not-connected .not-secure-tooltip {
+	/* Do not display insecure icon if disconnected */
+	display: none;
+}
+
 #sidebar .not-secure .chan.lobby {
 	color: #f39c12;
 }
 
-#sidebar .not-secure .chan.lobby:hover,
+#sidebar .not-secure .chan.lobby .lobby-wrap:hover,
 #sidebar .not-secure .chan.lobby.active {
 	color: #f8c572;
 }
@@ -597,29 +621,24 @@ kbd {
 	color: #e74c3c;
 }
 
-#sidebar .not-connected .chan.lobby:hover,
+#sidebar .not-connected .chan.lobby .lobby-wrap:hover,
 #sidebar .not-connected .chan.lobby.active {
 	color: #f1978e;
 }
 
 #sidebar .chan::before,
 #chat .title::before {
+	width: 14px;
 	margin-right: 12px;
 }
 
 #sidebar .chan::before {
-	float: left;
 	line-height: 18px;
 }
 
-#chat .title::before {
-	margin-top: 17px;
-}
-
 #sidebar .chan .name {
 	position: relative;
-	z-index: 0;
+	flex-grow: 1;
-	display: block;
 	overflow: hidden;
 	white-space: nowrap;
 	margin-right: 5px;
@@ -636,11 +655,10 @@ kbd {
 }
 
 #sidebar .badge,
-#sidebar .add-channel,
+#sidebar .add-channel-tooltip,
-#sidebar .close {
+#sidebar .close-tooltip {
-	float: right;
+	flex-shrink: 0;
-	margin-left: 5px;
+	line-height: 1;
-	margin-right: -5px;
 }
 
 #sidebar .badge {
@@ -648,8 +666,7 @@ kbd {
 	border-radius: 3px;
 	color: #afb6c0;
 	font-size: 10px;
-	margin-top: 1px;
+	padding: 4px 6px;
-	padding: 3px 6px;
 	transition: background-color 0.2s, color 0.2s;
 }
 
@@ -662,11 +679,6 @@ kbd {
 	color: #49505a;
 }
 
-#sidebar .close-tooltip {
-	float: right;
-}
-
-#sidebar .leave,
 #sidebar .close {
 	width: 18px;
 	height: 18px;
@@ -674,7 +686,6 @@ kbd {
 	transition: opacity 0.2s, background-color 0.2s;
 }
 
-#sidebar .leave::before,
 #sidebar .close::before {
 	font-size: 20px;
 	font-weight: normal;
@@ -712,25 +723,31 @@ kbd {
 	transform: rotate(45deg) translateZ(0);
 }
 
-#sidebar .network .collapse-network {
+#sidebar .network .lobby:nth-last-child(2) .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;
+	width: 0;
+	overflow: hidden;
 }
 
-#sidebar .network.collapsed .collapse-network {
+#sidebar .network .collapse-network {
+	width: 40px;
+	opacity: 0.4;
+	padding-left: 11px;
+	transition: opacity 0.2s;
+}
+
+#sidebar .network .collapse-network-icon {
+	display: block;
+	width: 20px;
+	height: 20px;
+	transition: transform 0.2s;
+}
+
+#sidebar .network.collapsed .collapse-network-icon {
 	transform: rotate(-90deg);
 }
 
-#sidebar .network .collapse-network::before {
+#sidebar .network .collapse-network-icon::before {
 	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
 	color: #fff;
 }
@@ -744,16 +761,10 @@ button.collapse-network:first-child:nth-last-child(3) {
 	display: unset;
 }
 
-#sidebar .chan.active .leave:hover,
 #sidebar .chan.active .close:hover {
 	opacity: 1;
 }
 
-#sidebar .tse-scrollbar {
-	top: 2px;
-	right: 3px;
-}
-
 #footer {
 	background: rgba(0, 0, 0, 0.06);
 	bottom: 0;
@@ -1055,6 +1066,7 @@ button.collapse-network:first-child:nth-last-child(3) {
   */
 #sidebar .join-form {
 	display: none;
+	padding: 0 18px 8px;
 }
 
 #sidebar .join-form .input {
@@ -1063,19 +1075,14 @@ button.collapse-network:first-child:nth-last-child(3) {
 	margin-right: auto;
 	margin-top: 5px;
 	margin-bottom: 5px;
-	width: 80%;
 }
 
 #sidebar .join-form .btn {
 	display: block;
-	width: 80%;
+	width: 100%;
 	margin: auto;
 }
 
-#sidebar .add-channel-tooltip {
-	float: right;
-}
-
 #chat .show-more {
 	display: none;
 	padding: 10px;

client/js/render.js

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

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}-chanlist`);
+	const network = sidebar.find(`#network-${id}`);
 	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}-chanlist`);
+	const network = sidebar.find(`#network-${id}`);
 
 	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-${data.target}-chanlist`);
+			const network = container.find(`#network-${data.target}`);
 
 			$(network).insertBefore(position);
 		});
 	} else if (type === "channels") {
-		const network = $(`#network-${data.target}-chanlist`);
+		const network = $(`#network-${data.target}`);
 
 		$.each(order, function(index, value) {
 			if (index === 0) { // Shouldn't attempt to move lobby

client/views/chan.tpl

@@ -9,17 +9,30 @@
 	aria-selected="false"
 >
 	{{#equal type "lobby"}}
+		<button class="collapse-network" aria-label="Collapse" aria-controls="network-{{id}}" aria-expanded="true">
+			<span class="collapse-network-icon"></span>
+		</button>
+		<div class="lobby-wrap">
+			<span class="name" title="{{name}}">{{name}}</span>
+			<span class="not-secure-tooltip tooltipped tooltipped-w" aria-label="Insecure connection">
+				<span class="not-secure-icon"></span>
+			</span>
+			<span class="not-connected-tooltip tooltipped tooltipped-w" aria-label="Disconnected">
+				<span class="not-connected-icon"></span>
+			</span>
+			<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
+		</div>
 		<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}}
-	<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 	{{#notEqual type "lobby"}}
+		<span class="name" title="{{name}}">{{name}}</span>
+		<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
 		<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
 			<button class="close" aria-label="Leave"></button>
 		</span>
 	{{/notEqual}}
-	<span class="name" title="{{name}}">{{name}}</span>
 </div>
 {{#equal type "lobby"}}
 	{{> join_channel}}

client/views/network.tpl

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