From 5ee634296aa63b30a1cc016f53ce55df799332c9 Mon Sep 17 00:00:00 2001
From: Oliver Gorwits <oliver@cpan.org>
Date: Mon, 9 Apr 2012 17:51:41 +0100
Subject: [PATCH] Icon to copy Navbar search text to Device Search Options
 field (closes #11)

---
 Changes                                 |   1 +
 Netdisco/public/css/netdisco.css        |  13 ++++----
 Netdisco/public/images/vaga_copy.png    | Bin 0 -> 416 bytes
 Netdisco/views/js/search.js             |  28 +++++++++++++++++
 Netdisco/views/sidebar/search/device.tt |  40 ++++++++++++++++++------
 5 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 Netdisco/public/images/vaga_copy.png

diff --git a/Changes b/Changes
index 1ae02f83..042350df 100644
--- a/Changes
+++ b/Changes
@@ -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]
 
diff --git a/Netdisco/public/css/netdisco.css b/Netdisco/public/css/netdisco.css
index 23b619a8..518a7ef9 100644
--- a/Netdisco/public/css/netdisco.css
+++ b/Netdisco/public/css/netdisco.css
@@ -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 */
diff --git a/Netdisco/public/images/vaga_copy.png b/Netdisco/public/images/vaga_copy.png
new file mode 100644
index 0000000000000000000000000000000000000000..9faae10101482beb363fc196b3fb75af54208b06
GIT binary patch
literal 416
zcmV;R0bl-!P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzLP<nHRCwB)l0AxpP!Pu_o2>&@9>7v8
zBp`^EqGvG&@D6%_74KjxXf5`3DNHOpLq7a=GmrRoC2Al855{@(e*c+qHnwe>9LN2@
zik;8rgJoIn?4|Gf!#jKCz})#>Qaznc)W2S@i`7v;k|Z?9vMi)&3VEK>nBzFZ%zJmS
z0(|`Fdu=obHNW6P!~Q2ND2hTakH;hRqbQ=jVHosVRn^xSAhqi{U>IgmS=V*A-|uj{
z-KGFpmZ7d|sHzIGEL$u)2m&Iq-|znb7>MH-+O{SBZnvA1J=*1R0ZEdm5CxQF34$Py
zAYK+l@iGI1H%&tX`o1Um1b}NAhT&wD|1XZFX|!jIqX<F}NC3|rcW3_bfJqNHNgfZX
zqwzdH9pap!q9}?)9jm}r5wP8EDQFGgdY)&#*(Y~1Zq%ptE5HB)7yT+pLmQz00000<
KMNUMnLSTaBD6mHW

literal 0
HcmV?d00001

diff --git a/Netdisco/views/js/search.js b/Netdisco/views/js/search.js
index a37697dc..1f7f5a55 100644
--- a/Netdisco/views/js/search.js
+++ b/Netdisco/views/js/search.js
@@ -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);
+    });
   });
diff --git a/Netdisco/views/sidebar/search/device.tt b/Netdisco/views/sidebar/search/device.tt
index d4936d35..008013ba 100644
--- a/Netdisco/views/sidebar/search/device.tt
+++ b/Netdisco/views/sidebar/search/device.tt
@@ -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"/>