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

revamping categories management page in ACP, #2463

Browse Source
v1.18.x
Julian Lam 10 years ago
parent 1e6f5d822d
commit c98331de82
7 changed files with 101 additions and 283 deletions
Show Stats Download Patch File Download Diff File

1
public/less/admin/admin.less
Unescape Escape View File

@ -2,7 +2,6 @@
@import "./mixins"; @import "./mixins";
@import "./general/dashboard"; @import "./general/dashboard";
@import "./manage/categories";
@import "./manage/groups"; @import "./manage/groups";
@import "./manage/tags"; @import "./manage/tags";
@import "./manage/flags"; @import "./manage/flags";

133
public/less/admin/manage/categories.less
Unescape Escape View File

@ -1,133 +0,0 @@
.categories {
.entry-row {
border-radius: 10px;
cursor: move;
list-style-type: none;
}
.fa-icons .col-md-3 {
padding-left: 0;
padding-right: 0;
}
.admin-categories {
margin-top: 20px;
> ul > li {
label {
font-size: 12px;
font-weight: none;
}
form {
.btn-group {
display: block;
}
}
h3 {
margin-top: 0;
}
h3, h4 {
cursor: text;
.fa-edit {
cursor: pointer;
}
}
h3, h4, .toggle-settings {
padding-left: 8px;
}
.preview-box {
width: 100%;
height: 100px;
text-align: center;
color: white;
margin-top: 0;
.icon {
width: 30px;
height: 30px;
line-height: 40px;
display: inline-block;
margin: 35px 5px 0 5px;
}
}
.dropdown {
hr {
margin: 5px auto;
}
}
}
}
.permissions-modal {
.search-results {
padding: 0;
> li {
.zebra;
clear: both;
list-style-type: none;
padding: 0.5em;
min-height: 46px;
a {
&:before {
font-family: "FontAwesome";
content: "\f096";
display: inline-block;
min-width: 20px;
}
&.active:before {
content: "\f046";
}
}
img {
width: 32px;
margin-right: 1em;
}
}
}
.members {
li {
list-style-type: none;
.inline-block;
.pointer;
img {
width: 32px;
}
&.empty {
font-size: 12px;
cursor: auto;
min-height: 28px;
}
}
}
}
.category-list {
padding: 0;
li {
.inline-block;
.pointer;
padding: 0.5em;
margin: 0.25em;
.border-radius(3px);
&.disabled {
-webkit-filter: grayscale(30%);
.opacity(0.5);
}
}
}
}

4
public/src/admin/manage/categories.js
Unescape Escape View File

@ -40,10 +40,6 @@ define('admin/manage/categories', [
return false; return false;
} }
function update_blockclass(el) {
el.parentNode.parentNode.className = 'entry-row ' + el.value;
}
function updateCategoryOrders() { function updateCategoryOrders() {
var categories = $('.admin-categories #entry-container').children(); var categories = $('.admin-categories #entry-container').children();
for(var i = 0; i<categories.length; ++i) { for(var i = 0; i<categories.length; ++i) {

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

@ -118,33 +118,26 @@ function getStatsForSet(set, field, callback) {
}, callback); }, callback);
} }
adminController.categories.active = function(req, res, next) { adminController.categories.get = function(req, res, next) {
filterAndRenderCategories(req, res, next, true); var uid = req.user ? parseInt(req.user.uid, 10) : 0,
}; active = [],
disabled = [];
adminController.categories.disabled = function(req, res, next) {
filterAndRenderCategories(req, res, next, false);
};
function filterAndRenderCategories(req, res, next, active) {
var uid = req.user ? parseInt(req.user.uid, 10) : 0;
categories.getAllCategories(uid, function (err, categoryData) { categories.getAllCategories(uid, function (err, categoryData) {
if (err) { if (err) {
return next(err); return next(err);
} }
categoryData = categoryData.filter(function (category) { categoryData.filter(Boolean).forEach(function(category) {
if (!category) { (category.disabled ? disabled : active).push(category);
return false;
}
return active ? !category.disabled : category.disabled;
}); });
res.render('admin/manage/categories', { res.render('admin/manage/categories', {
categories: categoryData active: active,
disabled: disabled
}); });
}); });
} };
adminController.tags.get = function(req, res, next) { adminController.tags.get = function(req, res, next) {
topics.getTags(0, 199, function(err, tags) { topics.getTags(0, 199, function(err, tags) {

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

@ -44,9 +44,7 @@ function addRoutes(router, middleware, controllers) {
router.get('/general/languages', controllers.admin.languages.get); router.get('/general/languages', controllers.admin.languages.get);
router.get('/general/sounds', controllers.admin.sounds.get); router.get('/general/sounds', controllers.admin.sounds.get);
router.get('/manage/categories', controllers.admin.categories.active); router.get('/manage/categories', controllers.admin.categories.get);
router.get('/manage/categories/active', controllers.admin.categories.active);
router.get('/manage/categories/disabled', controllers.admin.categories.disabled);
router.get('/manage/tags', controllers.admin.tags.get); router.get('/manage/tags', controllers.admin.tags.get);

199
src/views/admin/manage/categories.tpl
Unescape Escape View File

@ -1,132 +1,40 @@
<div class="categories"> <div class="row">
<div class="col-lg-9"> <div class="col-lg-9">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div> <div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
<div class="panel-body"> <div class="panel-body">
<ul class="nav nav-pills"> <div class="row">
<li class='active'><a href='/admin/manage/categories/active'>Active</a></li> <table class="table table-striped table-hover">
<li class=''><a href='/admin/manage/categories/disabled'>Disabled</a></li> <thead>
</ul> <tr>
<th></th>
<div class="row admin-categories"> <th>Name</th>
<ul class="col-md-12" id="entry-container"> <th>Description</th>
<!-- BEGIN categories --> <th class="text-center">Topics</th>
<li data-cid="{categories.cid}" class="entry-row"> <th class="text-center">Posts</th>
<div class="well"> </tr>
<form class="form"> </thead>
<div class="row"> <tbody id="entry-container">
<div class="col-sm-2 hidden-xs text-center"> <!-- BEGIN active -->
<div class="preview-box" style=" <tr data-cid="{active.cid}">
<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage --> <td>
<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor --> <span class="label" style="
color: {categories.color}; <!-- IF active.backgroundImage -->background-image: url({active.backgroundImage});<!-- ENDIF active.backgroundImage -->
background-size:cover; <!-- IF active.bgColor -->background-color: {active.bgColor};<!-- ENDIF active.bgColor -->
"> color: {active.color};
<div class="icon"> background-size:cover;
<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i> ">
</div> <i data-name="icon" value="{active.icon}" class="fa fa-fw {active.icon}"></i>
</div><br /> </span>
<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button> </td>
<!-- IF categories.image --> <td>{active.name}</td>
<br/> <td>{active.description}</td>
<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small> <td class="text-center">{active.topic_count}</td>
<!-- ENDIF categories.image --> <td class="text-center">{active.post_count}</td>
</div> </tr>
<div class="col-sm-10"> <!-- END active -->
<div class="pull-right text-right"> </tbody>
<div class="form-group"> </table>
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
<ul class="dropdown-menu" role="menu">
<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
<hr />
<li data-disabled="{categories.disabled}">
<!-- IF categories.disabled -->
<a href="#"><i class="fa fa-power-off"></i> Enable</a>
<!-- ELSE -->
<a href="#"><i class="fa fa-power-off"></i> Disable</a>
<!-- ENDIF categories.disabled -->
</li>
<li><a href="#" class="purge"><i class="fa fa-eraser"></i> Purge</a></li>
</ul>
<button class="btn btn-primary save">Save</button>
</div>
</div>
</div>
<h3 data-edit-target="#cid-{categories.cid}-name"><span>{categories.name}</span> <small><i class="fa fa-edit"></i></small></h3>
<input id="cid-{categories.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{categories.name}" />
<h4 data-edit-target="#cid-{categories.cid}-description"><span>{categories.description}</span> <small><i class="fa fa-edit"></i></small></h4>
<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description input-sm description hide"></input>
<fieldset>
<div class="col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-parentCid">Parent Category</label>
<!-- IF categories.parent.name -->
<div class="btn-group">
<button type="button" class="btn btn-default" data-action="setParent" data-parentCid="{categories.parent.cid}"><i class="fa {categories.parent.icon}"></i> {categories.parent.name}</button>
<button type="button" class="btn btn-warning" data-action="removeParent" data-parentCid="{categories.parent.cid}"><i class="fa fa-times"></i></button>
</div>
<!-- ELSE -->
<button type="button" class="btn btn-default form-control" data-action="setParent"><i class="fa fa-sitemap"></i> (None)</button>
<!-- ENDIF categories.parent.name -->
</div>
</div>
</fieldset>
<fieldset>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-bgColor">Background Colour</label>
<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-color">Text Colour</label>
<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-imageClass">Image Class</label>
<select id="cid-{categories.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{categories.imageClass}">
<option value="auto">auto</option>
<option value="cover">cover</option>
<option value="contain">contain</option>
</select>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-class">Custom Class</label>
<input id="cid-{categories.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{categories.class}" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-numRecentReplies"># of Recent Replies Displayed</label>
<input id="cid-{categories.cid}-numRecentReplies" type="text" class="form-control" placeholder="2" data-name="numRecentReplies" value="{categories.numRecentReplies}" />
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="form-group">
<label for="cid-{categories.cid}-link">External Link</label>
<input id="cid-{categories.cid}-link" type="text" class="form-control" placeholder="http://domain.com" data-name="link" value="{categories.link}" />
</div>
</div>
</fieldset>
<input type="hidden" data-name="order" data-value="{categories.order}"></input>
</div>
</div>
</form>
</div>
</li>
<!-- END categories -->
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -142,6 +50,47 @@
</div> </div>
</div> </div>
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
<div class="panel-body">
<div class="row">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Description</th>
<th class="text-center">Topics</th>
<th class="text-center">Posts</th>
</tr>
</thead>
<tbody id="entry-container">
<!-- BEGIN disabled -->
<tr data-cid="{disabled.cid}">
<td>
<span class="label" style="
<!-- IF disabled.backgroundImage -->background-image: url({disabled.backgroundImage});<!-- ENDIF disabled.backgroundImage -->
<!-- IF disabled.bgColor -->background-color: {disabled.bgColor};<!-- ENDIF disabled.bgColor -->
color: {disabled.color};
background-size:cover;
">
<i data-name="icon" value="{disabled.icon}" class="fa fa-fw {disabled.icon}"></i>
</span>
</td>
<td>{disabled.name}</td>
<td>{disabled.description}</td>
<td class="text-center">{disabled.topic_count}</td>
<td class="text-center">{disabled.post_count}</td>
</tr>
<!-- END disabled -->
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- IMPORT admin/partials/categories/new.tpl --> <!-- IMPORT admin/partials/categories/new.tpl -->
<!-- IMPORT admin/partials/categories/permissions.tpl --> <!-- IMPORT admin/partials/categories/permissions.tpl -->
<!-- IMPORT admin/partials/categories/setParent.tpl --> <!-- IMPORT admin/partials/categories/setParent.tpl -->

16
src/views/admin/partials/categories/row.tpl
Unescape Escape View File

@ -0,0 +1,16 @@
<tr data-cid="{cid}">
<td>
<span class="label" style="
<!-- IF backgroundImage -->background-image: url({backgroundImage});<!-- ENDIF backgroundImage -->
<!-- IF bgColor -->background-color: {bgColor};<!-- ENDIF bgColor -->
color: {color};
background-size:cover;
">
<i data-name="icon" value="{icon}" class="fa fa-fw {icon}"></i>
</span>
</td>
<td>{name}</td>
<td>{description}</td>
<td class="text-center">{topic_count}</td>
<td class="text-center">{post_count}</td>
</tr>
Write Preview
Loading…
Cancel
Save