mirror of
https://github.com/NodeBB/NodeBB.git
synced 2026-06-20 00:31:35 +02:00
segregated the "theme" route (now "appearance") into their own separate routes
This commit is contained in:
psychobunny
@@ -21,8 +21,20 @@ define('forum/admin/footer', ['forum/admin/settings'], function(Settings) {
|
||||
|
||||
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() {
|
||||
var menu = $('#acp-search .dropdown-menu');
|
||||
|
||||
|
||||
@@ -17,8 +17,6 @@ define('forum/admin/settings', ['uploader', 'sounds'], function(uploader, sounds
|
||||
return;
|
||||
}
|
||||
|
||||
setupPills();
|
||||
|
||||
// Populate the fields on the page from the config
|
||||
var fields = $('#content [data-field]'),
|
||||
numFields = fields.length,
|
||||
@@ -127,14 +125,6 @@ define('forum/admin/settings', ['uploader', 'sounds'], function(uploader, sounds
|
||||
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) {
|
||||
field = $(field);
|
||||
var key = field.attr('data-field'),
|
||||
|
||||
@@ -21,7 +21,7 @@ var adminController = {
|
||||
tags: {},
|
||||
topics: {},
|
||||
groups: {},
|
||||
themes: {},
|
||||
appearance: {},
|
||||
events: {},
|
||||
database: {},
|
||||
plugins: {},
|
||||
@@ -214,7 +214,19 @@ adminController.logger.get = function(req, res, next) {
|
||||
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({
|
||||
areas: function(next) {
|
||||
var defaultAreas = [
|
||||
@@ -264,14 +276,14 @@ adminController.themes.get = function(req, res, next) {
|
||||
});
|
||||
});
|
||||
|
||||
res.render('admin/themes', {
|
||||
res.render('admin/appearance/widgets', {
|
||||
templates: templates,
|
||||
areas: widgetData.areas,
|
||||
widgets: widgetData.widgets
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
adminController.groups.get = function(req, res, next) {
|
||||
groups.list({
|
||||
|
||||
@@ -39,7 +39,7 @@ function addRoutes(router, middleware, controllers) {
|
||||
//main
|
||||
router.get('/index', controllers.admin.home);
|
||||
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('/groups', controllers.admin.groups.get);
|
||||
router.get('/sounds', controllers.admin.sounds.get);
|
||||
|
||||
37
src/views/admin/appearance/customise.tpl
Normal file
37
src/views/admin/appearance/customise.tpl
Normal 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><head></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
Normal file
14
src/views/admin/appearance/footer.tpl
Normal 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
Normal file
12
src/views/admin/appearance/header.tpl
Normal 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
Normal file
19
src/views/admin/appearance/skins.tpl
Normal 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
Normal file
13
src/views/admin/appearance/themes.tpl
Normal 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
Normal file
105
src/views/admin/appearance/widgets.tpl
Normal 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"> </button>
|
||||
<button data-class="panel-primary" class="btn btn-xs btn-primary"> </button>
|
||||
<button data-class="panel-success" class="btn btn-xs btn-success"> </button>
|
||||
<button data-class="panel-info" class="btn btn-xs btn-info"> </button>
|
||||
<button data-class="panel-warning" class="btn btn-xs btn-warning"> </button>
|
||||
<button data-class="panel-danger" class="btn btn-xs btn-danger"> </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"> </button>
|
||||
<button data-class="alert-info" class="btn btn-xs btn-info"> </button>
|
||||
<button data-class="alert-warning" class="btn btn-xs btn-warning"> </button>
|
||||
<button data-class="alert-danger" class="btn btn-xs btn-danger"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IMPORT admin/appearance/footer.tpl -->
|
||||
@@ -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/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/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/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>
|
||||
|
||||
@@ -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><head></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"> </button>
|
||||
<button data-class="panel-primary" class="btn btn-xs btn-primary"> </button>
|
||||
<button data-class="panel-success" class="btn btn-xs btn-success"> </button>
|
||||
<button data-class="panel-info" class="btn btn-xs btn-info"> </button>
|
||||
<button data-class="panel-warning" class="btn btn-xs btn-warning"> </button>
|
||||
<button data-class="panel-danger" class="btn btn-xs btn-danger"> </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"> </button>
|
||||
<button data-class="alert-info" class="btn btn-xs btn-info"> </button>
|
||||
<button data-class="alert-warning" class="btn btn-xs btn-warning"> </button>
|
||||
<button data-class="alert-danger" class="btn btn-xs btn-danger"> </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>
|
||||
Reference in New Issue
Block a user