prettier admin navigation page

public/less/admin/general/navigation.less

@@ -1,10 +1,15 @@
-#navigation {
-	ul {
-		list-style-type: none;
-		padding: 0;
+#main-nav {
+	.active {
+		background-color: #eee;
+	}
 
 	li {
 		cursor: move;
 	}
+}
+#navigation {
+	ul {
+		list-style-type: none;
+		padding: 0;
 	}
 }

public/src/admin/general/navigation.js

@@ -1,7 +1,7 @@
 "use strict";
 /* global define, app, ajaxify, socket, templates, bootbox */
 
-define('admin/general/navigation', ['translator'], function(translator) {
+define('admin/general/navigation', ['translator', 'iconSelect'], function(translator, iconSelect) {
 	var navigation = {},
 		available;
 
@@ -9,46 +9,87 @@ define('admin/general/navigation', ['translator'], function(translator) {
 		available = ajaxify.data.available;
 
 		$('#enabled').html(translator.unescape($('#enabled').html()));
+
+		$('#main-nav').html(translator.unescape($('#main-nav').html()));
+
 		translator.translate(translator.unescape($('#available').html()), function(html) {
 			$('#available').html(html)
 				.find('li').draggable({
-					connectToSortable: '#enabled',
+					connectToSortable: '#main-nav',
 					helper: 'clone',
 					distance: 10,
 					stop: drop
 				});
 		});
 
-		$('#enabled')
-			.on('click', '.delete', remove)
-			.on('click', '.toggle', toggle)
-			.sortable()
-			.droppable({
+		$('#main-nav').sortable().droppable({
 			accept: $('#available li')
 		});
 
+		$('#enabled').on('click', '.iconPicker', function() {
+			var iconEl = $(this).find('i');
+			iconSelect.init(iconEl, function(el) {
+				var newIconClass = el.attr('value');
+				var index = iconEl.parents('[data-index]').attr('data-index');
+				$('#main-nav [data-index="' + index + '"] i').attr('class', 'fa fa-fw ' + newIconClass);
+				iconEl.siblings('[name="iconClass"]').val(newIconClass);
+			});
+		});
+
+		$('#main-nav').on('click', 'li', onSelect);
+
+		$('#enabled')
+		 	.on('click', '.delete', remove)
+		 	.on('click', '.toggle', toggle);
+
 		$('#save').on('click', save);
 	};
 
+	function onSelect() {
+		var clickedIndex = $(this).attr('data-index');
+		$('#main-nav li').removeClass('active');
+		$(this).addClass('active');
+
+		var detailsForm = $('#enabled').children().eq(clickedIndex);
+		$('#enabled li').addClass('hidden');
+
+		if (detailsForm.length) {
+			detailsForm.removeClass('hidden');
+		}
+		return false;
+	}
+
 	function drop(ev, ui) {
 		var id = ui.helper.attr('data-id'),
-			el = $('#enabled [data-id="' + id + '"]'),
-			data = id === 'custom' ? {} : available[id];
+			el = $('#main-nav [data-id="' + id + '"]'),
+			data = id === 'custom' ? {iconClass: 'fa-navicon'} : available[id];
 
 		data.enabled = false;
+		data.index = Math.max(0, $('#main-nav').children().length - 1);
 
-		templates.parse('admin/general/navigation', 'enabled', {enabled: [data]}, function(li) {
+		templates.parse('admin/general/navigation', 'navigation', {navigation: [data]}, function(li) {
 			li = $(translator.unescape(li));
 			el.after(li);
 			el.remove();
 		});
+
+		templates.parse('admin/general/navigation', 'enabled', {enabled: [data]}, function(li) {
+			li = $(translator.unescape(li));
+			$('#enabled').append(li);
+		});
 	}
 
 	function save() {
 		var nav = [];
 
-		$('#enabled li').each(function() {
-			var form = $(this).find('form').serializeArray(),
+		var indices = [];
+		$('#main-nav li').each(function() {
+			indices.push($(this).attr('data-index'));
+		});
+
+		indices.forEach(function(index) {
+			var el = $('#enabled').children().eq(index);
+			var form = el.find('form').serializeArray(),
 				data = {},
 				properties = {};
 
@@ -81,7 +122,9 @@ define('admin/general/navigation', ['translator'], function(translator) {
 	}
 
 	function remove() {
-		$(this).parents('li').remove();
+		var index = $(this).parents('[data-index]').attr('data-index');
+		$('#main-nav [data-index="' + index + '"]').remove();
+		$('#enabled [data-index="' + index + '"]').remove();
 		return false;
 	}
 

src/controllers/admin/navigation.js

@@ -8,6 +8,14 @@ navigationController.get = function(req, res, next) {
 			return next(err);
 		}
 
+
+		data.enabled.forEach(function(enabled, index) {
+			enabled.index = index;
+			enabled.selected = index === 0;
+		});
+
+		data.navigation = data.enabled.slice();
+
 		res.render('admin/general/navigation', data);
 	});
 };

src/views/admin/general/navigation.tpl

@@ -3,32 +3,56 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">Active Navigation</div>
 			<div class="panel-body">
+
+				<div class="clearfix">
+					<ul id="main-nav" class="nav navbar-nav">
+						<!-- BEGIN navigation -->
+						<li data-index="{navigation.index}" class="{navigation.class} <!-- IF navigation.selected --> active <!-- ENDIF navigation.selected -->">
+							<a href="#" title="{navigation.title}" id="{navigation.id}">
+								<!-- IF navigation.iconClass -->
+								<i class="fa fa-fw {navigation.iconClass}"></i>
+								<!-- ENDIF navigation.iconClass -->
+
+								<!-- IF navigation.text -->
+								<span class="{navigation.textClass}">{navigation.text}</span>
+								<!-- ENDIF navigation.text -->
+							</a>
+						</li>
+						<!-- END navigation -->
+					</ul>
+				</div>
+
+				<hr/>
+
 				<ul id="enabled">
 					<!-- BEGIN enabled -->
-					<li class="well">
+					<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
 						<form>
 							<div class="row">
 								<div class="col-sm-6">
-									<label>ID: <small>optional</small>
+									<label>ID: <small>optional</small></label>
 									<input class="form-control" type="text" name="id" value="{enabled.id}" />
-									</label>
-									<label>Title: <small>shown upon mouseover</small>
+
+									<label>Title: <small>shown upon mouseover</small></label>
 									<input class="form-control" type="text" name="title" value="{enabled.title}" />
-									</label>
-									<label>Icon Class: <small><a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">pick one</a></small>
-										<input class="form-control" type="text" name="iconClass" value="{enabled.iconClass}" />
-									</label>
+
+									<label>Icon Class:</label>
+									<br/>
+									<span class="iconPicker"><i class="fa fa-2x {enabled.iconClass}"></i>
+									<input class="form-control" type="hidden" name="iconClass" value="{enabled.iconClass}" />
+									</span>
+
 								</div>
+
 								<div class="col-sm-6">
-									<label>Route: <small>ex. /unread</small>
+									<label>Route: <small>ex. /unread</small></label>
 									<input class="form-control" type="text" name="route" value="{enabled.route}" />
-									</label>
-									<label>Text:
+
+									<label>Text:</label>
 									<input class="form-control" type="text" name="text" value="{enabled.text}" />
-									</label>
-									<label>Text Class: <small>optional</small>
+
+									<label>Text Class: <small>optional</small></label>
 									<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
-									</label>
 								</div>
 							</div>