Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-01-28 18:29:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5468 from pichalite/acp-groups

Browse Source 
ACP manage groups UI updates
This commit is contained in:
psychobunny
2017-02-23 13:22:57 -05:00
committed by GitHub
parent c1b1ff5c6e dcb0f18422
commit 7b7565ee8e
6 changed files with 144 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/less/admin/admin.less
View File

@@ -146,7 +146,7 @@ body {
color: @gray-dark;
&:hover, &.selected {
background: black;
background: @brand-primary;
color: white;
}
}

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

@@ -5,10 +5,25 @@
max-height: 500px;
display: block;
overflow-y: auto;
padding-bottom: 100px;
.member-name {
width: 100%;
}
}
}
}
#group-icon {
cursor: pointer;
}
}
.groups {
#group-search {
margin-bottom: 10px;
}
.groups-list {
p {
margin: 0;
}
}
}

73
public/src/admin/manage/group.js
View File

@@ -7,10 +7,10 @@ define('admin/manage/group', [
'admin/modules/colorpicker',
'translator'
], function (memberList, iconSelect, colorpicker, translator) {
var Groups = {};
var Groups = {};
Groups.init = function () {
var groupDetailsSearch = $('#group-details-search'),
var groupDetailsSearch = $('#group-details-search'),
groupDetailsSearchResults = $('#group-details-search-results'),
groupIcon = $('#group-icon'),
changeGroupUserTitle = $('#change-group-user-title'),
@@ -41,9 +41,12 @@ define('admin/manage/group', [
var searchText = groupDetailsSearch.val(),
foundUser;
socket.emit('admin.user.search', {query: searchText}, function (err, results) {
socket.emit('admin.user.search', {
query: searchText
}, function (err, results) {
if (!err && results && results.users.length > 0) {
var numResults = results.users.length, x;
var numResults = results.users.length,
x;
if (numResults > 20) {
numResults = 20;
}
@@ -53,7 +56,8 @@ define('admin/manage/group', [
for (x = 0; x < numResults; x++) {
foundUser = $('<li />');
foundUser
.attr({title: results.users[x].username,
.attr({
title: results.users[x].username,
'data-uid': results.users[x].uid,
'data-username': results.users[x].username,
'data-userslug': results.users[x].userslug,
@@ -96,7 +100,12 @@ define('admin/manage/group', [
"icon:text": userLabel.attr('data-usericon-text')
};
templates.parse('partials/groups/memberlist', 'members', {group: {isOwner: ajaxify.data.group.isOwner, members: [member]}}, function (html) {
templates.parse('admin/partials/groups/memberlist', 'members', {
group: {
isOwner: ajaxify.data.group.isOwner,
members: [member]
}
}, function (html) {
translator.translate(html, function (html) {
$('[component="groups/members"] tbody').prepend(html);
});
@@ -112,38 +121,38 @@ define('admin/manage/group', [
uid = userRow.attr('data-uid'),
action = btnEl.attr('data-action');
switch(action) {
case 'toggleOwnership':
socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), {
toUid: uid,
switch (action) {
case 'toggleOwnership':
socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), {
toUid: uid,
groupName: groupName
}, function (err) {
if (err) {
return app.alertError(err.message);
}
ownerFlagEl.toggleClass('invisible');
});
break;
case 'kick':
bootbox.confirm('[[admin/manage/groups:edit.confirm-remove-user]]', function (confirm) {
if (!confirm) {
return;
}
socket.emit('admin.groups.leave', {
uid: uid,
groupName: groupName
}, function (err) {
if (err) {
return app.alertError(err.message);
}
ownerFlagEl.toggleClass('invisible');
userRow.slideUp().remove();
});
break;
case 'kick':
bootbox.confirm('[[admin/manage/groups:edit.confirm-remove-user]]', function (confirm) {
if (!confirm) {
return;
}
socket.emit('admin.groups.leave', {
uid: uid,
groupName: groupName
}, function (err) {
if (err) {
return app.alertError(err.message);
}
userRow.slideUp().remove();
});
});
break;
default:
break;
});
break;
default:
break;
}
});
@@ -155,7 +164,7 @@ define('admin/manage/group', [
groupLabelPreview.css('background-color', '#' + hex);
});
$('.save').on('click', function () {
$('#save').on('click', function () {
socket.emit('admin.groups.update', {
groupName: groupName,
values: {

34
src/views/admin/manage/group.tpl
View File

@@ -39,7 +39,7 @@
<fieldset>
<div class="checkbox">
<label>
<input id="group-private" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
<input id="group-private" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->>
<strong>[[groups:details.private]]</strong>
<p class="help-block">
[[admin/manage/groups:edit.private-details]]
@@ -56,7 +56,7 @@
<fieldset>
<div class="checkbox">
<label>
<input id="group-disableJoinRequests" name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->>
<input id="group-disableJoinRequests" name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->>
<strong>[[admin/manage/groups:edit.disable-requests]]</strong>
</label>
</div>
@@ -65,7 +65,7 @@
<fieldset>
<div class="checkbox">
<label>
<input id="group-hidden" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
<input id="group-hidden" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->>
<strong>[[admin/manage/groups:edit.hidden]]</strong>
<p class="help-block">
[[admin/manage/groups:edit.hidden-details]]
@@ -87,36 +87,19 @@
<h3 class="panel-title"><i class="fa fa-users"></i> [[admin/manage/groups:edit.members]]</h3>
</div>
<div class="panel-body">
<!-- IMPORT partials/groups/memberlist.tpl -->
<!-- IMPORT admin/partials/groups/memberlist.tpl -->
</div>
</div>
</fieldset>
</div>
</div>
<div class="col-md-3 options acp-sidebar">
<div class="panel panel-default">
<div class="panel-heading">[[admin/manage/groups:control-panel]]</div>
<div class="panel-body">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary save">[[global:save]]</button>
</div>
<div class="btn-group">
<button class="btn btn-default revert">
[[admin/manage/groups:revert]]
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">save</i>
</button>
<div id="icons" style="display:none;">
<div class="icon-container">
<div class="row fa-icons">
@@ -125,4 +108,3 @@
</div>
</div>
</div>

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

@@ -1,47 +1,45 @@
<div class="groups">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-body">
<table class="table table-striped groups-list">
<tr>
<th>[[admin/manage/groups:name]]</th>
<th>[[admin/manage/groups:description]]</th>
</tr>
<!-- BEGIN groups -->
<tr data-groupname="{groups.displayName}">
<td>
{groups.displayName}
<!-- IF groups.system -->
<span class="badge">[[admin/manage/groups:system]]</span>
<!-- ENDIF groups.system -->
</td>
<td>
<div class="btn-group pull-right">
<a href="{config.relative_path}/admin/manage/groups/{groups.nameEncoded}" class="btn btn-default btn-xs">
<i class="fa fa-edit"></i> [[admin/manage/groups:edit]]
</a>
<!-- IF !groups.system -->
<button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-times"></i></button>
<!-- ENDIF !groups.system -->
</div>
<p class="description">{groups.description}</p>
</td>
</tr>
<!-- END groups -->
</table>
<!-- IMPORT partials/paginator.tpl -->
</div>
<div class="row groups">
<div class="col-xs-12">
<div>
<input id="group-search" type="text" class="form-control" placeholder="[[admin/manage/groups:search-placeholder]]" />
</div>
</div>
<div class="col-lg-3 acp-sidebar">
<div class="panel panel-default">
<div class="panel-body">
<div>
<input id="group-search" type="text" class="form-control" placeholder="[[admin/manage/groups:search-placeholder]]" />
</div>
</div>
</div>
<table class="table table-striped groups-list">
<thead>
<tr>
<th>[[admin/manage/groups:name]]</th>
<th class="hidden-xs">[[admin/manage/groups:description]]</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- BEGIN groups -->
<tr data-groupname="{groups.displayName}">
<td>
{groups.displayName}
<!-- IF groups.system -->
<span class="badge">[[admin/manage/groups:system]]</span>
<!-- ENDIF groups.system -->
</td>
<td class="hidden-xs">
<p class="description">{groups.description}</p>
</td>
<td>
<div class="btn-group ">
<a href="{config.relative_path}/admin/manage/groups/{groups.nameEncoded}" class="btn btn-default btn-xs">
<i class="fa fa-edit"></i> [[admin/manage/groups:edit]]
</a>
<!-- IF !groups.system -->
<button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-times"></i></button>
<!-- ENDIF !groups.system -->
</div>
</td>
</tr>
<!-- END groups -->
</tbody>
</table>
<!-- IMPORT partials/paginator.tpl -->
</div>
<div class="modal fade" id="create-modal">
@@ -75,10 +73,8 @@
</div>
</div>
</div>
</div>
<button id="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>

37
src/views/admin/partials/groups/memberlist.tpl Normal file
View File

@@ -0,0 +1,37 @@
<div class="input-group">
<input class="form-control" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
</div><br />
<table component="groups/members" class="table table-striped table-hover" data-nextstart="{group.membersNextStart}">
<tbody>
<!-- BEGIN members -->
<tr data-uid="{group.members.uid}">
<td>
<a href="{config.relative_path}/user/{group.members.userslug}">
<!-- IF group.members.picture -->
<img class="avatar avatar-sm" src="{group.members.picture}" />
<!-- ELSE -->
<div class="avatar avatar-sm" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
<!-- ENDIF group.members.picture -->
</a>
</td>
<td class="member-name">
<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
<!-- IF group.isOwner -->
<div class="owner-controls btn-group pull-right">
<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
<i class="fa fa-star"></i>
</a>
<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
<i class="fa fa-ban"></i>
</a>
</div>
<!-- ENDIF group.isOwner -->
</td>
</tr>
<!-- END members -->
</tbody>
</table>