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

    Layout suggestion

    Scheduled Pinned Locked Moved 2.3-RC Snapshot Feedback and Issues - ARCHIVED
    37 Posts 11 Posters 7.3k 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.
    • DonnyD
      Donny
      last edited by

      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
      FIREWALL-LAYOUT.png
      FIREWALL-LAYOUT.png_thumb

      1 Reply Last reply Reply Quote 0
      • S
        Steve_B Netgate
        last edited by

        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>

        Als ik kan

        1 Reply Last reply Reply Quote 0
        • D
          doktornotor Banned
          last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • DonnyD
            Donny
            last edited by

            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

            ![FIREWALL LAYOUT0.png_thumb](/public/imported_attachments/1/FIREWALL LAYOUT0.png_thumb)
            ![FIREWALL LAYOUT0.png](/public/imported_attachments/1/FIREWALL LAYOUT0.png)

            1 Reply Last reply Reply Quote 0
            • D
              divsys
              last edited by

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

              -jfp

              1 Reply Last reply Reply Quote 0
              • DonnyD
                Donny
                last edited by

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

                1 Reply Last reply Reply Quote 0
                • D
                  divsys
                  last edited by

                  Sorry, did you post the change?

                  I don't see it here…..

                  -jfp

                  1 Reply Last reply Reply Quote 0
                  • DonnyD
                    Donny
                    last edited by

                    @divsys:

                    Sorry, did you post the change?

                    I don't see it here…..

                    Yes, I just changed it a few minute ago.

                    1 Reply Last reply Reply Quote 0
                    • D
                      divsys
                      last edited by

                      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.

                      -jfp

                      1 Reply Last reply Reply Quote 0
                      • DonnyD
                        Donny
                        last edited by

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

                        ![FIREWALL LAYOUT 000.png](/public/imported_attachments/1/FIREWALL LAYOUT 000.png)
                        ![FIREWALL LAYOUT 000.png_thumb](/public/imported_attachments/1/FIREWALL LAYOUT 000.png_thumb)

                        1 Reply Last reply Reply Quote 0
                        • DonnyD
                          Donny
                          last edited by

                          Last edit mockup layout.

                          Donny

                          ![FIREWALL LAYOUT 007.png](/public/imported_attachments/1/FIREWALL LAYOUT 007.png)
                          ![FIREWALL LAYOUT 007.png_thumb](/public/imported_attachments/1/FIREWALL LAYOUT 007.png_thumb)

                          1 Reply Last reply Reply Quote 0
                          • I
                            i814u2
                            last edited by

                            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.

                            1 Reply Last reply Reply Quote 0
                            • S
                              Steve_B Netgate
                              last edited by

                              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.

                              Als ik kan

                              1 Reply Last reply Reply Quote 0
                              • H
                                heper
                                last edited by

                                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?

                                1 Reply Last reply Reply Quote 0
                                • D
                                  doktornotor Banned
                                  last edited by

                                  I guess you should just wipe your browser cache.

                                  1 Reply Last reply Reply Quote 0
                                  • I
                                    i814u2
                                    last edited by

                                    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:

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

                                      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.

                                      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
                                      • DonnyD
                                        Donny
                                        last edited by

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

                                        Donny

                                        ![FIREWALL LAYOUT 0011.png](/public/imported_attachments/1/FIREWALL LAYOUT 0011.png)
                                        ![FIREWALL LAYOUT 0011.png_thumb](/public/imported_attachments/1/FIREWALL LAYOUT 0011.png_thumb)

                                        1 Reply Last reply Reply Quote 0
                                        • DonnyD
                                          Donny
                                          last edited by

                                          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

                                          ![DASHBOARD LAYOUT.png](/public/imported_attachments/1/DASHBOARD LAYOUT.png)
                                          ![DASHBOARD LAYOUT.png_thumb](/public/imported_attachments/1/DASHBOARD LAYOUT.png_thumb)

                                          1 Reply Last reply Reply Quote 0
                                          • D
                                            doktornotor Banned
                                            last edited by

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

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