Improvement to table pages

Steve_B

Thanks to all of the help contributors have provided in converting the UI to font-awesome icons it is looking better than ever.

The next step might be to look at the controls typically found underneath each HTML table ("Add", "Import" etc) and see how those might be improved. Here are some suggestions and some screenshots from firewall_aliases which I have used to experiment with (this version is now in the master repo)

Minimize the text inside the buttons to reduce their size. e.g.: "Add another alias" => "Add"
Add a font-awesome icon (styled to fit the button) before the button text. e.g.:
Change the button size by adding class "btn-sm"
Add top padding to the

<nav>section in which the buttons are housed so that we get a small space between the table and the buttons</nav>

On pages that have a large block of help/hint text displayed:

Change the display color to the Bootstrap "info" color by supplying that argument to the print_info_box() function. e.g.: print_info_box(gettext("This is how it works."), info);
Surround the print_info_box() with a

Using this exact ID will cause jQuery code in pfSeneHelpers.js to automatically add an icon that toggles the display.

Please see firewall_aliases.php for examples of the above.

Screenshot FA-2.jpg is the original appearance, FA-1 and FA-3 show the new look.

FA-2.jpg_thumb

FA-1.jpg_thumb

FA-3.jpg_thumb

Steve_B

Update.

The jQuery now automatically adds the icon for you. On page load if ait detected with id="infoblock" the icon will be added and thehidden. So:

print_info_box("Hints for firewall users");

becomes:

and everything is handled automatically.

heper

would it be ok to create an "icon-embed-btn' class in pfSense.css, to get rid of the inline style ?

phil.davis

Looking good.
If I open the info text (click the "i" icon) the text is displayed - good.
Then there is an "x" in the top right corner of the info text box. If I click that the info text box closes - seems reasonable :)
But then clicking the "i" icon again does not open the info text. I guess the info text box is "gone for good". (until a page refresh)

Alias-Info-x.png_thumb

Steve_B

Unfortunante 'X' has been suppressed in jQuery

Steve_B

All of the files I identified have been updated and pushed. (I got carried away).

These files look like they still need some fonts-awesome love and need it more than most :) :

system_camanager.php
system_certmanager.php

Or perhaps I missed a PR?

Centralizing the embedded icon style sounds like a very good idea. icon-embed-button would be good, or perhaps just icon-button.

It should be possible to use sed (or similar) to replace all occurrences of '" style="margin-top: 10px;"' with ' icon-embed-button"' I would think.

heper

@steve_b

Vpn menu fa convcert = https://github.com/pfsense/pfsense/pull/2017

Steve_B

Thank you :)

heper

It should be possible to use sed (or similar) to replace all occurrences of '" style="margin-top: 10px;"' with ' icon-embed-button"' I would think.

https://github.com/pfsense/pfsense/pull/2027

sed= easy / git=hard :p

Steve_B

Yes!

Steve_B

If you see a good idea, copy it ;)

Inspired by Heper's changes above I have done something similar for the confirm on delete pop-ups.

Now all instances of "fa-trash" will automatically get a "Are you sure you wish to . . " confirmation dialog added, so all of the "onclick="return confirm("Do you . . " stuff has been removed from the HTML.

There are one or two places where this behavior is not desired (e.g.: vpn_ipsec.php). Adding the "no-confirm" class to the icon will suppress the pop-up.

I also moved the styling used in

<nav class="action-buttons">to the css file.

Thanks again for everyone's help.</nav>

Steve_B

Improvement to infoblock mechanism

The infoblock mechanism now works slightly differently. Here is an example:

Notice the 'false' at the end of the print_info_box? That is a new argument that suppresses the 'X' close button that is normally present in a text box.


is exactly the same, except that the information block is initially open.

It is now possible to have more than one infoblock (or infoblock_open) on a page. To do that, the classes _must begin with_ infoblock or infoblock_open but must also have a unique suffix. For example: