Extra Eyes Needed: Icon Usage Consistency
-
services_dhcp.php has a bunch of Advanced buttons to click to display the various subsets of advanced settings.
services_dhcpv6.php has different-looking Advanced buttons, with bonus text after the button, e.g. "Show NTP Configuration".These 2 pages should be made consistent.
Yep that's on my list to look at today.
-
@JimP - While you are making the various Advanced DHCP buttons consistent, feel free to also make the DHCPv6 Advanced fields show automagically on initial page load if the relevant advanced fields have non-default settings - https://redmine.pfsense.org/issues/5972
If you just want to make the buttons consistent, then that is fine. I can add the show/hide on page load logic after you have finished fiddling with the buttons. -
I might take a look at that but at the moment I'm trying to keep the focus pretty narrow so I can get groups of similar things done. If I stop too long in any one place, things get backed up.
Like what happened when I got to fiddling with large sections of Diagnostics > Command yesterday :-)
Looks nice, though… -
OK I have made what I hope is the last batch of changes for this. They should all be cosmetic-only, not functional, changes, and hopefully all positive.
The last of the commits went in a few moments ago, so it may be a bit before it shows up in snapshots, but after a while a gitsync should be good.
Things should be pretty consistent now in terms of icons, buttons, colors, and so on. Some packages may need more adjustments but nothing should break, it just won't look as nice.
I did not get around to looking at the advanced toggling issue itself, that's likely worthy of its own thread and redmine entry, I did test things when I was working though and found it is also inconsistent across pages:
Advanced buttons toggle test:
services_dhcp.php: Toggles OK
system_gateways_edit.php: Toggles OK
interfaces_ppps_edit.php: Toggles OKservices_dhcp_edit.php: Does not toggle
services_dhcpv6.php: Does not toggle
services_ntpd.php: Does not toggle
services_ntpd_gps.php: Does not toggle
services_unbound.php: Does not toggle
firewall_rules_edit.php: Does not togglefirewall_nat_edit.php: Button disappears
-
After https://github.com/pfsense/pfsense/commit/8f58b51b15a37311e10bf36285a239019bc07c22 the Save button does not work in services_dhcp.php and services_dhcpv6.php (and I suspect other Save buttons that were changed there).
The change removed the hard-coded Save button and it falls back to a default Save button.
I tried ctrl-F5 to reload the whole page, thinking that some change to the CSS/JS or… was not there. But no joy in either Chrome or FireFox.
Is there something I need to reload in my browser? Or is there a real problem?
-
Hmm, yeah that is a problem. I thought I accounted for all of those but apparently it's just a difference in the input name. Some places expected 'Submit' rather than 'save'.
-
I pushed fixes for those and a couple others I found.
-
-
The Interfaces widget shows up arrow, even when it's down. Hovering tool tip shows down which is ok.
-
The Interfaces widget shows up arrow, even when it's down. Hovering tool tip shows down which is ok.
Interesting, I didn't catch that one since the ones I tried all went no-carrier when testing which showed as an (X). I'll fix the 'down' case to be a down arrow.
-
The main list of icons and their primary uses is here: https://doc.pfsense.org/index.php/Wiki_Style_Guide#2.3_Icons
fa-repeat is missing from the list.
-
I haven't updated that since I went through and did all of the consistency work this week. I have a new list of used icons but haven't yet made it back to updating the images there. That said, I don't see anywhere in the base system that we use fa-repeat or its alias fa-rotate-right. I see where we use fa-undo a lot but not fa-repeat (they are mirror images of each other)
The current list I have of icons we actually use – not the full FA list of course -- is:
fa-anchor fa-angle-double-left fa-angle-double-right fa-archive fa-arrow-down fa-arrow-up fa-ban fa-bar-chart fa-bell fa-calculator fa-caret-square-o-up fa-certificate fa-check-circle-o fa-check-circle fa-check-square-o fa-check fa-circle fa-clock-o fa-clone fa-cloud-download fa-cog fa-download fa-exclamation fa-file-excel-o fa-file-text-o fa-filter fa-forward fa-hand-stop-o fa-info-circle fa-info fa-key fa-level-down fa-level-up fa-list-alt fa-list fa-lock fa-minus-circle fa-minus-square-o fa-paperclip fa-pause-circle fa-pencil fa-play-circle fa-play fa-plus-circle fa-plus-square-o fa-plus-square fa-plus fa-power-off fa-question-circle fa-random fa-refresh fa-retweet fa-rss fa-save fa-search fa-send fa-sign-in fa-sign-out fa-stop-circle fa-tasks fa-times-circle-o fa-times-circle fa-times fa-trash fa-undo fa-unlock fa-upload fa-user fa-wrenchThe way I was gathering the name might miss a few that have calculated icon names but the few instances of those I checked were also covered since the same icons were used other places. If you spot any I've missed let me know where they're used and what the icon name is.
-
I updated the icons on the wiki again and the list in the previous reply (which was still missing a couple things), it should be accurate now.
-
I haven't updated that since I went through and did all of the consistency work this week. I have a new list of used icons but haven't yet made it back to updating the images there. That said, I don't see anywhere in the base system that we use fa-repeat or its alias fa-rotate-right. I see where we use fa-undo a lot but not fa-repeat (they are mirror images of each other)
The way I was gathering the name might miss a few that have calculated icon names but the few instances of those I checked were also covered since the same icons were used other places. If you spot any I've missed let me know where they're used and what the icon name is.
fa-repeat is used extensively in services status as restart service.
-
Hmm, I see it now. The grep I was using to gather all of the icons missed that one and also fa-sliders. Hopefully that's all of them. Or at least the ones common enough to need references in docs
