From f9053c077de535204a4d222a2c1d84019e4ea227 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Tue, 26 May 2015 15:24:07 -0400
Subject: [PATCH] updated groups ACP styling and template to use a table, like
 categories

Conflicts:
	src/views/admin/manage/groups.tpl
---
 public/less/admin/admin.less      |  6 ++++
 public/less/generics.less         | 27 ++++++++++++++
 public/src/admin/manage/groups.js | 13 +++----
 src/views/admin/manage/groups.tpl | 59 ++++++++++++++-----------------
 4 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less
index 7700db2437..74a4b459ff 100644
--- a/public/less/admin/admin.less
+++ b/public/less/admin/admin.less
@@ -349,3 +349,9 @@
 		max-height: 24px;
 	}
 }
+
+.groups-list {
+	.description {
+		font-size: 1rem;
+	}
+}
diff --git a/public/less/generics.less b/public/less/generics.less
index e44d5f0d72..4ce04c4337 100644
--- a/public/less/generics.less
+++ b/public/less/generics.less
@@ -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;
+		}
+	}
 }
\ No newline at end of file
diff --git a/public/src/admin/manage/groups.js b/public/src/admin/manage/groups.js
index f604bc9387..e0b27a674d 100644
--- a/public/src/admin/manage/groups.js
+++ b/public/src/admin/manage/groups.js
@@ -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);
diff --git a/src/views/admin/manage/groups.tpl b/src/views/admin/manage/groups.tpl
index 7dd0bfe5f5..de13d4fb5c 100644
--- a/src/views/admin/manage/groups.tpl
+++ b/src/views/admin/manage/groups.tpl
@@ -2,37 +2,32 @@
 	<div class="col-lg-9">
 		<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.system -->
-									<button class="btn btn-danger" data-action="delete">Delete Group</button>
-									<!-- ENDIF !groups.system -->
-								</div>
+			<div class="panel-body">	
+				<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.system -->
+								<button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-times"></i></button>
+								<!-- ENDIF !groups.system -->
 							</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>