Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style

client/css/style.css

@@ -198,7 +198,6 @@ kbd {
 #settings #play:before,
 #form #submit:before,
 #chat .invite .from:before,
-#chat .condensed .expander:before,
 #chat .join .from:before,
 #chat .kick .from:before,
 #chat .part .from:before,
@@ -286,22 +285,6 @@ kbd {
 	color: #2ecc40;
 }
 
-#chat .condensed {
-	cursor: pointer;
-}
-
-#chat .condensed div {
-	cursor: default;
-}
-
-#chat .condensed .expander:before {
-	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
-}
-
-#chat .condensed.closed .expander:before {
-	content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
-}
-
 #chat .join .from:before {
 	content: "\f090"; /* http://fontawesome.io/icon/sign-in/ */
 	color: #2ecc40;
@@ -827,8 +810,21 @@ kbd {
 	flex-wrap: wrap;
 }
 
-#chat .condensed .msg {
-	flex-basis: 100%;
+#chat .condensed .content {
+	flex: 1;
+}
+
+#chat .condensed-text {
+	cursor: pointer;
+	transition: opacity .2s;
+}
+
+#chat .condensed-text:hover {
+	opacity: .6;
+}
+
+#chat .condensed-text .toggle-button:hover {
+	opacity: 1;
 }
 
 #chat .condensed.closed .msg {
@@ -1174,19 +1170,14 @@ kbd {
 
 #chat .toggle-button {
 	display: inline-block;
-	color: #666;
-	transition: color .2s, transform .2s;
+	transition: opacity .2s, transform .2s;
 }
 
-#chat .toggle-button.opened {
+#chat .toggle-button.opened, /* Thumbnail toggle */
+#chat .msg.condensed:not(.closed) .toggle-button { /* Expanded status message toggle */
 	transform: rotate(90deg);
 }
 
-#chat .toggle-button:hover {
-	/* transform and opacity together glitch, so need to use RGBA transition */
-	color: rgba(102, 102, 102, .8); /* #666 x .8 opacity */
-}
-
 #chat .toggle-content {
 	background: #f5f5f5;
 	border-radius: 2px;

client/js/condensed.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const constants = require("./constants");
+const templates = require("../views");
 
 module.exports = {
 	updateText
@@ -33,5 +34,6 @@ function updateText(condensed, addedTypes) {
 			text += obj[messageType] > 1 ? "s" : "";
 		}
 	}
-	condensed.find(".condensed-msg").text(text);
+	condensed.find(".condensed-text")
+		.html(text + templates.msg_condensed_toggle());
 }

client/js/lounge.js

@@ -439,12 +439,8 @@ $(function() {
 		}
 	});
 
-	chat.on("click", ".condensed", function() {
-		$(this).toggleClass("closed");
-	});
-
-	chat.on("click", ".condensed div", function(e) {
-		e.stopPropagation();
+	chat.on("click", ".condensed-text", function() {
+		$(this).closest(".msg.condensed").toggleClass("closed");
 	});
 
 	chat.on("click", ".user", function() {

client/js/renderPreview.js

@@ -47,7 +47,7 @@ function renderPreview(preview, msg) {
 	container.trigger("keepToBottom");
 }
 
-$("#chat").on("click", ".toggle-button", function() {
+$("#chat").on("click", ".text .toggle-button", function() {
 	const self = $(this);
 	const container = self.closest(".chat");
 	const content = self.closest(".content")

client/themes/morning.css

@@ -101,10 +101,6 @@ body {
 	color: #428bca;
 }
 
-#chat button:hover {
-	opacity: 1;
-}
-
 /* Increase contrast of some IRC colors */
 .irc-fg2 { color: #0074d9; }
 .irc-fg5 { color: #e969a7; }
@@ -208,17 +204,9 @@ body {
 }
 
 /* Embeds */
-#chat .toggle-content,
-#chat .toggle-button {
-	color: #f3f3f3;
-}
-
-#chat .toggle-button:hover {
-	color: rgba(243, 243, 243, .8);
-}
-
 #chat .toggle-content {
 	background: #242a33;
+	color: #f3f3f3;
 }
 
 #chat .toggle-content .body {

client/themes/zenburn.css

@@ -127,10 +127,6 @@ body {
 	color: #8c8cbc;
 }
 
-#chat button:hover {
-	opacity: 1;
-}
-
 /* Increase contrast of some IRC colors */
 .irc-fg2 { color: #1b94ff; }
 .irc-fg5 { color: #e969a7; }
@@ -235,17 +231,9 @@ body {
 
 /* Previews */
 
-#chat .toggle-content,
-#chat .toggle-button {
-	color: #dcdccc;
-}
-
-#chat .toggle-button:hover {
-	color: rgba(220, 220, 204, .8);
-}
-
 #chat .toggle-content {
 	background: #333;
+	color: #dcdccc;
 }
 
 #chat .toggle-content .body {

client/views/index.js

@@ -25,6 +25,7 @@ module.exports = {
 	date_marker: require("./date-marker.tpl"),
 	msg: require("./msg.tpl"),
 	msg_action: require("./msg_action.tpl"),
+	msg_condensed_toggle: require("./msg_condensed_toggle.tpl"),
 	msg_condensed: require("./msg_condensed.tpl"),
 	msg_preview: require("./msg_preview.tpl"),
 	msg_preview_toggle: require("./msg_preview_toggle.tpl"),

client/views/msg_condensed.tpl

@@ -1,7 +1,7 @@
 <div class="msg {{type}} closed" data-time="{{time}}">
 	<span class="time hide-text">{{tz time}}</span>
-	<span class="from"><span class="expander"></span></span>
+	<span class="from"></span>
 	<span class="content">
-		<span class="text condensed-msg"></span>
+		<span class="condensed-text"></span>
 	</span>
 </div>

client/views/msg_condensed_toggle.tpl

@@ -0,0 +1 @@
+<button class="toggle-button" aria-label="Toggle status messages"></button>