135/netdisco
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor for shared green highlighting in port and search

Browse Source
This commit is contained in:
Oliver Gorwits
2013-04-23 22:32:19 +01:00
parent 5a18bf68e3
commit 9663fb5f2a
5 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Netdisco/share/public/css/netdisco.css
View File

@@ -266,13 +266,28 @@ td {
/* little icon inside of search input fields */
.field_clear_icon, .field_copy_icon {
position: absolute;
margin-left: 132px;
margin-left: 140px;
margin-top: 5px;
z-index: 1;
padding: 7px;
padding: 0px;
cursor: pointer;
}
.field_copy_icon {
color: #999;
}
.field_clear_icon {
background-color: #A9DBA9;
color: #3A87AD;
}
/* for the ports form, but the positioning is slightly different */
#ports_form .field_clear_icon {
margin-left: 149px;
margin-top: 5px;
}
/* change highlighting for form fields which are being used in a search */
form .clearfix.success select {
background-color: #A9DBA9;

36
Netdisco/share/public/javascripts/netdisco.js
View File

@@ -135,7 +135,43 @@ if (window.History && window.History.enabled) {
});
}
// if any field in Search Options has content, highlight in green
function device_form_state(e) {
if (e.prop('value') != "") {
e.parent(".clearfix").addClass('success');
if (e.parents('#device_form').length) {
$('#nq').css('text-decoration', 'line-through');
if (e.attr('type') == 'text') {
$('.field_copy_icon').hide();
}
}
var id = '#' + e.attr('name') + '_clear_btn';
$(id).show();
}
else {
e.parent(".clearfix").removeClass('success');
var id = '#' + e.attr('name') + '_clear_btn';
$(id).hide();
var num_empty = $.grep(form_inputs,
function(n,i) {return($(n).val() != "")}).length;
if (num_empty === 3) {
$('#nq').css('text-decoration', 'none');
$('.field_copy_icon').show();
}
}
}
$(document).ready(function() {
// sidebar form fields should change colour and have bin/copy icon
$('.field_copy_icon').hide();
$('.field_clear_icon').hide();
form_inputs.each(function() {device_form_state($(this))});
form_inputs.change(function() {device_form_state($(this))});
// activate typeahead on the main search box, for device names only
$('#nq').typeahead({
source: function (query, process) {

31
Netdisco/share/views/js/device.js
View File

@@ -2,6 +2,10 @@
// ajax content is loaded
var path = 'device';
// fields in the Device Search Options form (Device tab)
var form_inputs = $("#ports_form .clearfix input").not('[type="checkbox"]')
.add("#ports_form .clearfix select");
function inner_view_processing(tab) {
// LT wanted the page title to reflect what's on the page :)
document.title = $('#nd_device_name').text()
@@ -106,28 +110,12 @@
.toggleClass('icon-chevron-up icon-chevron-down');
});
// show or hide sweeping brush icon when field has content
var sweep = $('#ports_form').find("input[name=f]");
if (sweep.val() === "") {
$('.field_clear_icon').hide();
} else {
$('.field_clear_icon').show();
}
sweep.change(function() {
if ($(this).val() === "") {
$('.field_clear_icon').hide();
} else {
$('.field_clear_icon').show();
}
});
// handler for sweeping brush icon in port filter box
// handler for bin icon in port filter box
var portfilter = $('#ports_form').find("input[name=f]");
$('.field_clear_icon').click(function() {
sweep.val('');
$('.field_clear_icon').hide();
portfilter.val('');
$('#ports_form').trigger('submit');
device_form_state(portfilter); // will hide copy icons
});
// clickable device port names can simply resubmit AJAX rather than
@@ -137,9 +125,10 @@
var port = $(this).text();
port = $.trim(port);
sweep.val(port);
portfilter.val(port);
$('.field_clear_icon').show();
$('#ports_form').trigger('submit');
device_form_state(portfilter); // will hide copy icons
});
});

42
Netdisco/share/views/js/search.js
View File

@@ -3,55 +3,17 @@
var path = 'search';
// fields in the Device Search Options form (Device tab)
var d_inputs = $("#device_form .clearfix input").not('[type="checkbox"]')
var form_inputs = $("#device_form .clearfix input").not('[type="checkbox"]')
.add("#device_form .clearfix select");
// if any field in Device Search Options has content, highlight in green
// and strikethrough the navbar search
function device_form_state(e) {
if (e.prop('value') != "") {
if (e.attr('type') == 'text') {
$('.field_copy_icon').hide();
}
e.parent(".clearfix").addClass('success');
$('#nq').css('text-decoration', 'line-through');
var id = '#' + e.attr('name') + '_clear_btn';
$(id).show();
}
else {
e.parent(".clearfix").removeClass('success');
var id = '#' + e.attr('name') + '_clear_btn';
$(id).hide();
if (! d_inputs.val() ) {
$('#nq').css('text-decoration', 'none');
$('.field_copy_icon').show();
}
}
}
// this is called by do_search to support local code
// here, when tab changes need to strike/unstrike the navbar search
function inner_view_processing(tab) {
if (tab == 'device') {
d_inputs.each(function() {device_form_state($(this))});
}
else {
$('#nq').css('text-decoration', 'none');
}
}
// on load, check initial Device Search Options form state,
// and on each change to the form fields
$(document).ready(function() {
$('.field_copy_icon').hide();
$('.field_clear_icon').hide();
d_inputs.each(function() {device_form_state($(this))});
d_inputs.change(function() {device_form_state($(this))});
// handler for copy icon in search option
$('.field_copy_icon').click(function() {
var name = $(this).data('btn-for');
@@ -65,6 +27,6 @@
var name = $(this).data('btn-for');
var input = $('#device_form [name=' + name + ']');
input.val('');
device_form_state(input);
device_form_state(input); // will hide copy icons
});
});

8
Netdisco/share/views/sidebar/device/ports.tt
View File

@@ -1,9 +1,9 @@
<input name="q" value="[% params.q | html_entity %]" type="hidden"/>
<div class="clearfix">
<a class="field_clear_icon" href="#"
rel="tooltip" data-placement="bottom" data-offset="3" data-title="Show all Ports">
<img src="[% uri_base %]/images/tango_sweep.png"/></a>
<i class="field_clear_icon icon-trash icon-large"
rel="tooltip" data-placement="bottom" data-offset="3" data-title="Show all Ports"
id="f_clear_btn" data-btn-for="port"></i>
<input id="nd_port_query" placeholder="Port, Name or VLAN"
name="f" value="[% params.f | html_entity %]" type="text"
rel="tooltip" data-placement="left" data-offset="5" data-title="Filter by Port, Name or VLAN"/>
@@ -92,7 +92,7 @@
<label class="checkbox">
<input type="checkbox" id="free"
name="free"[% ' checked="checked"' IF params.free %]/>
Only Show Free Ports
Only show Free Ports
</label>
</li>
</ul>