refactor for shared green highlighting in port and search

Netdisco/share/public/css/netdisco.css

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

Netdisco/share/public/javascripts/netdisco.js

@@ -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) {

Netdisco/share/views/js/device.js

@@ -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
+    // handler for bin icon in port filter box
-    var sweep = $('#ports_form').find("input[name=f]");
+    var portfilter = $('#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
     $('.field_clear_icon').click(function() {
-      sweep.val('');
+      portfilter.val('');
-      $('.field_clear_icon').hide();
       $('#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
     });
   });

Netdisco/share/views/js/search.js

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

Netdisco/share/views/sidebar/device/ports.tt

@@ -1,9 +1,9 @@
 
             <input name="q" value="[% params.q | html_entity %]" type="hidden"/>
             <div class="clearfix">
-              <a class="field_clear_icon" href="#"
+              <i class="field_clear_icon icon-trash icon-large"
-                rel="tooltip" data-placement="bottom" data-offset="3" data-title="Show all Ports">
+                 rel="tooltip" data-placement="bottom" data-offset="3" data-title="Show all Ports"
-                <img src="[% uri_base %]/images/tango_sweep.png"/></a>
+                 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>