From e582bccc8532281db9eb4e9efdad9ed6e628b709 Mon Sep 17 00:00:00 2001 From: Stephen Beaver Date: Tue, 19 Jan 2016 18:16:18 -0500 Subject: Add colors to the separator bars --- src/usr/local/www/bootstrap/css/pfSense-BETA.css | 16 +++++++ src/usr/local/www/bootstrap/css/pfSense.css | 20 +++++++++ src/usr/local/www/firewall_rules.php | 53 +++++++++++++++++++----- 3 files changed, 79 insertions(+), 10 deletions(-) (limited to 'src/usr') diff --git a/src/usr/local/www/bootstrap/css/pfSense-BETA.css b/src/usr/local/www/bootstrap/css/pfSense-BETA.css index 9332b81..1d21bb5 100644 --- a/src/usr/local/www/bootstrap/css/pfSense-BETA.css +++ b/src/usr/local/www/bootstrap/css/pfSense-BETA.css @@ -3,4 +3,20 @@ /*** Experimental Changes Go Here ***/ .panel-title { font-size: 16px; +} + +.separator-red { + bgcolor: red; +} + +.separator-green { + bgcolor: green; +} + +.separator-blue { + bgcolor: blue; +} + +.separator-orange { + bgcolor: orange; } \ No newline at end of file diff --git a/src/usr/local/www/bootstrap/css/pfSense.css b/src/usr/local/www/bootstrap/css/pfSense.css index fde1e66..c44abe1 100644 --- a/src/usr/local/www/bootstrap/css/pfSense.css +++ b/src/usr/local/www/bootstrap/css/pfSense.css @@ -781,3 +781,23 @@ ul.tree li .over{ max-height: none !important; } } +/* These colors style the separator bars that may be added to firewall rules and NAT rules*/ +tr .separator-red { + background-color: #ff9999; + color: #4d0000; +} + +.separator-green { + background-color: #79d379; + color: #0d260d; +} + +.separator-blue { + background-color: #cce5ff; + color: #002699; +} + +.separator-orange { + background-color: #ffcc00; + color: #1a1400; +} \ No newline at end of file diff --git a/src/usr/local/www/firewall_rules.php b/src/usr/local/www/firewall_rules.php index f51cc57..62dea06 100644 --- a/src/usr/local/www/firewall_rules.php +++ b/src/usr/local/www/firewall_rules.php @@ -678,9 +678,10 @@ for ($i = 0; isset($a_filter[$i]); $i++): if (isset($config['filter']['separator'][strtolower($if)]['sep0'])) { foreach ($config['filter']['separator'][strtolower($if)] as $rulesep) { if ($rulesep['row']['0'] == "fr" . $nrules) { + $cellcolor = $rulesep['color']; print('' . - '' . '' . $rulesep['text'] . '' . - '' . + '' . '' . $rulesep['text'] . '' . + '' . '' . "\n"); } } @@ -790,24 +791,32 @@ events.push(function() { $("#addsep").click(function() { // alert("This feature is not yet complete. (Nothing is saved)\nIncluded for review only."); - // Inset a temporary bar in which hte user can enter some optional text - $('#ruletable > tbody:last').append('' + - '" class="col-md-12" type="text">' + - '' + - ''); + // Inset a temporary bar in which the user can enter some optional text + $('#ruletable > tbody:last').append('' + + '" class="col-md-12" type="text">' + + '' + + '' + + '    ' + + '  ' + + '  ' + + '  ' + + '  ' + + ''); $('#newsep').focus(); $("#btnnewsep").prop('type' ,'button'); + handle_colors(); + // Remove the temporary separator bar and replace it with the final version containing the // user's text and a delete icon $("#btnnewsep").click(function() { var septext = escapeHtml($('#newsep').val()); $('#ruletable > tbody:last >tr:last').remove(); $('#ruletable > tbody:last').append('' + - '' + '' + septext + '' + - '' + + '' + '' + septext + '' + + '' + ''); $('#order-store').removeAttr('disabled'); @@ -823,6 +832,8 @@ events.push(function() { }); }); + gColor = 'separator-blue'; + // Compose an inout array containing the row # and text for each separator function save_separators() { var seprow = 0; @@ -840,7 +851,7 @@ events.push(function() { $('form').append(sepinput); sepinput = ''; $('form').append(sepinput); - sepinput = ''; + sepinput = ''; $('form').append(sepinput); sepinput = ''; $('form').append(sepinput); @@ -853,6 +864,28 @@ events.push(function() { }); } + function handle_colors() { + $('[id^=sepclr]').prop("type", "button"); + + $('[id^=sepclr]').click(function () { + var color = $(this).attr('value'); + // Clear all the color classes + $(this).parent('td').removeClass('separator-red'); + $(this).parent('td').removeClass('separator-green'); + $(this).parent('td').removeClass('separator-blue'); + $(this).parent('td').removeClass('separator-orange'); + $(this).parent('td').prev('td').removeClass('separator-red'); + $(this).parent('td').prev('td').removeClass('separator-green'); + $(this).parent('td').prev('td').removeClass('separator-blue'); + $(this).parent('td').prev('td').removeClass('separator-orange'); + // Install our new color class + $(this).parent('td').addClass('separator-' + color); + $(this).parent('td').prev('td').addClass('separator-' + color); + // Set the global color + gColor = 'separator-' + color; + }); + } + //JS equivalent to PHP htmlspecialchars() function escapeHtml(text) { var map = { -- cgit v1.1