icon selection interface -- moved iconSelect module out of admin space, #2588

public/less/admin/admin.less

@@ -195,25 +195,6 @@
 		}
 	}
 
-	.icon-container {
-		.row {
-			margin: 0;
-			i {
-				width:20px;
-				height:20px;
-				margin: 1px;
-				.pointer;
-				line-height: 20px;
-				text-align: center;
-
-				&:hover, &.selected {
-					background: black;
-					color: white;
-				}
-			}
-		}
-	}
-
 	.navbar {
 		padding: 0 5px;
 

public/src/admin/manage/categories.js

@@ -3,7 +3,7 @@
 
 define('admin/manage/categories', [
 	'uploader',
-	'admin/modules/iconSelect',
+	'iconSelect',
 	'admin/modules/colorpicker'
 ], function(uploader, iconSelect, colorpicker) {
 	var	Categories = {};

public/src/admin/manage/groups.js

@@ -2,7 +2,7 @@
 /*global define, templates, socket, ajaxify, app, admin, bootbox*/
 
 define('admin/manage/groups', [
-	'admin/modules/iconSelect',
+	'iconSelect',
 	'admin/modules/colorpicker'
 ], function(iconSelect, colorpicker) {
 	var	Groups = {};

public/src/client/groups/details.js

@@ -1,7 +1,7 @@
 "use strict";
 /* globals define, socket, ajaxify, app */
 
-define('forum/groups/details', function() {
+define('forum/groups/details', ['iconSelect'], function(iconSelect) {
 	var Details = {};
 
 	Details.init = function() {
@@ -61,7 +61,9 @@ define('forum/groups/details', function() {
 		var settingsFormEl = $('.groups form'),
 			colorBtn = settingsFormEl.find('[data-action="color-select"]'),
 			colorValueEl = settingsFormEl.find('[name="labelColor"]'),
-			previewEl = settingsFormEl.find('.label');
+			iconBtn = settingsFormEl.find('[data-action="icon-select"]'),
+			previewEl = settingsFormEl.find('.label'),
+			previewIcon = previewEl.find('i');
 
 		if (settingsFormEl.length) {
 			// Add color picker to settings form
@@ -77,6 +79,11 @@ define('forum/groups/details', function() {
 					}
 				});
 			});
+
+			// Add icon selection interface
+			iconSelect.init(previewIcon, function() {
+				console.log(arguments);
+			});
 		}
 	};
 

public/src/modules/iconSelect.js

@@ -7,7 +7,9 @@ define(function() {
 
 	iconSelect.init = function(el, onModified) {
 		onModified = onModified || function() {};
-		var selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, '');
+		var doubleSize = el.hasClass('fa-2x'),
+			selected = el.attr('class').replace('fa-2x', '').replace('fa', '').replace(/\s+/g, '');
+
 		$('#icons .selected').removeClass('selected');
 
 		if (selected === '') {
@@ -25,7 +27,7 @@ define(function() {
 					categoryIconClass = '';
 				}
 
-				el.attr('class', 'fa fa-2x ' + categoryIconClass);
+				el.attr('class', 'fa ' + (doubleSize ? 'fa-2x ' : '') + categoryIconClass);
 				el.val(categoryIconClass);
 				el.attr('value', categoryIconClass);
 

src/views/admin/manage/categories.tpl

@@ -149,7 +149,7 @@
 		<div class="icon-container">
 			<div class="row fa-icons">
 				<i class="fa fa-doesnt-exist"></i>
-				<!-- IMPORT admin/partials/fontawesome.tpl -->
+				<!-- IMPORT partials/fontawesome.tpl -->
 			</div>
 		</div>
 	</div>

src/views/admin/manage/groups.tpl

@@ -136,7 +136,7 @@
 	<div class="icon-container">
 		<div class="row fa-icons">
 			<i class="fa fa-doesnt-exist"></i>
-			<!-- IMPORT admin/partials/fontawesome.tpl -->
+			<!-- IMPORT partials/fontawesome.tpl -->
 		</div>
 	</div>
 </div>