From 6b3863bfbf09c59b3ed458aca7ab25a135a7c04c Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Tue, 26 Nov 2013 15:50:33 -0500
Subject: [PATCH] updated category manager in admin panel

---
 public/src/forum/admin/categories.js  | 13 +++---
 public/templates/admin/categories.tpl | 62 +++++++++++++++++++++++++--
 2 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/public/src/forum/admin/categories.js b/public/src/forum/admin/categories.js
index 358afb9141..c848378f75 100644
--- a/public/src/forum/admin/categories.js
+++ b/public/src/forum/admin/categories.js
@@ -130,11 +130,7 @@ define(function() {
 				select_icon($(this).find('i'));
 			});
 
-			jQuery('.blockclass').on('change', function(ev) {
-				update_blockclass(ev.target);
-			});
-
-			jQuery('.category_name, .category_description, .blockclass .category_bgColor').on('change', function(ev) {
+			jQuery('.admin-categories form input').on('change', function(ev) {
 				modified(ev.target);
 			});
 
@@ -164,13 +160,14 @@ define(function() {
 			// Colour Picker
 			$('[data-name="bgColor"], [data-name="color"]').each(function(idx, inputEl) {
 				var	jinputEl = $(this),
-					parentEl = jinputEl.parents('[data-cid]');
+					previewEl = jinputEl.parents('[data-cid]').find('.preview-box');
+
 				jinputEl.ColorPicker({
 					color: this.value || '#000',
 					onChange: function(hsb, hex) {
 						jinputEl.val('#' + hex);
-						if (inputEl.getAttribute('data-name') === 'bgColor') parentEl.css('background', '#' + hex);
-						else if (inputEl.getAttribute('data-name') === 'color') parentEl.css('color', '#' + hex);
+						if (inputEl.getAttribute('data-name') === 'bgColor') previewEl.css('background', '#' + hex);
+						else if (inputEl.getAttribute('data-name') === 'color') previewEl.css('color', '#' + hex);
 						modified(inputEl);
 					}
 				});
diff --git a/public/templates/admin/categories.tpl b/public/templates/admin/categories.tpl
index ceddd9a51c..4d863fa624 100644
--- a/public/templates/admin/categories.tpl
+++ b/public/templates/admin/categories.tpl
@@ -12,8 +12,64 @@
 	<div class="row admin-categories">
 		<ul class="col-md-12" id="entry-container">
 		<!-- BEGIN categories -->
-			<li data-cid="{categories.cid}" class="entry-row" style="background: {categories.bgColor}; color: {categories.color};">
-				<form class="form-inline">
+			<li data-cid="{categories.cid}" class="entry-row">
+				<div class="row">
+					<div class="col-sm-2 hidden-xs">
+						<div class="preview-box" style="background: {categories.bgColor}; color: {categories.color};">
+							<div class="icon">
+								<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
+							</div>
+						</div>
+					</div>
+					<div class="col-sm-10">
+						<form class="form">
+							<div class="row">
+								<div class="col-sm-4 hidden-xs">
+									<div class="form-group">
+										<label for="cid-{categories.cid}-name">Category Name</label>
+										<input id="cid-{categories.cid}-name" type="text" class="form-control" placeholder="Category Name" data-name="name" value="{categories.name}" />
+									</div>
+								</div>
+								<div class="col-sm-4 hidden-xs">
+									<div class="form-group">
+										<div class="form-group">
+											<label for="cid-{categories.cid}-bgColor">Background Colour</label>
+											<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
+										</div>
+									</div>
+								</div>
+								<div class="col-sm-4 col-xs-12">
+									<div class="form-group">
+										<div class="form-group">
+											<label for="cid-{categories.cid}-color">Text Colour</label>
+											<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
+										</div>
+									</div>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col-sm-8">
+									<div class="form-group">
+										<div class="form-group">
+											<label for="cid-{categories.cid}-description">Description</label>
+											<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description description"></input>
+										</div>
+									</div>
+								</div>
+								<div class="col-sm-4">
+									<div class="form-group">
+										<div class="form-group">
+											<label>&nbsp;</label>
+											<button type="submit" class="btn btn-default disable-btn" data-disabled="{categories.disabled}">Disable</button>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<input type="hidden" data-name="order" data-value="{categories.order}"></input>
+						</form>
+					</div>
+				<!-- <form class="form-inline">
 					<div class="icon">
 						<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
 					</div>
@@ -23,7 +79,7 @@
 					<input data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description description"></input>
 					<input type="hidden" data-name="order" data-value="{categories.order}"></input>
 					<button type="submit" class="btn btn-default disable-btn" data-disabled="{categories.disabled}">Disable</button>
-				</form>
+				</form> -->
 			</li>
 
 		<!-- END categories -->