Implement condensed messages option entirely with CSS

Fixes #1432

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;

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());
 }

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");
 	});
 

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") {

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) {

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>