Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-01-03 06:10:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

prettier admin navigation page

Browse Source
This commit is contained in:
barisusakli
2015-09-26 13:00:53 -04:00
parent 839edc80b1
commit e4f0cd856a
4 changed files with 117 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/less/admin/general/navigation.less
View File

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

71
public/src/admin/general/navigation.js
View File

@@ -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({
accept: $('#available li')
$('#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;
}

8
src/controllers/admin/navigation.js
View File

@@ -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);
});
};

62
src/views/admin/general/navigation.tpl
View File

@@ -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>
<input class="form-control" type="text" name="id" value="{enabled.id}" />
</label>
<label>Title: <small>shown upon mouseover</small>
<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>ID: <small>optional</small></label>
<input class="form-control" type="text" name="id" value="{enabled.id}" />
<label>Title: <small>shown upon mouseover</small></label>
<input class="form-control" type="text" name="title" value="{enabled.title}" />
<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>
<input class="form-control" type="text" name="route" value="{enabled.route}" />
</label>
<label>Text:
<input class="form-control" type="text" name="text" value="{enabled.text}" />
</label>
<label>Text Class: <small>optional</small>
<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</label>
<label>Route: <small>ex. /unread</small></label>
<input class="form-control" type="text" name="route" value="{enabled.route}" />
<label>Text:</label>
<input class="form-control" type="text" name="text" value="{enabled.text}" />
<label>Text Class: <small>optional</small></label>
<input class="form-control" type="text" name="textClass" value="{enabled.textClass}" />
</div>
</div>