Netgate Discussion Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Search
    • Register
    • Login

    Extra Eyes Needed: Icon Usage Consistency

    Scheduled Pinned Locked Moved 2.3-RC Snapshot Feedback and Issues - ARCHIVED
    18 Posts 4 Posters 3.6k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      phil.davis
      last edited by

      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.

      As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
      If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

      1 Reply Last reply Reply Quote 0
      • jimpJ
        jimp Rebel Alliance Developer Netgate
        last edited by

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

        Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

        Need help fast? Netgate Global Support!

        Do not Chat/PM for help!

        1 Reply Last reply Reply Quote 0
        • P
          phil.davis
          last edited by

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

          As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
          If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

          1 Reply Last reply Reply Quote 0
          • jimpJ
            jimp Rebel Alliance Developer Netgate
            last edited by

            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…

            Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

            Need help fast? Netgate Global Support!

            Do not Chat/PM for help!

            1 Reply Last reply Reply Quote 0
            • jimpJ
              jimp Rebel Alliance Developer Netgate
              last edited by

              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

              Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

              Need help fast? Netgate Global Support!

              Do not Chat/PM for help!

              1 Reply Last reply Reply Quote 0
              • P
                phil.davis
                last edited by

                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?

                As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
                If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

                1 Reply Last reply Reply Quote 0
                • jimpJ
                  jimp Rebel Alliance Developer Netgate
                  last edited by

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

                  Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                  Need help fast? Netgate Global Support!

                  Do not Chat/PM for help!

                  1 Reply Last reply Reply Quote 0
                  • jimpJ
                    jimp Rebel Alliance Developer Netgate
                    last edited by

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

                    Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                    Need help fast? Netgate Global Support!

                    Do not Chat/PM for help!

                    1 Reply Last reply Reply Quote 0
                    • P
                      phil.davis
                      last edited by

                      @jimp:

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

                      Works - thanks

                      As the Greek philosopher Isosceles used to say, "There are 3 sides to every triangle."
                      If I helped you, then help someone else - buy someone a gift from the INF catalog http://secure.inf.org/gifts/usd/

                      1 Reply Last reply Reply Quote 0
                      • P
                        pf3000
                        last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • jimpJ
                          jimp Rebel Alliance Developer Netgate
                          last edited by

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

                          Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                          Need help fast? Netgate Global Support!

                          Do not Chat/PM for help!

                          1 Reply Last reply Reply Quote 0
                          • N
                            NOYB
                            last edited by

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

                            1 Reply Last reply Reply Quote 0
                            • jimpJ
                              jimp Rebel Alliance Developer Netgate
                              last edited by

                              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.

                              Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                              Need help fast? Netgate Global Support!

                              Do not Chat/PM for help!

                              1 Reply Last reply Reply Quote 0
                              • jimpJ
                                jimp Rebel Alliance Developer Netgate
                                last edited by

                                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.

                                Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                                Need help fast? Netgate Global Support!

                                Do not Chat/PM for help!

                                1 Reply Last reply Reply Quote 0
                                • N
                                  NOYB
                                  last edited by

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

                                  1 Reply Last reply Reply Quote 0
                                  • jimpJ
                                    jimp Rebel Alliance Developer Netgate
                                    last edited by

                                    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

                                    Remember: Upvote with the 👍 button for any user/post you find to be helpful, informative, or deserving of recognition!

                                    Need help fast? Netgate Global Support!

                                    Do not Chat/PM for help!

                                    1 Reply Last reply Reply Quote 0
                                    • First post
                                      Last post
                                    Copyright 2025 Rubicon Communications LLC (Netgate). All rights reserved.