Layout suggestion

[Donny]

Hello Sir, I am not sure that it is good idea or not to post some idea here. Otherwise please you delete it.

This picture here under is just the way I think.

Donny

[Steve_B]

Thank you for the suggestion and the mockup. The current design is not ideal. The action buttons take up too much room on an already crowded page.

I wonder if the best solution might be to use a better, more obvious icon set. I frequently find myself looking at the Bootstrap glyphicons and trying to decide which of these would be best to indicate <some action="">? There are not many that lend themselves to network security  ;)</some>

[doktornotor]

Well, that'd be just fine with me if you moved the "purpose" to the other side… Need to read the rule first before deciding what to do with it, not the other way round.

[Donny]

Hello Steve_B and doktornotor. My another idea, maybe you can hiding them (edit, copy, disable delete) and also the font size should be a little bit small.
it can save a lot of space and when you need edit, copy, disable and delete then just click in and out hide icon arrow (example) to let them appear.
they don't need to appear all the time, I think. So maybe u can also use  instead enable-disable and reject-block switching button.
When you want to choose the rule that you want to delete then just click on the check box and then click a delete selected rules button. you can see the mockup for example.
I really would like pfSense look more professional. What is your suggestion?

Here under is example picture

Donny


[divsys]

Any opposition to the typical "Pencil" for edit, "X" for delete, "Double folders" for copy (duplicate), and simple check-box for disable (with greyed out line after effect)?

Seems like they could do a fair bit to improve on the real-estate issues.  They may not be totally obvious to someone unfamiliar with the product, but if they are used in a consistent fashion a simple legend at the top and/or bottom of the page would make them very effective.

As far as layout, I agree the function after selection makes more sense (to me).

[Donny]

@divsys:

Any opposition to the typical "Pencil" for edit, "X" for delete, "Double folders" for copy (duplicate), and simple check-box for disable (with greyed out line after effect)?

Seems like they could do a fair bit to improve on the real-estate issues.  They may not be totally obvious to someone unfamiliar with the product, but if they are used in a consistent fashion a simple legend at the top and/or bottom of the page would make them very effective.

As far as layout, I agree the function after selection makes more sense (to me).

Many firewall they do same thing like "Pencil" for edit, "X" for delete, "Double folders" for copy (duplicate) but I think maybe pfSense team would like to be different.

[divsys]

Sorry, did you post the change?

I don't see it here…..

[Donny]

@divsys:

Sorry, did you post the change?

I don't see it here…..

Yes, I just changed it a few minute ago.

[divsys]

Ok, I see you edited a previous posting.

Just a suggestion, but it might be useful the post changes in a new message so we can see the "progression" of the layout changes proposed.

Just my $.02.

[Donny]

@divsys:

Ok, I see you edited a previous posting.

Just a suggestion, but it might be useful the post changes in a new message so we can see the "progression" of the layout changes proposed.

Just my $.02.

Ok thank u, I have make 2 new mockup. Maybe can help pfSense team to change something or maybe not in the future.


[Donny]

Last edit mockup layout.

Donny


[i814u2]

Additionally, if the bootstrap icons aren't fitting your needs, you can research FontAwesome as an alternative.

https://fortawesome.github.io/Font-Awesome/cheatsheet/

For the record, I would prefer a pencil for edit, trash can for delete, two files for copy (they are usually files not folders, if I may be a bit pendatic), and a checkbox for disable/enable.

The X works ok for removal actions but I think the trash can is more obvious when you first use a system.

I have no specific attachment to FontAwesome, we just use it at my work and were a bit late to the game in that regard. I mention it here in case other folks weren't aware of it.

[Steve_B]

firewall_rules.php (only) was edited to use font-awesome icons today. See what you think. I prefer this appearance, although I might make the icons slightly larger.

[heper]

just gitsync'd master and icons don't show up. it's just empty.

it's there in the html-source tho

							[](firewall_rules_edit.php?id=4 "Edit"")
							[](firewall_rules_edit.php?dup=4 "Copy")
							[](?act=toggle&if=lan&id=4 "Disable")
							[](?act=del&if=lan&id=4 "Delete")

would i need to do an actual update to a newer snapshot before the css is added?

[doktornotor]

I guess you should just wipe your browser cache.

[i814u2]

I just updated and I have the same issue. The html code is there but the icons don't show.

I checked a few things and found that the font-awesome css appears to be missing. It fails to load in the browser and when I attempted to find it manually, I couldn't.

Additionally, when that is fixed, just be aware that it is referenced with a relative path, and not specific like the pfsense.css file:

[phil.davis]

This commit https://github.com/pfsense/pfsense/commit/6ab2218f826fc38933235ddcd50184a8d6646a6b is called "Changed name of font-awesome folder" but all I can see in the commit is the deletion of all the fonts and associated folder. So I suspect that something when wrong with the intended commit to master. I don't see where the stuff is in master of pfsense repo.

[Donny]

I just thinking to change the layout a little bit. The icon is just only idea to lookout.

Donny


[Donny]

Status Dashboard, It is look more nice to using "available widgets" if you can change from + to icons.
When you use + it is mean that you want to add them to status dashboard, this i understand,
but when the users go to "available widgets" the users they also know or understand what they want to add, right.

PS. I just use an icons only for example

Donny


[doktornotor]

@phil.davis:

This commit https://github.com/pfsense/pfsense/commit/6ab2218f826fc38933235ddcd50184a8d6646a6b is called "Changed name of font-awesome folder" but all I can see in the commit is the deletion of all the fonts and associated folder. So I suspect that something when wrong with the intended commit to master. I don't see where the stuff is in master of pfsense repo.

Hmm, it was working if you gitsynced before that commit… Looks like someone committed some outdated checkout (not sure how's that even possible with git) or similar WTF. Sigh.  ::)

[Steve_B]

My apologies. After renaming the directory I failed to perform another "git add". I have to keep reminding myself that "It takes about a year to really learn git", or so say the interwabs  ;)

I just did the add/commit/push so it should be there shortly.

[Steve_B]

Just deleted the directory from my box and synced. It reappeared as expected.

[David_W]

@Steve_B:

My apologies. After renaming the directory I failed to perform another "git add". I have to keep reminding myself that "It takes about a year to really learn git", or so say the interwabs  ;)

git works on files, creating directories as needed.

Arguably a better solution would have been to mkdir the desired folder, git mv all the files, rmdir the old folder, git commit and git push.

[heper]

convert for system_gateways.php
https://github.com/pfsense/pfsense/pull/1992

for system_gateway_groups
https://github.com/pfsense/pfsense/pull/1993
i just noticed, i forgot to adjust the delete-confirmation-text after copy/pasting … stupid, sorry

for system_routes
https://github.com/pfsense/pfsense/pull/1994

[Steve_B]

Nice. Thanks.

Merging now.

[i814u2]

@heper:

convert for system_gateways.php
https://github.com/pfsense/pfsense/pull/1992

for system_gateway_groups
https://github.com/pfsense/pfsense/pull/1993
i just noticed, i forgot to adjust the delete-confirmation-text after copy/pasting … stupid, sorry

for system_routes
https://github.com/pfsense/pfsense/pull/1994

Nicely done, thanks.

Also, for the person responsible, great choice on the "disable" icon being the "fa-ban" (crossed-out circle).  No idea why I didn't suggest that in my earlier post, since I suggested it for something similar on another page. Thanks though!

Just a confirmation that performing an update worked this time and now I see all the icons.

[Donny]

@Donny:

Status Dashboard, It is look more nice to using "available widgets" if you can change from + to icons.
When you use + it is mean that you want to add them to status dashboard, this i understand,
but when the users go to "available widgets" the users they also know or understand what they want to add, right.

PS. I just use an icons only for example

Donny

Now the layout look more nice after changed to icon (Firewall). thank you to the people who working hard and pfSense team and all the people who give the layout suggestion.
Could someone and pfSense team are suggestion to the picture here under? Is it possible to change them?

Donny


[Steve_B]

Thanks Donny,

That button is big because it is a Bootstrap "Pill".

It would be fun to add those icons to the available widget list, but unfortunately, the way the code is structured at the moment (reading packages from a foreach loop) it would be tricky. I will keep it in mind next time I visit that code though :)

[robi]

@Steve_B:

That button is big because it is a Bootstrap "Pill".

And looks very dull indeed.

[heper]

so, i've been seeing the fa-icons popping up in multiple places for edit/copy/disable/delete

so should i spend time in doing the same on other pages?
has it been decided/confirmed that these will be the ones to use for next couple of years ?

@steve_b @coredevs ???

[Steve_B]

I changed the appearance of the vpn_ipsec.php page today. All those large buttons on every row looked out of place in my opinion, particularly at smaller viewport sizes where the buttons would wrap onto two lines or more. Yesterday I needed to visit the pages that use sortable table rows and while I was editing, I did some icon work too.

It's definitely not an "official policy" but for my part as I review each page in the system I will be paying attention to those pages with HTML tables that have action buttons at the end of the rows, and those that seem crowded or less than attractive I will change to fa icons as time permits. Outside of HTML tables, I think we should continue to use Bootstrap buttons. When we do use icons, I would suggest that we use only the fa icon set now.

So I am not planning a system wide campaign to add icons, but as I work on pages for whatever reason I will look at the buttons too.

Any help that anyone would like to contribute in the process would be very welcome indeed. I very much enjoy the cooperation and idea sharing.

I think we are at the point in the Bootstrap project now where we can think about refining and optimizing it. Having the fa icons offers a lot more choices that the Glyphicons and many of them are more natural choices for pfSense.

[heper]

when all the related pull-requests are processed, most of the tables will have been adjusted to use the new icons.
when you come across a page that is still missing icons: please post the name of the page and someone will try to fix it.

[Donny]

Hello

I just thinking about pfSense menu bar and have some idea.
My suggestion pfSense menu bar layout. I have made mockup picture (see on mockup picture) you will be understand more than my poor English.

example:
When you click on menu "System" the submenu appear and stay like the other on dashboard example: Interface or Service status and etc
This is very useful and easy to use and more attractive. When you don't need its just click back on the menu "System" again then they are disappear.

So for another menu: Interface, Firewall, Services, VPN, Status and etc, should be the same like menu "System". What is your suggestion?

Donny

[jimp]

@Donny:

My suggestion pfSense menu bar layout. I have made mockup picture (see on mockup picture) you will be understand more than my poor English.

Personally I find that style of menus irksome and difficult to navigate compared to a simple list like we have now.

[Donny]

@jimp:

@Donny:

My suggestion pfSense menu bar layout. I have made mockup picture (see on mockup picture) you will be understand more than my poor English.

Personally I find that style of menus irksome and difficult to navigate compared to a simple list like we have now.

Ok thank you Jimp. It is just only my idea.

[router_wang]

@Donny:

@divsys:

Ok, I see you edited a previous posting.

Just a suggestion, but it might be useful the post changes in a new message so we can see the "progression" of the layout changes proposed.

Just my $.02.

Ok thank u, I have make 2 new mockup. Maybe can help pfSense team to change something or maybe not in the future.

The legends are a very bad idea from an ergonomic standpoint. The icons should be a colored block with white text denoting what the function is:  pass/block/positive/negative etc….
And this should be consistent throughout the design of the interface.

[Donny]

Thank you to Heper and Steve_B and the people to help suggestion for Firewall Layout.
I really like firewall layout that you are make it. really look attractive, clearly and easy to use.

Donny