clean up firewall rules tables

6 files changed, 21 insertions, 30 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-dark.css b/src/usr/local/www/bootstrap/css/pfSense-dark.css
index 4ba43a0..5e47f51 100644
--- a/src/usr/local/www/bootstrap/css/pfSense-dark.css
+++ b/src/usr/local/www/bootstrap/css/pfSense-dark.css
@@ -33,8 +33,8 @@ body {
 	border-color: #303030;
 }
 
-.table-hover>tbody>tr:hover {
-    background-color: #303030;
+.table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd):hover {
+    background-color: #757575;
 }
 
 table.sortable-theme-bootstrap {
@@ -193,6 +193,16 @@ caption {
     background-color: #424242;
 }
 
+.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
+    background-color: #80CBC4;
+    color: #212121;
+}
+
+.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
+    background-color: #80CBC4;
+    color: #212121;
+}
+
 /** Page footer */
 .footer {
 	background-color: #000;
diff --git a/src/usr/local/www/firewall_nat.php b/src/usr/local/www/firewall_nat.php
index 75811ab..bc355bb 100644
--- a/src/usr/local/www/firewall_nat.php
+++ b/src/usr/local/www/firewall_nat.php
@@ -389,14 +389,11 @@ endforeach;
 <script>
 events.push(function() {
 
-	stripe_table();
-
 	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
-			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_nat_1to1.php b/src/usr/local/www/firewall_nat_1to1.php
index 26aafe9..7129657 100644
--- a/src/usr/local/www/firewall_nat_1to1.php
+++ b/src/usr/local/www/firewall_nat_1to1.php
@@ -289,14 +289,11 @@ display_top_tabs($tab_array);
 <script>
 events.push(function() {
 
-	stripe_table();
-
 	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
-			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_nat_out.php b/src/usr/local/www/firewall_nat_out.php
index afee9a8..feaa9c3 100644
--- a/src/usr/local/www/firewall_nat_out.php
+++ b/src/usr/local/www/firewall_nat_out.php
@@ -301,7 +301,7 @@ print($form);
 	<div class="panel panel-default">
 		<div class="panel-heading"><?=gettext('Mappings')?></div>
 		<div class="panel-body table-responsive">
-			<table class="table table-hover table-condensed">
+			<table class="table table-hover table-striped table-condensed">
 				<thead>
 					<tr>
 						<th><!-- checkbox	  --></th>
@@ -346,12 +346,12 @@ print($form);
 <?php
 				if ($mode == "disabled" || $mode == "automatic"):
 ?>
-							<i class="<?= ($iconfn == "pass") ? "fa-check":"fa-times"?>" title="<?=gettext("This rule is being ignored")?>"></i>
+							<i class="fa <?= ($iconfn == "pass") ? "fa-check":"fa-times"?>" title="<?=gettext("This rule is being ignored")?>"></i>
 <?php
 				else:
 ?>
 							<a href="?act=toggle&amp;id=<?=$i?>">
-								<i class="<?= ($iconfn == "pass") ? "fa-check":"fa-hidden"?>" title="<?=gettext("Click to toggle enabled/disabled status")?>"></i>
+								<i class="fa <?= ($iconfn == "pass") ? "fa-check":"fa-hidden"?>" title="<?=gettext("Click to toggle enabled/disabled status")?>"></i>
 							</a>
 
 <?php
@@ -543,7 +543,7 @@ if ($mode == "automatic" || $mode == "hybrid"):
 	<div class="panel panel-default">
 		<div class="panel-heading"><?=gettext("Automatic rules:")?></div>
 		<div class="panel-body table-responsive">
-			<table class="table table-hover table-condensed">
+			<table class="table table-hover table-striped table-condensed">
 				<thead>
 					<tr>
 						<th><!-- status	  --></th>
@@ -565,7 +565,7 @@ if ($mode == "automatic" || $mode == "hybrid"):
 ?>
 					<tr>
 						<td>
-							<i class="fa-check" title="<?=gettext("automatic outbound nat")?>"></i>
+							<i class="fa fa-check" title="<?=gettext("automatic outbound nat")?>"></i>
 						</td>
 						<td>
 							<?=htmlspecialchars(convert_friendly_interface_to_friendly_descr($natent['interface'])); ?>
@@ -662,14 +662,12 @@ endif;
 
 <script>
 events.push(function() {
-	stripe_table();
 
 	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
-			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php
index 8614fb3..ab2c0d1 100644
--- a/src/usr/local/www/firewall_rules.php
+++ b/src/usr/local/www/firewall_rules.php
@@ -264,7 +264,7 @@ display_top_tabs($tab_array);
 	<div class="panel panel-default">
 		<div class="panel-heading"><?=gettext("Rules (Drag to change order)")?></div>
 		<div id="mainarea" class="table-responsive panel-body">
-			<table name="ruletable" class="table table-hover table-condensed">
+			<table name="ruletable" class="table table-hover table-striped table-condensed">
 				<thead>
 					<tr>
 						<th><!-- checkbox --></th>
@@ -707,14 +707,11 @@ for ($i = 0; isset($a_filter[$i]); $i++):
 <script>
 events.push(function() {
 
-	stripe_table();
-
 	// Make rules sortable
 	$('table tbody.user-entries').sortable({
 		cursor: 'grabbing',
 		update: function(event, ui) {
 			$('#order-store').removeAttr('disabled');
-			stripe_table();
 		}
 	});
 
diff --git a/src/usr/local/www/jquery/pfSenseHelpers.js b/src/usr/local/www/jquery/pfSenseHelpers.js
index 867d3f1..966e798 100644
--- a/src/usr/local/www/jquery/pfSenseHelpers.js
+++ b/src/usr/local/www/jquery/pfSenseHelpers.js
@@ -147,11 +147,6 @@ function hideLabel(text, hide) {
 // Striping of the tables is handled here, NOT with the Bootstrap table-striped class because it would
 // get confused when rows are sorted or deleted.
 
-function stripe_table() {
-	$("tr:odd").addClass('active');
-	$("tr:even").removeClass('active');
-}
-
 function fr_toggle(id, prefix) {
 	if (!prefix)
 		prefix = 'fr';
@@ -161,8 +156,7 @@ function fr_toggle(id, prefix) {
 	fr_bgcolor(id, prefix);
 }
 
-// Change background color based on state of checkbox
-// On resetting background, reapply table striping
+// Change background color of selected row based on state of checkbox
 function fr_bgcolor(id, prefix) {
 	if (!prefix)
 		prefix = 'fr';
@@ -170,11 +164,9 @@ function fr_bgcolor(id, prefix) {
 	var row = $('#' + prefix + id);
 
 	if ($('#' + prefix + 'c' + id).prop('checked') ) {
-		row.css("background-color", "#DDF4FF");
-		row.removeClass('active');
+		row.addClass('active');
 	} else {
-		row.css("background-color", "#FFFFFF");
-		stripe_table();
+		row.removeClass('active');
 	}
 }