mirror of
https://github.com/NodeBB/NodeBB.git
synced 2025-11-05 05:25:49 +01:00
revamping categories management page in ACP, #2463
This commit is contained in:
Julian Lam
@@ -2,7 +2,6 @@
|
||||
@import "./mixins";
|
||||
|
||||
@import "./general/dashboard";
|
||||
@import "./manage/categories";
|
||||
@import "./manage/groups";
|
||||
@import "./manage/tags";
|
||||
@import "./manage/flags";
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,10 +40,6 @@ define('admin/manage/categories', [
|
||||
return false;
|
||||
}
|
||||
|
||||
function update_blockclass(el) {
|
||||
el.parentNode.parentNode.className = 'entry-row ' + el.value;
|
||||
}
|
||||
|
||||
function updateCategoryOrders() {
|
||||
var categories = $('.admin-categories #entry-container').children();
|
||||
for(var i = 0; i<categories.length; ++i) {
|
||||
|
||||
@@ -118,33 +118,26 @@ function getStatsForSet(set, field, callback) {
|
||||
}, callback);
|
||||
}
|
||||
|
||||
adminController.categories.active = function(req, res, next) {
|
||||
filterAndRenderCategories(req, res, next, true);
|
||||
};
|
||||
adminController.categories.get = function(req, res, next) {
|
||||
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) {
|
||||
if (err) {
|
||||
return next(err);
|
||||
}
|
||||
|
||||
categoryData = categoryData.filter(function (category) {
|
||||
if (!category) {
|
||||
return false;
|
||||
}
|
||||
return active ? !category.disabled : category.disabled;
|
||||
categoryData.filter(Boolean).forEach(function(category) {
|
||||
(category.disabled ? disabled : active).push(category);
|
||||
});
|
||||
|
||||
res.render('admin/manage/categories', {
|
||||
categories: categoryData
|
||||
active: active,
|
||||
disabled: disabled
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
adminController.tags.get = function(req, res, next) {
|
||||
topics.getTags(0, 199, function(err, tags) {
|
||||
|
||||
@@ -44,9 +44,7 @@ function addRoutes(router, middleware, controllers) {
|
||||
router.get('/general/languages', controllers.admin.languages.get);
|
||||
router.get('/general/sounds', controllers.admin.sounds.get);
|
||||
|
||||
router.get('/manage/categories', controllers.admin.categories.active);
|
||||
router.get('/manage/categories/active', controllers.admin.categories.active);
|
||||
router.get('/manage/categories/disabled', controllers.admin.categories.disabled);
|
||||
router.get('/manage/categories', controllers.admin.categories.get);
|
||||
|
||||
router.get('/manage/tags', controllers.admin.tags.get);
|
||||
|
||||
|
||||
@@ -1,132 +1,40 @@
|
||||
<div class="categories">
|
||||
<div class="row">
|
||||
<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">
|
||||
<ul class="nav nav-pills">
|
||||
<li class='active'><a href='/admin/manage/categories/active'>Active</a></li>
|
||||
<li class=''><a href='/admin/manage/categories/disabled'>Disabled</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="row admin-categories">
|
||||
<ul class="col-md-12" id="entry-container">
|
||||
<!-- BEGIN categories -->
|
||||
<li data-cid="{categories.cid}" class="entry-row">
|
||||
<div class="well">
|
||||
<form class="form">
|
||||
<div class="row">
|
||||
<div class="col-sm-2 hidden-xs text-center">
|
||||
<div class="preview-box" style="
|
||||
<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage -->
|
||||
<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor -->
|
||||
color: {categories.color};
|
||||
<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 active -->
|
||||
<tr data-cid="{active.cid}">
|
||||
<td>
|
||||
<span class="label" style="
|
||||
<!-- IF active.backgroundImage -->background-image: url({active.backgroundImage});<!-- ENDIF active.backgroundImage -->
|
||||
<!-- IF active.bgColor -->background-color: {active.bgColor};<!-- ENDIF active.bgColor -->
|
||||
color: {active.color};
|
||||
background-size:cover;
|
||||
">
|
||||
<div class="icon">
|
||||
<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
|
||||
</div>
|
||||
</div><br />
|
||||
<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
|
||||
<!-- IF categories.image -->
|
||||
<br/>
|
||||
<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small>
|
||||
<!-- ENDIF categories.image -->
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="pull-right text-right">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
<i data-name="icon" value="{active.icon}" class="fa fa-fw {active.icon}"></i>
|
||||
</span>
|
||||
</td>
|
||||
<td>{active.name}</td>
|
||||
<td>{active.description}</td>
|
||||
<td class="text-center">{active.topic_count}</td>
|
||||
<td class="text-center">{active.post_count}</td>
|
||||
</tr>
|
||||
<!-- END active -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,6 +50,47 @@
|
||||
</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/permissions.tpl -->
|
||||
<!-- IMPORT admin/partials/categories/setParent.tpl -->
|
||||
|
||||
16
src/views/admin/partials/categories/row.tpl
Normal file
16
src/views/admin/partials/categories/row.tpl
Normal 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>
|
||||
Reference in New Issue
Block a user