Icon to copy Navbar search text to Device Search Options field (closes #11)

This commit is contained in:
Oliver Gorwits
2012-04-09 17:51:41 +01:00
parent 5ce85fd7bf
commit 5ee634296a
5 changed files with 66 additions and 16 deletions

View File

@@ -4,6 +4,7 @@
* Native copy of the Netdisco sort_port routine (#17)
* Refactor begin hooks (closes #16)
* Icon to copy Navbar search text to Device Search Options field (closes #11)
[BUG FIXES]

View File

@@ -229,17 +229,18 @@ td {
width: 152px;
}
/* little sweep brush inside of port filter input field */
.field_clear_icon {
/* little icon inside of search input fields */
.field_clear_icon, .field_copy_icon {
position: absolute;
margin-left: 132px;
z-index: 1;
padding: 6px;
}
/* make the sweep icon fill the height of the input field
so that its tooltip takes prescedence over the field tooltip */
.field_clear_icon > img {
padding: 6px;
/* nudge when icon inside the search field is a bootstrap glyph */
.field_clear_icon > i {
margin-top: 1px;
margin-left: 4px;
}
/* change highlighting for form fields which are being used in a search */

Binary file not shown.

After

Width:  |  Height:  |  Size: 416 B

View File

@@ -10,13 +10,22 @@
// and strikethrough the navbar search
function device_form_state(e) {
if (e.is('[value!=""]')) {
$('.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.is('[value!=""]') ) {
$('#nq').css('text-decoration', 'none');
$('.field_copy_icon').show();
}
}
}
@@ -35,6 +44,25 @@
// 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');
var input = $('#device_form [name=' + name + ']');
input.val( $('#nq').val() );
device_form_state(input); // will hide copy icons
});
// handler for bin icon in search option
$('.field_clear_icon').click(function() {
var name = $(this).data('btn-for');
var input = $('#device_form [name=' + name + ']');
input.val('');
device_form_state(input);
});
});

View File

@@ -2,26 +2,46 @@
<p><em>Device Search Options</em></p>
<input name="q" value="[% params.q %]" type="hidden"/>
<div class="clearfix">
<input class="nd_side_input" placeholder="System Name"
type="text" name="name" value="[% params.name %]"
rel="tooltip" data-placement="left" data-offset="5" title="System Name"/>
</div>
<div class="clearfix">
<input class="nd_side_input" placeholder="Location"
type="text" name="location" value="[% params.location %]"
rel="tooltip" data-placement="left" data-offset="5" title="Location"/>
</div>
<div class="clearfix">
<a data-btn-for="dns" class="field_copy_icon" href="#">
<img src="[% uri_base %]/images/vaga_copy.png"/></a>
<a id="dns_clear_btn" data-btn-for="dns" class="field_clear_icon" href="#">
<i class="icon-trash"></i></a>
<input class="nd_side_input" placeholder="DNS"
type="text" name="dns" value="[% params.dns %]"
rel="tooltip" data-placement="left" data-offset="5" title="DNS"/>
</div>
<div class="clearfix">
<a data-btn-for="ip" class="field_copy_icon" href="#">
<img src="[% uri_base %]/images/vaga_copy.png"/></a>
<a id="ip_clear_btn" data-btn-for="ip" class="field_clear_icon" href="#">
<i class="icon-trash"></i></a>
<input class="nd_side_input" placeholder="IP Address"
type="text" name="ip" value="[% params.ip %]"
rel="tooltip" data-placement="left" data-offset="5" title="IP Address"/>
</div>
<div class="clearfix">
<a data-btn-for="name" class="field_copy_icon" href="#">
<img src="[% uri_base %]/images/vaga_copy.png"/></a>
<a id="name_clear_btn" data-btn-for="name" class="field_clear_icon" href="#">
<i class="icon-trash"></i></a>
<input class="nd_side_input" placeholder="System Name"
type="text" name="name" value="[% params.name %]"
rel="tooltip" data-placement="left" data-offset="5" title="System Name"/>
</div>
<div class="clearfix">
<a data-btn-for="location" class="field_copy_icon" href="#">
<img src="[% uri_base %]/images/vaga_copy.png"/></a>
<a id="location_clear_btn" data-btn-for="location" class="field_clear_icon" href="#">
<i class="icon-trash"></i></a>
<input class="nd_side_input" placeholder="Location"
type="text" name="location" value="[% params.location %]"
rel="tooltip" data-placement="left" data-offset="5" title="Location"/>
</div>
<div class="clearfix">
<a data-btn-for="description" class="field_copy_icon" href="#">
<img src="[% uri_base %]/images/vaga_copy.png"/></a>
<a id="description_clear_btn" data-btn-for="description" class="field_clear_icon" href="#">
<i class="icon-trash"></i></a>
<input class="nd_side_input" placeholder="Description"
type="text" name="description" value="[% params.description %]"
rel="tooltip" data-placement="left" data-offset="5" title="Description"/>