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.
This commit is contained in:
Jérémie Astori 2016-08-17 01:52:29 -04:00
parent c4cfd7e4b5
commit b153d568a0
3 changed files with 25 additions and 1 deletions

View File

@ -15,7 +15,7 @@
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%= typeof(theme) !== "undefined" ? theme : "themes/example.css" %>"> <link id="theme" rel="stylesheet" href="<%= theme %>">
<style id="user-specified-css"></style> <style id="user-specified-css"></style>
<link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon"> <link rel="shortcut icon" href="img/favicon.png" data-other="img/favicon-notification.png" data-toggled="false" id="favicon">
@ -241,6 +241,19 @@
Enable colored nicknames Enable colored nicknames
</label> </label>
</div> </div>
<div class="col-sm-12">
<h2>Theme</h2>
</div>
<div class="col-sm-12">
<label for="theme-select" class="sr-only">Theme</label>
<select id="theme-select" name="theme" class="input">
<% themes.forEach(function(themeName) { %>
<option value="<%= themeName %>">
<%= themeName.charAt(0).toUpperCase() + themeName.slice(1) %>
</option>
<% }) %>
</select>
</div>
<% if (typeof prefetch === "undefined" || prefetch !== false) { %> <% if (typeof prefetch === "undefined" || prefetch !== false) { %>
<div class="col-sm-12"> <div class="col-sm-12">
<h2>Links and URLs</h2> <h2>Links and URLs</h2>

View File

@ -473,6 +473,7 @@ $(function() {
notifyAllMessages: false, notifyAllMessages: false,
part: true, part: true,
quit: true, quit: true,
theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration
thumbnails: true, thumbnails: true,
userStyles: userStyles.text(), userStyles: userStyles.text(),
}, JSON.parse(window.localStorage.getItem("settings"))); }, JSON.parse(window.localStorage.getItem("settings")));
@ -485,6 +486,9 @@ $(function() {
settings.find("#user-specified-css-input").val(options[i]); settings.find("#user-specified-css-input").val(options[i]);
} else if (i === "highlights") { } else if (i === "highlights") {
settings.find("input[name=" + i + "]").val(options[i]); 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]) { } else if (options[i]) {
settings.find("input[name=" + i + "]").prop("checked", true); settings.find("input[name=" + i + "]").prop("checked", true);
} }
@ -516,6 +520,8 @@ $(function() {
chat.toggleClass("hide-" + name, !self.prop("checked")); chat.toggleClass("hide-" + name, !self.prop("checked"));
} else if (name === "coloredNicks") { } else if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked")); chat.toggleClass("colored-nicks", self.prop("checked"));
} else if (name === "theme") {
$("#theme").attr("href", "themes/" + options[name] + ".css");
} else if (name === "userStyles") { } else if (name === "userStyles") {
$(document.head).find("#user-specified-css").html(options[name]); $(document.head).find("#user-specified-css").html(options[name]);
} else if (name === "highlights") { } else if (name === "highlights") {

View File

@ -122,6 +122,11 @@ function index(req, res, next) {
Helper.config Helper.config
); );
data.gitCommit = gitCommit; 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); 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-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"); res.setHeader("Content-Type", "text/html");