From 34036a4b7a333609c25bc77479add45df793783c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Wed, 17 Aug 2016 01:43:46 -0400 Subject: [PATCH 1/5] Allow ourselves to have decent looking select elements in the settings --- client/css/style.css | 5 ++++- client/js/lounge.js | 2 +- client/themes/crypto.css | 4 ++++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index e5036c7f..9d1d7225 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -581,10 +581,13 @@ button { outline: 0; padding: 8px 10px; transition: border-color .2s; - -webkit-appearance: none; width: 100%; } +#windows select.input { + height: 35px; +} + #user-specified-css-input { resize: vertical; } diff --git a/client/js/lounge.js b/client/js/lounge.js index 167ba0b3..edcde75b 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -493,7 +493,7 @@ $(function() { var highlights = []; - settings.on("change", "input, textarea", function() { + settings.on("change", "input, select, textarea", function() { var self = $(this); var name = self.attr("name"); diff --git a/client/themes/crypto.css b/client/themes/crypto.css index 3179c5a3..b4251dec 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -126,6 +126,10 @@ a:hover, font-size: 12px; } +#windows select.input { + height: 38px; +} + #footer .icon { color: #666; } From c4cfd7e4b56457e6feb35d24d40c752ff86fe1be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Wed, 17 Aug 2016 01:46:26 -0400 Subject: [PATCH 2/5] Alphabetically order default user settings, remove unnecessary continue statement, transform ifs into else-ifs --- client/js/lounge.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/client/js/lounge.js b/client/js/lounge.js index edcde75b..2b8b0ee6 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -462,18 +462,18 @@ $(function() { var userStyles = $("#user-specified-css"); var settings = $("#settings"); var options = $.extend({ - desktopNotifications: false, coloredNicks: true, + desktopNotifications: false, join: true, links: true, mode: true, motd: false, nick: true, notification: true, - part: true, - thumbnails: true, - quit: true, notifyAllMessages: false, + part: true, + quit: true, + thumbnails: true, userStyles: userStyles.text(), }, JSON.parse(window.localStorage.getItem("settings"))); @@ -483,7 +483,6 @@ $(function() { $(document.head).find("#user-specified-css").html(options[i]); } settings.find("#user-specified-css-input").val(options[i]); - continue; } else if (i === "highlights") { settings.find("input[name=" + i + "]").val(options[i]); } else if (options[i]) { @@ -515,14 +514,11 @@ $(function() { "notifyAllMessages", ].indexOf(name) !== -1) { chat.toggleClass("hide-" + name, !self.prop("checked")); - } - if (name === "coloredNicks") { + } else if (name === "coloredNicks") { chat.toggleClass("colored-nicks", self.prop("checked")); - } - if (name === "userStyles") { + } else if (name === "userStyles") { $(document.head).find("#user-specified-css").html(options[name]); - } - if (name === "highlights") { + } else if (name === "highlights") { var highlightString = options[name]; highlights = highlightString.split(",").map(function(h) { return h.trim(); From b153d568a093485d17a63142788ddfd462253172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Wed, 17 Aug 2016 01:52:29 -0400 Subject: [PATCH 3/5] Add a theme selector in the settings Power to the people! There is now 2 ways to set the theme: on the app config file (defaults for all users) and in the user settings. All CSS files present in the `client/themes` folder will be given as choices to the users. This is temporary (as in, temporary for a fairly long time) until we have proper theme management. --- client/index.html | 15 ++++++++++++++- client/js/lounge.js | 6 ++++++ src/server.js | 5 +++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/client/index.html b/client/index.html index 74940d40..1276b99b 100644 --- a/client/index.html +++ b/client/index.html @@ -15,7 +15,7 @@ - "> + @@ -241,6 +241,19 @@ Enable colored nicknames +
+

Theme

+
+
+ + +
<% if (typeof prefetch === "undefined" || prefetch !== false) { %>

Links and URLs

diff --git a/client/js/lounge.js b/client/js/lounge.js index 2b8b0ee6..a5105f1b 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -473,6 +473,7 @@ $(function() { notifyAllMessages: false, part: true, quit: true, + theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration thumbnails: true, userStyles: userStyles.text(), }, JSON.parse(window.localStorage.getItem("settings"))); @@ -485,6 +486,9 @@ $(function() { settings.find("#user-specified-css-input").val(options[i]); } else if (i === "highlights") { settings.find("input[name=" + i + "]").val(options[i]); + } else if (i === "theme") { + $("#theme").attr("href", "themes/" + options[i] + ".css"); + settings.find("select[name=" + i + "]").val(options[i]); } else if (options[i]) { settings.find("input[name=" + i + "]").prop("checked", true); } @@ -516,6 +520,8 @@ $(function() { chat.toggleClass("hide-" + name, !self.prop("checked")); } else if (name === "coloredNicks") { chat.toggleClass("colored-nicks", self.prop("checked")); + } else if (name === "theme") { + $("#theme").attr("href", "themes/" + options[name] + ".css"); } else if (name === "userStyles") { $(document.head).find("#user-specified-css").html(options[name]); } else if (name === "highlights") { diff --git a/src/server.js b/src/server.js index 872e4308..4dcade40 100644 --- a/src/server.js +++ b/src/server.js @@ -122,6 +122,11 @@ function index(req, res, next) { Helper.config ); data.gitCommit = gitCommit; + data.themes = fs.readdirSync("client/themes/").filter(function(file) { + return file.endsWith(".css"); + }).map(function(css) { + return css.slice(0, -4); + }); var template = _.template(file); res.setHeader("Content-Security-Policy", "default-src *; style-src * 'unsafe-inline'; script-src 'self'; child-src 'none'; object-src 'none'; form-action 'none'; referrer no-referrer;"); res.setHeader("Content-Type", "text/html"); From 6d72f023faed99b87520f26dc47e3c127db74a24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Wed, 17 Aug 2016 01:54:03 -0400 Subject: [PATCH 4/5] Fix wrong loading of Crypto font Turns out, this theme probably never loaded its font right, fail... `GET https://.../themes/fonts/inconsolatag.woff` --> 404 --- client/themes/crypto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/themes/crypto.css b/client/themes/crypto.css index b4251dec..d86c6070 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -10,7 +10,7 @@ GitHub: https://github.com/aynik @font-face { font-family: Inconsolata-g; - src: url("fonts/inconsolatag.woff") format("woff"), url("fonts/inconsolatag.ttf") format("ttf"); + src: url("../css/fonts/inconsolatag.woff") format("woff"), url("../css/fonts/inconsolatag.ttf") format("ttf"); } body { From d5f234bdb5c8b374b03c6e85f4245c45f4695a08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Tue, 6 Sep 2016 01:18:21 -0400 Subject: [PATCH 5/5] Make all window form inputs white so selects match text inputs --- client/css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/client/css/style.css b/client/css/style.css index 9d1d7225..321d215f 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -572,6 +572,7 @@ button { } #windows .input { + background-color: white; border: 1px solid #cdd3da; border-radius: 2px; color: #222;