theming 'try it' support for ACP

12 years ago · c1755d0dba
parent 111b9dcf0a
commit c1755d0dba
4 changed files with 60 additions and 3 deletions
--- a/public/css/style.less
+++ b/public/css/style.less
@ -26,7 +26,7 @@
 }

 body {
-	background: #fdfdfd;
+	/*background: #fdfdfd;*/
 	-webkit-transition: margin-bottom 250ms ease;
 	-moz-transition: margin-bottom 250ms ease;
 	-ms-transition: margin-bottom 250ms ease;
--- a/public/templates/admin/footer.tpl
+++ b/public/templates/admin/footer.tpl
@ -121,7 +121,7 @@
 					alert_id: 'config_status',
 					timeout: 2500,
 					title: 'Changes Saved',
-					message: 'Your changes to the NodeBB configuration have been saved',
+					message: 'Your changes to the NodeBB configuration have been saved. You may have to restart NodeBB to see the changes.',
 					type: 'success'
 				});
 			} else {
--- a/public/templates/admin/header.tpl
+++ b/public/templates/admin/header.tpl
@ -3,7 +3,7 @@
 <head>
 	<title></title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+	<link id="base-theme" href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
 	<link href="/vendor/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
 	<link rel="stylesheet" href="/vendor/fontawesome/css/font-awesome.min.css">
 	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
--- a/public/templates/admin/themes.tpl
+++ b/public/templates/admin/themes.tpl
@ -1,2 +1,59 @@
 <h1>Themes</h1>
 <hr />
+
+<p>
+	NodeBB Themes are powered by Bootswatch, a repository containing hundreds of themes built
+	with Bootstrap as a base theme.
+</p>
+<ul class="themes">
+	<li><i class="icon-refresh icon-spin"></i> Loading Themes</li>
+</ul>
+
+<script>
+	nodebb_admin.themes = {
+		render: function(bootswatch) {
+			console.log(bootswatch);
+			var	themeFrag = document.createDocumentFragment(),
+				themeEl = document.createElement('li'),
+				themeContainer = document.querySelector('#content .themes'),
+				numThemes = bootswatch.themes.length;
+
+			for(var x=0;x<numThemes;x++) {
+				var theme = bootswatch.themes[x];
+				themeEl.setAttribute('data-css', theme.cssMin);
+				themeEl.innerHTML =	'<img src="' + theme.thumbnail + '" />' +
+									'<div>' +
+										'<div class="pull-right">' +
+											'<button class="btn btn-primary" data-action="use">Use</button> ' +
+											'<button class="btn" data-action="preview">Preview</button>' +
+										'</div>' +
+										'<h4>' + theme.name + '</h4>' +
+										'<p>' + theme.description + '</p>' +
+									'</div>';
+				themeFrag.appendChild(themeEl.cloneNode(true));
+			}
+			themeContainer.innerHTML = '';
+			themeContainer.appendChild(themeFrag);
+		}
+	};
+
+	(function() {
+		var	scriptEl = document.createElement('script');
+		scriptEl.src = 'http://api.bootswatch.com?callback=nodebb_admin.themes.render';
+		document.body.appendChild(scriptEl);
+
+		var themeContainer = document.querySelector('#content .themes');
+		themeContainer.addEventListener('click', function(e) {
+			if (e.target.hasAttribute('data-action')) {
+				switch(e.target.getAttribute('data-action')) {
+					case 'preview':
+						var	cssSrc = $(e.target).parents('li').attr('data-css'),
+							cssEl = document.getElementById('base-theme');
+
+						cssEl.href = cssSrc;
+					break;
+				}
+			}
+		}, false);
+	})();
+</script>