Merge pull request #759 from thelounge/yamanickill/condense-joins

Initial part/join condensing
thelounge · Aug 14, 2017 · 28e32dc · 28e32dc
2 parents bd53055 + 43a8604
commit 28e32dc
Show file tree

Hide file tree

Showing 16 changed files with 281 additions and 122 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -194,6 +194,7 @@ kbd {
 #chat .title:before,
 #footer .icon,
 #chat .count:before,
+#settings .extra-help,
 #settings #play:before,
 #form #submit:before,
 #chat .invite .from:before,
@@ -317,6 +318,10 @@ kbd {
 	line-height: 50px;
 }
 
+#settings .extra-help:before {
+	content: "\f059"; /* http://fontawesome.io/icon/question-circle/ */
+}
+
 #settings #play:before {
 	content: "\f028"; /* http://fontawesome.io/icon/volume-up/ */
 	margin-right: 9px;
@@ -801,6 +806,31 @@ kbd {
 	display: block;
 }
 
+#chat .condensed {
+	flex-wrap: wrap;
+}
+
+#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 {
+	display: none;
+}
+
 #windows .header .topic,
 .messages .msg,
 .sidebar {
@@ -1092,15 +1122,17 @@ kbd {
 	color: #555;
 }
 
-#chat.hide-join .join,
-#chat.hide-mode .mode,
-#chat.hide-motd .motd,
-#chat.hide-nick .nick,
-#chat.hide-part .part,
-#chat.hide-quit .quit {
+#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;
 }
 
+#chat .condensed .content,
 #chat .join .content,
 #chat .kick .content,
 #chat .mode .content,
@@ -1138,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;
@@ -1361,18 +1388,26 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 #settings .opt {
 	display: block;
-	padding: 5px 0 10px 1px;
+	padding: 5px 0 5px 1px;
 }
 
 #settings .opt input {
-	float: left;
-	margin: 4px 10px 0 0;
+	margin-right: 6px;
 }
 
+#settings .extra-help,
 #settings #play {
 	color: #7f8c8d;
 }
 
+#settings .extra-help {
+	cursor: help;
+}
+
+#settings h2 .extra-help {
+	font-size: .8em;
+}
+
 #settings #play {
 	font-size: 14px;
 	transition: opacity .2s;
@@ -1694,6 +1729,16 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	animation-delay: .4s;
 }
 
+.tooltipped-no-delay:hover:before,
+.tooltipped-no-delay:hover:after,
+.tooltipped-no-delay:active:before,
+.tooltipped-no-delay:active:after,
+.tooltipped-no-delay:focus:before,
+.tooltipped-no-delay:focus:after {
+	-webkit-animation-delay: 0s;
+	animation-delay: 0s;
+}
+
 .tooltipped-s:after,
 .tooltipped-se:after,
 .tooltipped-sw:after {
@@ -2130,3 +2175,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 #chat table.channel-list .topic {
 	white-space: pre-wrap;
 }
+
+.hide-text {
+	color: transparent !important;
+}
diff --git a/client/index.html b/client/index.html
@@ -216,12 +216,6 @@ <h1 class="title">Settings</h1>
 							<div class="col-sm-12">
 								<h2>Messages</h2>
 							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="join">
-									Show joins
-								</label>
-							</div>
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="motd">
@@ -230,32 +224,30 @@ <h2>Messages</h2>
 							</div>
 							<div class="col-sm-6">
 								<label class="opt">
-									<input type="checkbox" name="part">
-									Show parts
+									<input type="checkbox" name="showSeconds">
+									Show seconds in timestamp
 								</label>
 							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="nick">
-									Show nick changes
-								</label>
+							<div class="col-sm-12">
+								<h2>
+									Status messages
+									<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
+										<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
+									</span>
+								</h2>
 							</div>
-							<div class="col-sm-6">
+							<div class="col-sm-12">
 								<label class="opt">
-									<input type="checkbox" name="mode">
-									Show mode
+									<input type="radio" name="statusMessages" value="shown">
+									Show all status messages individually
 								</label>
-							</div>
-							<div class="col-sm-6">
 								<label class="opt">
-									<input type="checkbox" name="quit">
-									Show quits
+									<input type="radio" name="statusMessages" value="condensed">
+									Condense status messages together
 								</label>
-							</div>
-							<div class="col-sm-6">
 								<label class="opt">
-									<input type="checkbox" name="showSeconds">
-									Show seconds in timestamp
+									<input type="radio" name="statusMessages" value="hidden">
+									Hide all status messages
 								</label>
 							</div>
 							<div class="col-sm-12">

diff --git a/client/js/condensed.js b/client/js/condensed.js
@@ -0,0 +1,55 @@
+"use strict";
+
+const constants = require("./constants");
+const templates = require("../views");
+
+module.exports = {
+	updateText
+};
+
+function updateText(condensed, addedTypes) {
+	const obj = {};
+
+	constants.condensedTypes.forEach((type) => {
+		obj[type] = condensed.data(type) || 0;
+	});
+
+	addedTypes.forEach((type) => {
+		obj[type]++;
+		condensed.data(type, obj[type]);
+	});
+
+	const strings = [];
+	constants.condensedTypes.forEach((type) => {
+		if (obj[type]) {
+			switch (type) {
+			case "join":
+				strings.push(obj[type] + (obj[type] > 1 ? " users have joined the channel" : " user has joined the channel"));
+				break;
+			case "part":
+				strings.push(obj[type] + (obj[type] > 1 ? " users have left the channel" : " user has left the channel"));
+				break;
+			case "quit":
+				strings.push(obj[type] + (obj[type] > 1 ? " users have quit" : " user has quit"));
+				break;
+			case "nick":
+				strings.push(obj[type] + (obj[type] > 1 ? " users have changed nick" : " user has changed nick"));
+				break;
+			case "kick":
+				strings.push(obj[type] + (obj[type] > 1 ? " users were kicked" : " user was kicked"));
+				break;
+			case "mode":
+				strings.push(obj[type] + (obj[type] > 1 ? " modes were set" : " mode was set"));
+				break;
+			}
+		}
+	});
+
+	let text = strings.pop();
+	if (strings.length) {
+		text = strings.join(", ") + ", and " + text;
+	}
+
+	condensed.find(".condensed-text")
+		.html(text + templates.msg_condensed_toggle());
+}
diff --git a/client/js/constants.js b/client/js/constants.js
@@ -56,13 +56,41 @@ const commands = [
 	"/whois"
 ];
 
+const actionTypes = [
+	"ban_list",
+	"invite",
+	"join",
+	"mode",
+	"kick",
+	"nick",
+	"part",
+	"quit",
+	"topic",
+	"topic_set_by",
+	"action",
+	"whois",
+	"ctcp",
+	"channel_list",
+];
+
+const condensedTypes = [
+	"join",
+	"part",
+	"quit",
+	"nick",
+	"kick",
+	"mode",
+];
+
 const timeFormats = {
 	msgDefault: "HH:mm",
 	msgWithSeconds: "HH:mm:ss"
 };
 
 module.exports = {
 	colorCodeMap: colorCodeMap,
-	timeFormats: timeFormats,
-	commands: commands
+	commands: commands,
+	condensedTypes: condensedTypes,
+	actionTypes: actionTypes,
+	timeFormats: timeFormats
 };
diff --git a/client/js/lounge.js b/client/js/lounge.js
@@ -439,6 +439,10 @@ $(function() {
 		}
 	});
 
+	chat.on("click", ".condensed-text", function() {
+		$(this).closest(".msg.condensed").toggleClass("closed");
+	});
+
 	chat.on("click", ".user", function() {
 		var name = $(this).data("name");
 		var chan = findCurrentNetworkChan(name);
@@ -707,6 +711,9 @@ $(function() {
 	chat.on("click", ".show-more-button", function() {
 		var self = $(this);
 		var lastMessage = self.parent().next(".messages").children(".msg").first();
+		if (lastMessage.is(".condensed")) {
+			lastMessage = lastMessage.children(".msg").first();
+		}
 		var lastMessageId = parseInt(lastMessage[0].id.replace("msg-", ""), 10);
 
 		self