Merge branch 'master' of https://github.com/designcreateplay/NodeBB

11 years ago · 700876fe58
parent 97e0e48b07 c9bb65133a
commit 700876fe58
4 changed files with 61 additions and 20 deletions
--- a/public/src/forum/admin/themes.js
+++ b/public/src/forum/admin/themes.js
@ -1,4 +1,4 @@
-define(function() {
+define(['forum/admin/settings'], function(Settings) {
 	var Themes = {};

 	Themes.init = function() {
@ -96,6 +96,8 @@ define(function() {
 			instListEl.innerHTML = '';
 			instListEl.appendChild(themeFrag);
 		});
+
+		Settings.prepare();
 	}

 	Themes.render = function(bootswatch) {
--- a/public/templates/admin/themes.tpl
+++ b/public/templates/admin/themes.tpl
@ -1,11 +1,19 @@
 <h1><i class="fa fa-th"></i> Themes</h1>
 <hr />

-<h3>Custom Themes</h3>
+<div class="themes">
+	<ul class="nav nav-tabs">
+		<li class="active"><a href="#" data-target="#themes" data-toggle="tab">Themes</a></li>
+		<li><a href="#" data-target="#customise" data-toggle="tab">Customise</a></li>
+	</ul>
+
+	<div class="tab-content">
+		<div class="tab-pane active" id="themes">
+			<h3>Installed Themes</h3>
 			<p>
 				The following themes are currently installed in this NodeBB instance.
 			</p>
-<ul class="themes" id="installed_themes">
+			<ul class="directory" id="installed_themes">
 				<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
 			</ul>

@ -14,7 +22,7 @@
 				NodeBB Themes are powered by Bootswatch, a repository containing themes built
 				with Bootstrap as a base theme.
 			</p>
-<ul class="themes" id="bootstrap_themes">
+			<ul class="directory" id="bootstrap_themes">
 				<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
 			</ul>

@ -22,6 +30,27 @@
 			<p class="alert">
 				<button class="btn btn-warning" id="revert_theme">Revert</button> This will remove any custom theme applied to your NodeBB, and restore the base theme.
 			</p>
+		</div>
+		<div class="tab-pane" id="customise">
+			<h3>Custom CSS</h3>
+			<p>
+				You may also opt to enter your own CSS declarations here, which will be applied after all other styles.
+			</p>
+			<textarea class="well" data-field="customCSS" placeholder="Enter your custom CSS here..."></textarea>
+
+			<form class="form">
+				<div class="form-group">
+					<label for="useCustomCSS">
+						Use Custom CSS?
+						<input id="useCustomCSS" type="checkbox" data-field="useCustomCSS" />
+					</label>
+				</div>
+			</form>
+
+			<button class="btn btn-lg btn-primary" id="save">Save</button>
+		</div>
+	</div>
+</div>

 <script>
 	var bootswatchListener = function(data) {
--- a/public/templates/header.tpl
+++ b/public/templates/header.tpl
@ -34,6 +34,9 @@

 	<!-- TODO : this has to be refactored, maybe configured from ACP? -baris -->
 	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
+	<!-- IF useCustomCSS -->
+	<style type="text/css">{customCSS}</style>
+	<!-- ENDIF useCustomCSS -->
 </head>

 <body>
--- a/src/webserver.js
+++ b/src/webserver.js
@ -146,6 +146,13 @@ module.exports.server = server;
 				uid = options.req.user.uid;
 			}

+			// Custom CSS
+			templateValues.useCustomCSS = false;
+			if (meta.config.useCustomCSS === '1') {
+				templateValues.useCustomCSS = true;
+				templateValues.customCSS = meta.config.customCSS;
+			}
+
 			user.isAdministrator(uid, function(err, isAdmin) {
 				templateValues.adminDisplay = isAdmin ? 'show' : 'hide';