Extra Eyes Needed: Icon Usage Consistency


  • Rebel Alliance Developer Netgate

    In preparation for working on the 2.3 GUI documentation I've been reviewing how we use a lot of the icons in the GUI. While doing so I found quite a few inconsistencies that I have tried to correct. Most of these were due to using one and then at some point in the conversion we decided to use something different. Others were lingering from even earlier versions. I'm sure there are more I haven't spotted yet, but the really glaring ones should be better for the most part.

    This is a task that does better with many eyes on it so if you happen to notice any pages, widgets, and so on that are using icons that seem confusing or don't fit their purpose, or have duplicate and confusing purposes in separate areas of the GUI, or even related areas that use different icons to mean the same thing on different pages, let us know.

    I have a ticket open here that I've been working this on: https://redmine.pfsense.org/issues/5965

    The main list of icons and their primary uses is here: https://doc.pfsense.org/index.php/Wiki_Style_Guide#2.3_Icons

    Be sure to update/gitsync before reporting, many have been changed today and haven't yet made it into snapshots.


  • Rebel Alliance Developer Netgate

    I pushed a ton more updates today, most dealing with button icons and colors.

    The only big area I have left to review are the various "Advanced" buttons.



  • 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.


  • Rebel Alliance Developer Netgate

    @phil.davis:

    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.


  • Rebel Alliance Developer Netgate

    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…


  • Rebel Alliance Developer Netgate

    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 OK

    services_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 toggle

    firewall_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?


  • Rebel Alliance Developer Netgate

    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'.


  • Rebel Alliance Developer Netgate

    I pushed  fixes for those and a couple others I found.



  • @jimp:

    I pushed  fixes for those and a couple others I found.

    Works - thanks



  • The Interfaces widget shows up arrow, even when it's down. Hovering tool tip shows down which is ok.


  • Rebel Alliance Developer Netgate

    @pf3000:

    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.



  • @jimp:

    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.


  • Rebel Alliance Developer Netgate

    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-wrench
    

    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.


  • Rebel Alliance Developer Netgate

    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.



  • @jimp:

    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.


  • Rebel Alliance Developer Netgate

    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


Log in to reply