Merge pull request #568 from thelounge/astorije/theme-selector

Theme selector on the client

client/css/style.css

@@ -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;
 }

client/index.html

@@ -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>

client/js/lounge.js

@@ -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();

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 {
@@ -126,6 +126,10 @@ a:hover,
 	font-size: 12px;
 }
 
+#windows select.input {
+	height: 38px;
+}
+
 #footer .icon {
 	color: #666;
 }

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");