Improve UI of expanded/condensed status message selection in client settings

client/css/style.css

@@ -1126,12 +1126,12 @@ kbd {
 	color: #555;
 }
 
-#chat.hide-optional .join,
+#chat.hide-status-messages .join,
-#chat.hide-optional .mode,
+#chat.hide-status-messages .mode,
-#chat.hide-optional .nick,
+#chat.hide-status-messages .nick,
-#chat.hide-optional .part,
+#chat.hide-status-messages .part,
-#chat.hide-optional .quit,
+#chat.hide-status-messages .quit,
-#chat.hide-optional .condensed,
+#chat.hide-status-messages .condensed,
 #chat.hide-motd .motd {
 	display: none !important;
 }
@@ -1397,12 +1397,11 @@ 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-right: 6px;
-	margin: 4px 10px 0 0;
 }
 
 #settings .extra-help,
@@ -1414,6 +1413,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	cursor: help;
 }
 
+#settings h2 .extra-help {
+	font-size: .8em;
+}
+
 #settings #play {
 	font-size: 14px;
 	transition: opacity .2s;

client/index.html

@@ -216,21 +216,6 @@
 							<div class="col-sm-12">
 								<h2>Messages</h2>
 							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="optional">
-									Show 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>
-								</label>
-							</div>
-							<div class="col-sm-6">
-								<label class="opt">
-									<input type="checkbox" name="condense">
-									Condense status messages
-								</label>
-							</div>
 							<div class="col-sm-6">
 								<label class="opt">
 									<input type="checkbox" name="motd">
@@ -243,6 +228,28 @@
 									Show seconds in timestamp
 								</label>
 							</div>
+							<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-12">
+								<label class="opt">
+									<input type="radio" name="statusMessages" value="shown">
+									Show all status messages individually
+								</label>
+								<label class="opt">
+									<input type="radio" name="statusMessages" value="condensed">
+									Condense status messages together
+								</label>
+								<label class="opt">
+									<input type="radio" name="statusMessages" value="hidden">
+									Hide all status messages
+								</label>
+							</div>
 							<div class="col-sm-12">
 								<h2>Visual Aids</h2>
 							</div>

client/js/options.js

@@ -9,22 +9,29 @@ const tz = require("./libs/handlebars/tz");
 const windows = $("#windows");
 const chat = $("#chat");
 
-const options = $.extend({
+// Default options
+const options = {
+	autocomplete: true,
 	coloredNicks: true,
-	condense: true,
 	desktopNotifications: false,
+	highlights: [],
 	links: true,
 	motd: true,
 	notification: true,
 	notifyAllMessages: false,
-	optional: true,
 	showSeconds: false,
+	statusMessages: "condensed",
 	theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration
 	thumbnails: true,
 	userStyles: userStyles.text(),
-	highlights: [],
+};
-	autocomplete: true
+const userOptions = JSON.parse(storage.get("settings")) || {};
-}, JSON.parse(storage.get("settings")));
+
+for (const key in options) {
+	if (userOptions[key]) {
+		options[key] = userOptions[key];
+	}
+}
 
 module.exports = options;
 
@@ -40,6 +47,9 @@ for (var i in options) {
 		settings.find("#user-specified-css-input").val(options[i]);
 	} else if (i === "highlights") {
 		settings.find("input[name=" + i + "]").val(options[i]);
+	} else if (i === "statusMessages") {
+		settings.find(`input[name=${i}][value=${options[i]}]`)
+			.prop("checked", true);
 	} else if (i === "theme") {
 		$("#theme").attr("href", "themes/" + options[i] + ".css");
 		settings.find("select[name=" + i + "]").val(options[i]);
@@ -55,6 +65,10 @@ settings.on("change", "input, select, textarea", function() {
 
 	if (type === "password") {
 		return;
+	} else if (type === "radio") {
+		if (self.prop("checked")) {
+			options[name] = self.val();
+		}
 	} else if (type === "checkbox") {
 		options[name] = self.prop("checked");
 	} else {
@@ -63,8 +77,10 @@ settings.on("change", "input, select, textarea", function() {
 
 	storage.set("settings", JSON.stringify(options));
 
-	if (name === "optional" || name === "motd") {
+	if (name === "motd") {
 		chat.toggleClass("hide-" + name, !self.prop("checked"));
+	} else if (name === "statusMessages") {
+		chat.toggleClass("hide-status-messages", options[name] === "hidden");
 	} else if (name === "coloredNicks") {
 		chat.toggleClass("colored-nicks", self.prop("checked"));
 	} else if (name === "theme") {

client/js/render.js

@@ -41,7 +41,7 @@ function appendMessage(container, chan, chanType, messageType, msg) {
 		if (lastChild && $(lastChild).hasClass("condensed") && !$(msg).hasClass("message") && lastDate === msgDate) {
 			lastChild.append(msg);
 			condense.updateText(lastChild, [messageType]);
-		} else if (lastChild && $(lastChild).is(condensedTypesClasses) && options.condense) {
+		} else if (lastChild && $(lastChild).is(condensedTypesClasses) && options.statusMessages === "condensed") {
 			var condensed = buildChatMessage({msg: {type: "condensed", time: msg.attr("data-time"), previews: []}, chan: chan});
 			condensed.append(lastChild);
 			condensed.append(msg);