closes #1678

public/src/admin.js

@@ -16,6 +16,9 @@ var admin = {};
 					if (typeof callback === 'function') {
 						callback(hsb, hex);
 					}
+				},
+				onShow: function(colpkr) {
+					$(colpkr).css('z-index', 1051);
 				}
 			});
 		});

public/src/forum/admin/categories.js

@@ -1,7 +1,7 @@
 "use strict";
 /*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
 
-define('forum/admin/categories', ['uploader'], function(uploader) {
+define('forum/admin/categories', ['uploader', 'forum/admin/iconSelect'], function(uploader, iconSelect) {
 	var	Categories = {};
 
 	Categories.init = function() {
@@ -36,44 +36,6 @@ define('forum/admin/categories', ['uploader'], function(uploader) {
 			return false;
 		}
 
-		function select_icon(el) {
-			var selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, '');
-			$('#icons .selected').removeClass('selected');
-
-			if (selected === '') {
-				selected = 'fa-doesnt-exist';
-			}
-			if (selected) {
-				$('#icons .fa-icons .fa.' + selected).parent().addClass('selected');
-			}
-
-			bootbox.confirm('<h2>Select an icon.</h2>' + $('#icons').html(), function(confirm) {
-				if (confirm) {
-					var iconClass = $('.bootbox .selected').children(':first').attr('class');
-
-					el.attr('class', iconClass + ' fa-2x');
-
-					// remove the 'fa ' from the class name, just need the icon name itself
-					var categoryIconClass = iconClass.replace('fa ', '');
-					if(categoryIconClass === 'fa-doesnt-exist') {
-						categoryIconClass = '';
-					}
-					el.val(categoryIconClass);
-					el.attr('value', categoryIconClass);
-
-					modified(el);
-				}
-			});
-
-			setTimeout(function() { //bootbox was rewritten for BS3 and I had to add this timeout for the previous code to work. TODO: to look into
-				$('.bootbox .col-md-3').on('click', function() {
-					$('.bootbox .selected').removeClass('selected');
-					$(this).addClass('selected');
-				});
-			}, 500);
-		}
-
-
 		function update_blockclass(el) {
 			el.parentNode.parentNode.className = 'entry-row ' + el.value;
 		}
@@ -186,12 +148,8 @@ define('forum/admin/categories', ['uploader'], function(uploader) {
 			$('#addNew').on('click', showCreateCategoryModal);
 			$('#create-category-btn').on('click', createNewCategory);
 
-			$('#entry-container').on('click', '.icon', function(ev) {
+			$('#entry-container, #new-category-modal').on('click', '.icon', function(ev) {
-				select_icon($(this).find('i'));
+				iconSelect.init($(this).find('i'), modified);
-			});
-
-			$('#new-category-modal').on('click', '.icon', function(ev) {
-				select_icon($(this).find('i'));
 			});
 
 			$('.admin-categories form input, .admin-categories form select').on('change', function(ev) {

public/src/forum/admin/groups.js

@@ -1,14 +1,12 @@
 "use strict";
 /*global define, templates, socket, ajaxify, app, bootbox*/
 
-define('forum/admin/groups', function() {
+define('forum/admin/groups', ['forum/admin/iconSelect'], function(iconSelect) {
 	var	Groups = {};
 
 	Groups.init = function() {
 		var yourid = ajaxify.variables.get('yourid'),
-			createEl = $('#create'),
 			createModal = $('#create-modal'),
-			createSubmitBtn = $('#create-modal-go'),
 			createNameEl = $('#create-group-name'),
 			detailsModal = $('#group-details-modal'),
 			detailsSearch = detailsModal.find('#group-details-search'),
@@ -18,14 +16,14 @@ define('forum/admin/groups', function() {
 			searchDelay,
 			listEl = $('#groups-list');
 
-		createEl.on('click', function() {
+		$('#create').on('click', function() {
 			createModal.modal('show');
 			setTimeout(function() {
 				createNameEl.focus();
 			}, 250);
 		});
 
-		createSubmitBtn.on('click', function() {
+		$('#create-modal-go').on('click', function() {
 			var submitObj = {
 					name: createNameEl.val(),
 					description: $('#create-group-desc').val()
@@ -80,20 +78,18 @@ define('forum/admin/groups', function() {
 				break;
 			case 'members':
 				socket.emit('admin.groups.get', groupName, function(err, groupObj) {
-					var formEl = detailsModal.find('form'),
+					var formEl = detailsModal.find('form');
-						nameEl = formEl.find('#change-group-name'),
-						descEl = formEl.find('#change-group-desc'),
-						userTitleEl = formEl.find('#change-group-user-title'),
-						numMembers = groupObj.members.length,
-						x;
 
-					nameEl.val(groupObj.name);
+					formEl.find('#change-group-name').val(groupObj.name);
-					descEl.val(groupObj.description);
+					formEl.find('#change-group-desc').val(groupObj.description);
-					userTitleEl.val(groupObj.userTitle);
+					formEl.find('#change-group-user-title').val(groupObj.userTitle);
+					formEl.find('#group-icon').attr('class', 'fa fa-2x ' + groupObj.icon).attr('value', groupObj.icon);
+					formEl.find('#change-group-label-color').val(groupObj.labelColor);
+					formEl.find('#group-label-preview').css('background', groupObj.labelColor || '#000000').text(groupObj.userTitle);
 
-					if (numMembers > 0) {
+					if (groupObj.members.length > 0) {
 						groupMembersEl.empty();
-						for (x = 0; x < numMembers; x++) {
+						for (var x = 0; x < groupObj.members.length; x++) {
 							var memberIcon = $('<li />')
 								.attr('data-uid', groupObj.members[x].uid)
 								.append($('<img />').attr('src', groupObj.members[x].picture))
@@ -189,19 +185,25 @@ define('forum/admin/groups', function() {
 			});
 		});
 
+		$('#change-group-icon').on('click', function() {
+			iconSelect.init($('#group-icon'));
+		});
+
+		admin.enableColorPicker($('#change-group-label-color'), function(hsb, hex) {
+			$('#group-label-preview').css('background-color', '#' + hex);
+		});
+
 		detailsModalSave.on('click', function() {
-			var formEl = detailsModal.find('form'),
+			var formEl = detailsModal.find('form');
-				nameEl = formEl.find('#change-group-name'),
-				descEl = formEl.find('#change-group-desc'),
-				userTitleEl = formEl.find('#change-group-user-title'),
-				groupName = detailsModal.attr('data-groupname');
 
 			socket.emit('admin.groups.update', {
-				groupName: groupName,
+				groupName: detailsModal.attr('data-groupname'),
 				values: {
-					name: nameEl.val(),
+					name: formEl.find('#change-group-name').val(),
-					userTitle: userTitleEl.val(),
+					userTitle: formEl.find('#change-group-user-title').val(),
-					description: descEl.val()
+					description: formEl.find('#change-group-desc').val(),
+					icon: formEl.find('#group-icon').attr('value'),
+					labelColor: formEl.find('#change-group-label-color').val()
 				}
 			}, function(err) {
 				if (!err) {

public/src/forum/admin/iconSelect.js

@@ -0,0 +1,47 @@
+
+'use strict';
+
+/* globals define, bootbox */
+
+define(function() {
+	var iconSelect = {};
+
+	iconSelect.init = function(el, onModified) {
+		onModified = onModified || function() {};
+		var selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, '');
+		$('#icons .selected').removeClass('selected');
+
+		if (selected === '') {
+			selected = 'fa-doesnt-exist';
+		}
+		if (selected) {
+			$('#icons .fa-icons .fa.' + selected).parent().addClass('selected');
+		}
+
+		bootbox.confirm('<h2>Select an icon.</h2>' + $('#icons').html(), function(confirm) {
+			if (confirm) {
+				var iconClass = $('.bootbox .selected').attr('class');
+				var categoryIconClass = $('<div/>').addClass(iconClass).removeClass('fa').removeClass('selected').attr('class');
+				if (categoryIconClass === 'fa-doesnt-exist') {
+					categoryIconClass = '';
+				}
+
+				el.attr('class', 'fa fa-2x ' + categoryIconClass);
+				el.val(categoryIconClass);
+				el.attr('value', categoryIconClass);
+
+				onModified(el);
+			}
+		});
+
+		setTimeout(function() { //bootbox was rewritten for BS3 and I had to add this timeout for the previous code to work. TODO: to look into
+			$('.bootbox .fa-icons i').on('click', function() {
+				$('.bootbox .selected').removeClass('selected');
+				$(this).addClass('selected');
+			});
+		}, 500);
+	};
+
+	return iconSelect;
+});
+

src/groups.js

@@ -229,7 +229,9 @@
 
 			db.setObject('group:' + groupName, {
 				userTitle: values.userTitle,
-				description: values.description
+				description: values.description,
+				icon: values.icon || '',
+				labelColor: values.labelColor || '#000000'
 			}, callback);
 		});
 	};
@@ -328,7 +330,7 @@
 				return 'group:' + groupName;
 			});
 
-			db.getObjectsFields(groupKeys, ['name', 'hidden', 'userTitle'], function(err, groupData) {
+			db.getObjectsFields(groupKeys, ['name', 'hidden', 'userTitle', 'icon', 'labelColor'], function(err, groupData) {
 
 				groupData = groupData.filter(function(group) {
 					return parseInt(group.hidden, 10) !== 1;
@@ -336,8 +338,9 @@
 
 				var groupSets = groupData.map(function(group) {
 					group.userTitle = group.userTitle || group.name;
+					group.labelColor = group.labelColor || '#000000';
 					return 'group:' + group.name + ':members';
-				})
+				});
 
 				db.isMemberOfSets(groupSets, uid, function(err, isMembers) {
 					for(var i=isMembers.length - 1; i>=0; --i) {