From b508783101dfc979e92221a884f87812b27633b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 6 Aug 2017 00:49:22 -0400 Subject: [PATCH] Improve UI of expanded/condensed status message selection in client settings --- client/css/style.css | 21 ++++++++++++--------- client/index.html | 37 ++++++++++++++++++++++--------------- client/js/options.js | 30 +++++++++++++++++++++++------- client/js/render.js | 2 +- 4 files changed, 58 insertions(+), 32 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index acb6d0cb..bce2f8a6 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1126,12 +1126,12 @@ kbd { color: #555; } -#chat.hide-optional .join, -#chat.hide-optional .mode, -#chat.hide-optional .nick, -#chat.hide-optional .part, -#chat.hide-optional .quit, -#chat.hide-optional .condensed, +#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; } @@ -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: 4px 10px 0 0; + margin-right: 6px; } #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; diff --git a/client/index.html b/client/index.html index 87423d94..09baadb5 100644 --- a/client/index.html +++ b/client/index.html @@ -216,21 +216,6 @@

Messages

-
- -
-
- -
+
+

+ Status messages + + + +

+
+
+ + + +

Visual Aids

diff --git a/client/js/options.js b/client/js/options.js index 19130c13..4e0d83a6 100644 --- a/client/js/options.js +++ b/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 -}, JSON.parse(storage.get("settings"))); +}; +const userOptions = 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") { diff --git a/client/js/render.js b/client/js/render.js index 56400947..246e62b2 100644 --- a/client/js/render.js +++ b/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);