From d814abd1cf08ee05ef97dc3aa2547397266769f3 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Wed, 30 Aug 2017 15:43:31 +0300
Subject: [PATCH] Implement condensed messages option entirely with CSS

Fixes #1432
---
 client/css/style.css           | 36 +++++++++++++++++++---------------
 client/js/condensed.js         |  2 +-
 client/js/lounge.js            |  2 +-
 client/js/options.js           |  1 +
 client/js/render.js            | 28 ++++++++++++--------------
 client/views/msg_condensed.tpl | 10 +++++-----
 6 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index d2a7e9a3..b63db985 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -820,24 +820,33 @@ kbd {
 	flex-basis: 100%;
 }
 
-#chat .condensed-text {
+#chat .condensed-summary .content {
+	display: block;
 	cursor: pointer;
 	transition: opacity 0.2s;
 }
 
-#chat .condensed-text:hover {
-	opacity: 0.6;
-}
-
-#chat .condensed-text .toggle-button:hover {
-	opacity: 1;
-}
-
-#chat .condensed.closed .msg {
+#chat .condensed-summary {
 	display: none;
 }
 
-#chat .condensed > .time {
+#chat.condensed-status-messages .condensed-summary {
+	display: flex;
+}
+
+#chat .condensed-summary:hover {
+	opacity: 0.6;
+}
+
+#chat .condensed-summary .toggle-button:hover {
+	opacity: 1;
+}
+
+#chat.condensed-status-messages .condensed.closed .msg {
+	display: none;
+}
+
+#chat .condensed-summary .time {
 	visibility: hidden;
 }
 
@@ -1132,11 +1141,6 @@ kbd {
 	color: #555;
 }
 
-#chat.hide-status-messages .join,
-#chat.hide-status-messages .mode,
-#chat.hide-status-messages .nick,
-#chat.hide-status-messages .part,
-#chat.hide-status-messages .quit,
 #chat.hide-status-messages .condensed,
 #chat.hide-motd .motd {
 	display: none !important;
diff --git a/client/js/condensed.js b/client/js/condensed.js
index a7119d1f..aa1c8808 100644
--- a/client/js/condensed.js
+++ b/client/js/condensed.js
@@ -50,6 +50,6 @@ function updateText(condensed, addedTypes) {
 		text = strings.join(", ") + ", and " + text;
 	}
 
-	condensed.find(".condensed-text")
+	condensed.find(".condensed-summary .content")
 		.html(text + templates.msg_condensed_toggle());
 }
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 99b0b91c..bd0da92d 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -295,7 +295,7 @@ $(function() {
 		}
 	});
 
-	chat.on("click", ".condensed-text", function() {
+	chat.on("click", ".condensed-summary .content", function() {
 		$(this).closest(".msg.condensed").toggleClass("closed");
 	});
 
diff --git a/client/js/options.js b/client/js/options.js
index 798da506..af28840e 100644
--- a/client/js/options.js
+++ b/client/js/options.js
@@ -84,6 +84,7 @@ settings.on("change", "input, select, textarea", function() {
 		chat.toggleClass("hide-" + name, !self.prop("checked"));
 	} else if (name === "statusMessages") {
 		chat.toggleClass("hide-status-messages", options[name] === "hidden");
+		chat.toggleClass("condensed-status-messages", options[name] === "condensed");
 	} else if (name === "coloredNicks") {
 		chat.toggleClass("colored-nicks", self.prop("checked"));
 	} else if (name === "theme") {
diff --git a/client/js/render.js b/client/js/render.js
index df9628cf..7535e9aa 100644
--- a/client/js/render.js
+++ b/client/js/render.js
@@ -61,10 +61,9 @@ function appendMessage(container, chanId, chanType, msg) {
 		return;
 	}
 
-	// TODO: To fix #1432, statusMessage option should entirely be implemented in CSS
 	// If current window is not a channel or this message is not condensable,
 	// then just append the message to container and be done with it
-	if (constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel" || options.statusMessages !== "condensed") {
+	if (constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel") {
 		container.append(renderedMessage);
 		return;
 	}
@@ -74,21 +73,18 @@ function appendMessage(container, chanId, chanType, msg) {
 	if (lastChild.hasClass("condensed")) {
 		lastChild.append(renderedMessage);
 		condensed.updateText(lastChild, [msg.type]);
-	// If the previous message can be condensed, we create a new condensed wrapper
-	} else if (lastChild.is(constants.condensedTypesQuery)) {
-		const newCondensed = buildChatMessage(chanId, {
-			type: "condensed",
-			time: msg.time,
-			previews: []
-		});
-
-		condensed.updateText(newCondensed, [msg.type, lastChild.attr("data-type")]);
-		container.append(newCondensed);
-		newCondensed.append(lastChild);
-		newCondensed.append(renderedMessage);
-	} else {
-		container.append(renderedMessage);
+		return;
 	}
+
+	const newCondensed = buildChatMessage(chanId, {
+		type: "condensed",
+		time: msg.time,
+		previews: []
+	});
+
+	condensed.updateText(newCondensed, [msg.type]);
+	newCondensed.append(renderedMessage);
+	container.append(newCondensed);
 }
 
 function buildChatMessage(chanId, msg) {
diff --git a/client/views/msg_condensed.tpl b/client/views/msg_condensed.tpl
index e2becd66..8be740cf 100644
--- a/client/views/msg_condensed.tpl
+++ b/client/views/msg_condensed.tpl
@@ -1,7 +1,7 @@
 <div class="msg condensed closed" data-time="{{time}}">
-	<span class="time">{{tz time}}</span>
-	<span class="from"></span>
-	<span class="content">
-		<span class="condensed-text"></span>
-	</span>
+	<div class="condensed-summary">
+		<span class="time">{{tz time}}</span>
+		<span class="from"></span>
+		<span class="content"></span>
+	</div>
 </div>