From f8a39a0ea876b11d8e62051a2c8b32451b690252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 25 Feb 2019 00:21:40 -0500
Subject: [PATCH 1/2] Display a broken link icon and red text color when not
 joined on a channel

---
 client/components/Channel.vue        |  5 +++++
 client/components/ChannelWrapper.vue |  2 +-
 client/css/style.css                 | 17 ++++++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index b861c646..7c6a7273 100644
--- a/client/components/Channel.vue
+++ b/client/components/Channel.vue
@@ -9,6 +9,11 @@
 			:class="{ highlight: channel.highlight }"
 			class="badge">{{ channel.unread | roundBadgeNumber }}</span>
 		<template v-if="channel.type === 'channel'">
+			<span
+				class="parted-channel-tooltip tooltipped tooltipped-w"
+				aria-label="Not currently joined">
+				<span class="parted-channel-icon" />
+			</span>
 			<span
 				class="close-tooltip tooltipped tooltipped-w"
 				aria-label="Leave">
diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index cd5ed80a..fd495eb2 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -4,7 +4,7 @@
 		:class="[
 			channel.type,
 			{ active: activeChannel && channel === activeChannel.channel },
-			{ 'channel-is-parted': channel.type === 'channel' && channel.state === 0 }
+			{ 'parted-channel': channel.type === 'channel' && channel.state === 0 }
 		]"
 		:aria-label="getAriaLabel()"
 		:title="getAriaLabel()"
diff --git a/client/css/style.css b/client/css/style.css
index 60c480f0..cef07a49 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -279,6 +279,7 @@ kbd {
 #image-viewer .next-image-btn::before,
 #sidebar .not-secure-icon::before,
 #sidebar .not-connected-icon::before,
+#sidebar .parted-channel-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 */
@@ -307,7 +308,8 @@ kbd {
 	content: "\f071"; /* https://fontawesome.com/icons/exclamation-triangle?style=solid */
 }
 
-#sidebar .not-connected-icon::before {
+#sidebar .not-connected-icon::before,
+#sidebar .parted-channel-icon::before {
 	content: "\f127"; /* https://fontawesome.com/icons/unlink?style=solid */
 }
 
@@ -659,13 +661,15 @@ background on hover (unless active) */
 }
 
 #sidebar .not-connected-tooltip,
-#sidebar .not-secure-tooltip {
+#sidebar .not-secure-tooltip,
+#sidebar .parted-channel-tooltip {
 	display: none;
 	margin: 0 8px;
 }
 
 #sidebar .not-connected .not-connected-tooltip,
-#sidebar .not-secure .not-secure-tooltip {
+#sidebar .not-secure .not-secure-tooltip,
+#sidebar .parted-channel .parted-channel-tooltip {
 	display: inline-block;
 }
 
@@ -683,12 +687,15 @@ background on hover (unless active) */
 	color: #f8c572;
 }
 
-#sidebar .not-connected .chan.lobby {
+#sidebar .not-connected .chan.lobby,
+#sidebar .parted-channel {
 	color: #e74c3c;
 }
 
 #sidebar .not-connected .chan.lobby .lobby-wrap:hover,
-#sidebar .not-connected .chan.lobby.active {
+#sidebar .not-connected .chan.lobby.active,
+#sidebar .parted-channel:hover,
+#sidebar .parted-channel.active {
 	color: #f1978e;
 }
 

From e173b84fdb97bdd912a223accb6264a87d95d4c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Tue, 26 Feb 2019 01:26:45 -0500
Subject: [PATCH 2/2] Show/Hide parted channel icon/styling using v-if instead
 of CSS display property

---
 client/components/Channel.vue |  1 +
 client/css/style.css          | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/components/Channel.vue b/client/components/Channel.vue
index 7c6a7273..b3df786b 100644
--- a/client/components/Channel.vue
+++ b/client/components/Channel.vue
@@ -10,6 +10,7 @@
 			class="badge">{{ channel.unread | roundBadgeNumber }}</span>
 		<template v-if="channel.type === 'channel'">
 			<span
+				v-if="channel.state === 0"
 				class="parted-channel-tooltip tooltipped tooltipped-w"
 				aria-label="Not currently joined">
 				<span class="parted-channel-icon" />
diff --git a/client/css/style.css b/client/css/style.css
index cef07a49..22daedb3 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -661,15 +661,12 @@ background on hover (unless active) */
 }
 
 #sidebar .not-connected-tooltip,
-#sidebar .not-secure-tooltip,
-#sidebar .parted-channel-tooltip {
+#sidebar .not-secure-tooltip {
 	display: none;
-	margin: 0 8px;
 }
 
 #sidebar .not-connected .not-connected-tooltip,
-#sidebar .not-secure .not-secure-tooltip,
-#sidebar .parted-channel .parted-channel-tooltip {
+#sidebar .not-secure .not-secure-tooltip {
 	display: inline-block;
 }
 
@@ -678,6 +675,12 @@ background on hover (unless active) */
 	display: none;
 }
 
+#sidebar .not-connected-tooltip,
+#sidebar .not-secure-tooltip,
+#sidebar .parted-channel-tooltip {
+	margin: 0 8px;
+}
+
 #sidebar .not-secure .chan.lobby {
 	color: #f39c12;
 }