hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

segregated the "theme" route (now "appearance") into their own separate routes

Browse Source
v1.18.x
psychobunny 11 years ago
parent 27bd23ca5c
commit f98e3aaf64
12 changed files with 230 additions and 196 deletions
Show Stats Download Patch File Download Diff File

12
public/src/forum/admin/footer.js
Unescape Escape View File

@ -21,8 +21,20 @@ define('forum/admin/footer', ['forum/admin/settings'], function(Settings) {
setupACPSearch(); setupACPSearch();
}); });
$(window).on('action:ajaxify.end', function() {
setupPills();
});
}); });
function setupPills() {
$('.nav-pills li').removeClass('active');
var slug = window.location.href.split('/');
slug = slug[slug.length-1];
$('.nav-pills [data-pill="' + slug + '"]').addClass('active');
}
function setupACPSearch() { function setupACPSearch() {
var menu = $('#acp-search .dropdown-menu'); var menu = $('#acp-search .dropdown-menu');

10
public/src/forum/admin/settings.js
Unescape Escape View File

@ -17,8 +17,6 @@ define('forum/admin/settings', ['uploader', 'sounds'], function(uploader, sounds
return; return;
} }
setupPills();
// Populate the fields on the page from the config // Populate the fields on the page from the config
var fields = $('#content [data-field]'), var fields = $('#content [data-field]'),
numFields = fields.length, numFields = fields.length,
@ -127,14 +125,6 @@ define('forum/admin/settings', ['uploader', 'sounds'], function(uploader, sounds
socket.emit('admin.config.remove', key); socket.emit('admin.config.remove', key);
}; };
function setupPills() {
$('.settings.nav-pills li').removeClass('active');
var slug = window.location.href.split('/');
slug = slug[slug.length-1];
$('.settings.nav-pills [data-pill="' + slug + '"]').addClass('active');
}
function saveField(field, callback) { function saveField(field, callback) {
field = $(field); field = $(field);
var key = field.attr('data-field'), var key = field.attr('data-field'),

20
src/controllers/admin.js
Unescape Escape View File

@ -21,7 +21,7 @@ var adminController = {
tags: {}, tags: {},
topics: {}, topics: {},
groups: {}, groups: {},
themes: {}, appearance: {},
events: {}, events: {},
database: {}, database: {},
plugins: {}, plugins: {},
@ -214,7 +214,19 @@ adminController.logger.get = function(req, res, next) {
res.render('admin/logger', {}); res.render('admin/logger', {});
}; };
adminController.themes.get = function(req, res, next) { adminController.appearance.get = function(req, res, next) {
var term = req.params.term ? req.params.term : 'themes';
if (term === 'widgets') {
renderWidgets(req, res, next);
} else {
res.render('admin/appearance/' + term, {});
}
};
// todo: move to extend
function renderWidgets(req, res, next) {
async.parallel({ async.parallel({
areas: function(next) { areas: function(next) {
var defaultAreas = [ var defaultAreas = [
@ -264,14 +276,14 @@ adminController.themes.get = function(req, res, next) {
}); });
}); });
res.render('admin/themes', { res.render('admin/appearance/widgets', {
templates: templates, templates: templates,
areas: widgetData.areas, areas: widgetData.areas,
widgets: widgetData.widgets widgets: widgetData.widgets
}); });
}); });
}); });
}; }
adminController.groups.get = function(req, res, next) { adminController.groups.get = function(req, res, next) {
groups.list({ groups.list({

2
src/routes/admin.js
Unescape Escape View File

@ -39,7 +39,7 @@ function addRoutes(router, middleware, controllers) {
//main //main
router.get('/index', controllers.admin.home); router.get('/index', controllers.admin.home);
router.get('/plugins', controllers.admin.plugins.get); router.get('/plugins', controllers.admin.plugins.get);
router.get('/themes', controllers.admin.themes.get); router.get('/appearance/:term?', controllers.admin.appearance.get);
router.get('/languages', controllers.admin.languages.get); router.get('/languages', controllers.admin.languages.get);
router.get('/groups', controllers.admin.groups.get); router.get('/groups', controllers.admin.groups.get);
router.get('/sounds', controllers.admin.sounds.get); router.get('/sounds', controllers.admin.sounds.get);

37
src/views/admin/appearance/customise.tpl
Unescape Escape View File

@ -0,0 +1,37 @@
<!-- IMPORT admin/appearance/header.tpl -->
<div 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>
<h3>Custom Header</h3>
<p>
You can enter custom HTML here (ex. JavaScript, Meta Tags, etc.) which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup.
</p>
<textarea class="well" data-field="customJS" placeholder="Enter your custom JS here..."></textarea>
<form class="form">
<div class="form-group">
<label for="useCustomJS">
Use Custom Header?
<input id="useCustomJS" type="checkbox" data-field="useCustomJS" />
</label>
</div>
</form>
<button class="btn btn-primary" id="save">Save</button>
</div>
<!-- IMPORT admin/appearance/footer.tpl -->

14
src/views/admin/appearance/footer.tpl
Unescape Escape View File

@ -0,0 +1,14 @@
</div>
<script>
var bootswatchListener = function(data) {
require(['forum/admin/themes'], function(t) {
t.render(data);
});
};
require(['forum/admin/themes'], function(t) {
t.init();
});
</script>

12
src/views/admin/appearance/header.tpl
Unescape Escape View File

@ -0,0 +1,12 @@
<h1><i class="fa fa-th"></i> Appearance</h1>
<hr />
<div class="themes">
<ul class="nav nav-pills">
<li data-pill="themes"><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
<li data-pill="skins"><a href="{relative_path}/admin/appearance/skins">Skins</a></li>
<li data-pill="customise"><a href="{relative_path}/admin/appearance/customise">Customise</a></li>
<li data-pill="widgets"><a href="{relative_path}/admin/appearance/widgets">Widgets</a></li>
</ul>
<br />

19
src/views/admin/appearance/skins.tpl
Unescape Escape View File

@ -0,0 +1,19 @@
<!-- IMPORT admin/appearance/header.tpl -->
<div id="skins">
<h3>Bootswatch Themes</h3>
<p>
NodeBB's skins are powered by Bootswatch, a repository containing themes built
with Bootstrap as a base theme. Currently, the Vanilla base theme is best optimized for use with Bootswatch.
</p>
<ul class="directory" id="bootstrap_themes">
<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
</ul>
<h3>Revert to Default</h3>
<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>
<!-- IMPORT admin/appearance/footer.tpl -->

13
src/views/admin/appearance/themes.tpl
Unescape Escape View File

@ -0,0 +1,13 @@
<!-- IMPORT admin/appearance/header.tpl -->
<div id="themes">
<h3>Installed Themes</h3>
<p>
The following themes are currently installed in this NodeBB instance.
</p>
<ul class="directory" id="installed_themes">
<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
</ul>
</div>
<!-- IMPORT admin/appearance/footer.tpl -->

105
src/views/admin/appearance/widgets.tpl
Unescape Escape View File

@ -0,0 +1,105 @@
<!-- IMPORT admin/appearance/header.tpl -->
<div id="widgets">
<h3>Widgets</h3>
<div class="row">
<div class="col-xs-6 pull-right">
<ul class="nav nav-pills">
<!-- BEGIN templates -->
<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
<!-- END templates -->
</ul>
<div class="tab-content">
<!-- BEGIN templates -->
<div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}">
<!-- BEGIN areas -->
<div class="area" data-template="{templates.template}" data-location="{templates.areas.location}">
<h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4>
<div class="well widget-area">
</div>
</div>
<!-- END areas -->
</div>
<!-- END templates -->
</div>
<button class="btn btn-success save pull-right">Save</button>
</div>
<div class="col-xs-6 pull-left">
<div class="available-widgets">
<h4>Available Widgets <small>Drag and drop widgets into templates</small></h4>
<!-- IF !widgets.length -->
<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
<!-- ENDIF !widgets.length -->
<div class="row">
<!-- BEGIN widgets -->
<div class="col-lg-6 col-md-12">
<div data-widget="{widgets.widget}" class="panel panel-default pointer">
<div class="panel-heading">
<strong>{widgets.name}</strong>
<small><br />{widgets.description}</small>
</div>
<div class="panel-body hidden">
<form>
{widgets.content}
</form>
</div>
</div>
</div>
<!-- END widgets -->
</div>
</div>
<hr />
<div class="available-containers">
<h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
<div class="containers">
<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
None
</div>
<div class="well pointer" data-container-html='<div class="well">{body}</div>'>
Well
</div>
<div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'>
Jumbotron
</div>
<div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'>
<div class="panel-body pointer">
Panel
</div>
</div>
<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
<div class="panel-heading">
Panel Header
<div class="pull-right color-selector">
<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
<div class="panel-body">
Panel Body
</div>
</div>
<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
Alert
<div class="pull-right color-selector">
<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- IMPORT admin/appearance/footer.tpl -->

2
src/views/admin/header.tpl
Unescape Escape View File

@ -111,7 +111,7 @@
<li><a href="{relative_path}/admin/users/latest"><i class="fa fa-fw fa-user"></i> Users</a></li> <li><a href="{relative_path}/admin/users/latest"><i class="fa fa-fw fa-user"></i> Users</a></li>
<li><a href="{relative_path}/admin/groups"><i class="fa fa-fw fa-group"></i> Groups</a></li> <li><a href="{relative_path}/admin/groups"><i class="fa fa-fw fa-group"></i> Groups</a></li>
<li><a href="{relative_path}/admin/settings/general"><i class="fa fa-fw fa-cogs"></i> Settings</a></li> <li><a href="{relative_path}/admin/settings/general"><i class="fa fa-fw fa-cogs"></i> Settings</a></li>
<li><a href="{relative_path}/admin/themes"><i class="fa fa-fw fa-th"></i> Themes</a></li> <li><a href="{relative_path}/admin/appearance"><i class="fa fa-fw fa-th"></i> Appearance</a></li>
<li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Plugins</a></li> <li><a href="{relative_path}/admin/plugins"><i class="fa fa-fw fa-code-fork"></i> Plugins</a></li>
<li><a href="{relative_path}/admin/languages"><i class="fa fa-fw fa-language"></i> Languages</a></li> <li><a href="{relative_path}/admin/languages"><i class="fa fa-fw fa-language"></i> Languages</a></li>
<li><a href="{relative_path}/admin/sounds"><i class="fa fa-fw fa-volume-up"></i> Sounds</a></li> <li><a href="{relative_path}/admin/sounds"><i class="fa fa-fw fa-volume-up"></i> Sounds</a></li>

180
src/views/admin/themes.tpl
Unescape Escape View File

@ -1,180 +0,0 @@
<h1><i class="fa fa-th"></i> Themes</h1>
<hr />
<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="#skins" data-toggle="tab">Skins</a></li>
<li><a href="#" data-target="#customise" data-toggle="tab">Customise</a></li>
<li><a href="#" data-target="#widgets" data-toggle="tab">Widgets</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="directory" id="installed_themes">
<li><i class="fa fa-refresh fa-spin"></i> Checking for installed themes...</li>
</ul>
</div>
<div class="tab-pane" id="skins">
<h3>Bootswatch Themes</h3>
<p>
NodeBB's skins are powered by Bootswatch, a repository containing themes built
with Bootstrap as a base theme. Currently, the Vanilla base theme is best optimized for use with Bootswatch.
</p>
<ul class="directory" id="bootstrap_themes">
<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
</ul>
<h3>Revert to Default</h3>
<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>
<h3>Custom Header</h3>
<p>
You can enter custom HTML here (ex. JavaScript, Meta Tags, etc.) which will be appended to the <code>&lt;head&gt;</code> section of your forum's markup.
</p>
<textarea class="well" data-field="customJS" placeholder="Enter your custom JS here..."></textarea>
<form class="form">
<div class="form-group">
<label for="useCustomJS">
Use Custom Header?
<input id="useCustomJS" type="checkbox" data-field="useCustomJS" />
</label>
</div>
</form>
<button class="btn btn-primary" id="save">Save</button>
</div>
<div class="tab-pane" id="widgets">
<h3>Widgets</h3>
<div class="row">
<div class="col-xs-6 pull-right">
<ul class="nav nav-pills">
<!-- BEGIN templates -->
<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{templates.template}" data-toggle="pill">{templates.template}</a></li>
<!-- END templates -->
</ul>
<div class="tab-content">
<!-- BEGIN templates -->
<div class="tab-pane <!-- IF @first -->active<!-- ENDIF @first -->" data-template="{templates.template}">
<!-- BEGIN areas -->
<div class="area" data-template="{templates.template}" data-location="{templates.areas.location}">
<h4>{templates.areas.name} <small>{templates.template} / {templates.areas.location}</small></h4>
<div class="well widget-area">
</div>
</div>
<!-- END areas -->
</div>
<!-- END templates -->
</div>
<button class="btn btn-success save pull-right">Save</button>
</div>
<div class="col-xs-6 pull-left">
<div class="available-widgets">
<h4>Available Widgets <small>Drag and drop widgets into templates</small></h4>
<!-- IF !widgets.length -->
<div class="alert alert-info">No widgets found! Activate the essential widgets plugin in the <a href="/admin/plugins">plugins</a> control panel.</div>
<!-- ENDIF !widgets.length -->
<div class="row">
<!-- BEGIN widgets -->
<div class="col-lg-6 col-md-12">
<div data-widget="{widgets.widget}" class="panel panel-default pointer">
<div class="panel-heading">
<strong>{widgets.name}</strong>
<small><br />{widgets.description}</small>
</div>
<div class="panel-body hidden">
<form>
{widgets.content}
</form>
</div>
</div>
</div>
<!-- END widgets -->
</div>
</div>
<hr />
<div class="available-containers">
<h4>Available Containers <small>Drag and drop on top of any widget</small></h4>
<div class="containers">
<div class="pointer" style="padding: 20px; border: 1px dotted #dedede; margin-bottom: 20px;" data-container-html=" ">
None
</div>
<div class="well pointer" data-container-html='<div class="well">{body}</div>'>
Well
</div>
<div class="jumbotron pointer" data-container-html='<div class="jumbotron">{body}</div>'>
Jumbotron
</div>
<div class="panel" data-container-html='<div class="panel"><div class="panel-body">{body}</div></div>'>
<div class="panel-body pointer">
Panel
</div>
</div>
<div class="panel panel-default pointer" data-container-html='<div class="panel panel-default"><div class="panel-heading">{title}</div><div class="panel-body">{body}</div></div>'>
<div class="panel-heading">
Panel Header
<div class="pull-right color-selector">
<button data-class="panel-default" class="btn btn-xs">&nbsp;&nbsp;</button>
<button data-class="panel-primary" class="btn btn-xs btn-primary">&nbsp;&nbsp;</button>
<button data-class="panel-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="panel-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="panel-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="panel-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
<div class="panel-body">
Panel Body
</div>
</div>
<div class="alert alert-info pointer" data-container-html='<div class="alert alert-info">{body}</div>'>
Alert
<div class="pull-right color-selector">
<button data-class="alert-success" class="btn btn-xs btn-success">&nbsp;&nbsp;</button>
<button data-class="alert-info" class="btn btn-xs btn-info">&nbsp;&nbsp;</button>
<button data-class="alert-warning" class="btn btn-xs btn-warning">&nbsp;&nbsp;</button>
<button data-class="alert-danger" class="btn btn-xs btn-danger">&nbsp;&nbsp;</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var bootswatchListener = function(data) {
require(['forum/admin/themes'], function(t) {
t.render(data);
});
}
</script>
Write Preview
Loading…
Cancel
Save