Merge pull request #568 from thelounge/astorije/theme-selector
Theme selector on the client
This commit is contained in:
commit
dfe967b2b1
@ -572,6 +572,7 @@ button {
|
||||
}
|
||||
|
||||
#windows .input {
|
||||
background-color: white;
|
||||
border: 1px solid #cdd3da;
|
||||
border-radius: 2px;
|
||||
color: #222;
|
||||
@ -581,10 +582,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;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@
|
||||
|
||||
<link rel="stylesheet" href="css/bootstrap.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>
|
||||
|
||||
<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
|
||||
</label>
|
||||
</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) { %>
|
||||
<div class="col-sm-12">
|
||||
<h2>Links and URLs</h2>
|
||||
|
@ -462,18 +462,19 @@ $(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,
|
||||
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")));
|
||||
|
||||
@ -483,9 +484,11 @@ $(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 (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);
|
||||
}
|
||||
@ -493,7 +496,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");
|
||||
|
||||
@ -515,14 +518,13 @@ $(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 === "theme") {
|
||||
$("#theme").attr("href", "themes/" + options[name] + ".css");
|
||||
} 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();
|
||||
|
@ -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 {
|
||||
@ -126,6 +126,10 @@ a:hover,
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#windows select.input {
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
#footer .icon {
|
||||
color: #666;
|
||||
}
|
||||
|
@ -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");
|
||||
|
Loading…
Reference in New Issue
Block a user