Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-01-30 19:30:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated groups ACP styling and template to use a table, like categories

Browse Source
This commit is contained in:
Julian Lam
2015-05-26 15:24:07 -04:00
parent a065a73637
commit b45335c6ba
5 changed files with 64 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/less/admin/admin.less
View File

@@ -3,7 +3,6 @@
@import "./general/dashboard";
@import "./general/navigation";
@import "./manage/groups";
@import "./manage/tags";
@import "./manage/flags";
@import "./manage/users";
@@ -350,3 +349,9 @@
max-height: 24px;
}
}
.groups-list {
.description {
font-size: 1rem;
}
}

54
public/less/admin/manage/groups.less
View File

@@ -1,54 +0,0 @@
.groups {
#groups-list {
padding-left: 0;
> li {
list-style-type: none;
margin-bottom: 1em;
padding: 1em;
.zebra;
h2 {
margin-top: 0;
font-size: 26px;
}
}
}
.members {
padding: 1em;
&.current_members {
li {
margin-right: 1em;
}
}
li {
display: inline-block;
border: 1px solid rgb(200, 200, 200);
img {
width: 32px;
}
span {
padding: 0 1em;
}
&:hover {
.pointer;
background: rgba(192, 192, 192, 0.2);
}
&.more {
width: 34px;
height: 34px;
vertical-align: top;
padding-top: 3px;
position: relative;
left: -4px;
}
}
}
}

27
public/less/generics.less
View File

@@ -13,4 +13,31 @@
.opacity(0.5);
}
}
}
.user-list {
padding-left: 2rem;
padding-top: 1rem;
li {
.pointer;
display: inline-block;
list-style-type: none;
padding: 0.5rem 1rem;
&:hover {
background: @gray-lighter;
}
img {
float: left;
max-width: 36px;
padding-right: 1rem;
}
span {
vertical-align: middle;
display: inline-block;
}
}
}

13
public/src/admin/manage/groups.js
View File

@@ -4,8 +4,9 @@
define('admin/manage/groups', [
'iconSelect',
'admin/modules/colorpicker',
'translator'
], function(iconSelect, colorpicker, translator) {
'translator',
'components'
], function(iconSelect, colorpicker, translator, components) {
var Groups = {};
Groups.init = function() {
@@ -26,9 +27,6 @@ define('admin/manage/groups', [
groupLabelPreview = $('#group-label-preview'),
searchDelay;
// Tooltips
$('#groups-list .members li').tooltip();
createModal.on('keypress', function(e) {
if (e.keyCode === 13) {
createModalGo.click();
@@ -87,10 +85,10 @@ define('admin/manage/groups', [
}, 0);
});
$('#groups-list').on('click', 'button[data-action]', function() {
$('.groups-list').on('click', 'button[data-action]', function() {
var el = $(this),
action = el.attr('data-action'),
groupName = el.parents('li[data-groupname]').attr('data-groupname');
groupName = el.parents('tr[data-groupname]').attr('data-groupname');
switch (action) {
case 'delete':
@@ -110,7 +108,6 @@ define('admin/manage/groups', [
break;
case 'members':
socket.emit('admin.groups.get', groupName, function(err, groupObj) {
changeGroupName.val(groupObj.name).prop('readonly', groupObj.system);
changeGroupDesc.val(groupObj.description);
changeGroupUserTitle.val(groupObj.userTitle);

57
src/views/admin/manage/groups.tpl
View File

@@ -3,36 +3,31 @@
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-group"></i> Groups List</div>
<div class="panel-body">
<ul id="groups-list">
<!-- BEGIN groups -->
<li data-groupname="{groups.name}">
<div class="row">
<div class="col-lg-8">
<h2>
{groups.name}
<!-- IF groups.system -->
<span class="badge">System Group</span>
<!-- ENDIF groups.system -->
</h2>
<p>{groups.description}</p>
<div class="btn-group">
<button class="btn btn-default" data-action="members">Edit</button>
<!-- IF groups.deletable -->
<button class="btn btn-danger" data-action="delete">Delete Group</button>
<!-- ENDIF groups.deletable -->
</div>
<table class="table table-striped groups-list">
<tr>
<th>Group Name</th>
<th>Group Description</th>
</tr>
<!-- BEGIN groups -->
<tr data-groupname="{groups.name}">
<td>
{groups.name}
<!-- IF groups.system -->
<span class="badge">System Group</span>
<!-- ENDIF groups.system -->
</td>
<td>
<div class="btn-group pull-right">
<button class="btn btn-default btn-xs" data-action="members"><i class="fa fa-edit"></i> Edit</button>
<!-- IF groups.deletable -->
<button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-times"></i></button>
<!-- ENDIF groups.deletable -->
</div>
<div class="col-lg-4">
<ul class="pull-right members">
<!-- BEGIN members --><li data-uid="{groups.members.uid}" data-toggle="tooltip" title="{groups.members.username}"><img src="{groups.members.picture}" /></li><!-- END members -->
<!-- IF groups.truncated --><li data-toggle="tooltip" title="Total: {groups.memberCount}" class="more"><i class="fa fa-users fa-2x"></i></li><!-- ENDIF groups.truncated -->
</ul>
</div>
</div>
</li>
<!-- END groups -->
</ul>
<p class="description">{groups.description}</p>
</td>
</tr>
<!-- END groups -->
</table>
</div>
</div>
</div>
@@ -113,12 +108,12 @@
<div class="form-group">
<label>Members</label>
<p>Click on a user to remove them from the group</p>
<ul class="members current_members" id="group-details-members"></ul>
<ul class="members current_members user-list"></ul>
</div>
<div class="form-group">
<label for="add-member">Add User to Group</label>
<input type="text" class="form-control" id="group-details-search" placeholder="Search Users" />
<ul class="members" id="group-details-search-results"></ul>
<ul class="members user-list" id="group-details-search-results"></ul>
</div>
</form>
</div>