Rule enable/disable icons
-
I always get confused by which way around these sort of icons should be.
In the existing 2.3, a currently-enabled rule has a "disable" icon, because clicking the icon will disable the rule.
A currently-disabled rule has an "enable" icon, because clicking the icon will enable the rule.
The icon shows what will happen if it is clicked, not the current state.To use the same logic, then the vertical slider icons in the example here should be around the other way to what is pictured???
Less confusing would be to actually have a slider that really slides and enable/disables the rule on sliding.
Think that is the difference between purely an icon to click to changes the state and a switch in which the position indicates the state. So click the switch to change the state is analogues to flipping a traditional light switch on the wall. So click/flip changes the state. And the current position indicates the current state. This is also why I much prefer vertical switch with up being on, and down being off. It is much more common and widely understood than horizontal. Left or right? Which would indicate current state of on, and which would indicate current state of off? Up down may not be completely universal. But probably much more so than left right.
So if the switch icon is used. I strongly prefer vertical with up being on/enabled and down being off/disabled. Color coordination would be a nice swirl of icing on the cake.
-
Yeah. It is in a group called "Actions" but the icon shows state. The hover over the on switch says "Disable" and the hover over the off switch says "Enable."
I decided to see what it looked like using a light switch as my guide. You reach for a switch in the on position to turn it off.
Something just felt a little off about the original choices.
What I'm really hoping to do is try to get all this ironed out so anyone doing walkthroughs/videos using the beta match long after release. Right now is a good time. They'll probably merge any changes that find a consensus if they make sense and it requires practically no programming experience to make a pull request for simple icon changes.
-
Also note that the NAT/Port Forward… rules screens have a column with a tick/cross icon that shows the current state of enabled/disabled for the rule. Clicking that tick or cross switches the enabled/disabled state. The actions column on the right does not have an an action icon for enable/disable.
That is inconsistent with what has happened for firewall rules.
Firewall Rules GUI has a column with an icon showing pass (green tick), block (red cross), reject (orange hand).
The enable/disable action icon could be removed and a tick/cross column for enabled/disabled be added to Firewall Rules, like the NAT pages. But then there would be 2 columns with tick/cross stuff.
Any ideas about the best way to make the enable/disable UI system consistent for Firewall Rules and NAT pages?
-
These screen shots are from my local, edited node. Nothing has been merged for this.
But when I was looking at the code before I was a little dismayed to see all the code contain things like fa-pencil for edit.
It seems like a better way would be to create a pfsense-fontawesome.css that contained aliases like fa-pfsense-edit, fa-pfsense-enable, and fa-pfsense-disable etc that could be changed in one place and updated everywhere instantly and consistently.
-
The enable/disable action icon could be removed and a tick/cross column for enabled/disabled be added to Firewall Rules, like the NAT pages. But then there would be 2 columns with tick/cross stuff.
That would make it super confusing. It's already confusing I think with the dedicated enabled/disabled column with tick/cross in the NAT rules because it closely resembles the firewall pass/block.
If it were up to me. Think I'd go the other direction and remove the dedicated enabled/disabled column from the NAT rules and instead go with the same enable/disable icon as used for firewalls in the actions column. Think that would be more consistent and less confusing.
-
Yeah. With the click to toggle enabled or disable status checkbox there is really no need for it over in actions too. I didn't know that checkmark was an action.
I don't know why the enable/disable indicator is on one side with the other actions on the other. The visual indicator is the dimming for a disabled rule.
And I don't know why the check is green on the rules and blue on NAT.
Jony Ive would know what to do.
-
This is also why I much prefer vertical switch with up being on, and down being off. It is much more common and widely understood than horizontal.
More research required. In Australia (and possibly other countries) light/power switches are just the opposite. It is the southern hemisphere, after all :)
Finding one thing that very obviously says this "This rule is enabled|disabled" and "Click me to toggle the current state" is not easy. I would suggest the power button symbol (which, in my view, is incorrectly named "power-off" in Font Awesome) to toggle the state and something else - maybe gray text across the rule to show it's disabled.
-
And I don't know why the check is green on the rules and blue on NAT.
Because they don't represent the same thing.
In firewall rules the checkmark, X, etc. represents the rule action (pass, block, etc.)
In NAT rules the checkmark and X represent rule enabled/disabled.That's one of the things that makes it confusing. I think the enable/disable in NAT rules should be same as it is in firewall rules. Icon in the left actions column.
-
DUR. Of course. All I'm looking at are pass rules on this test system so all I'm seeing are green checks.
-
I've been looking over the icon usage and in some cases it has been a bit confusing. See my current thread on the topic. It would be nice to have a consistent usage and presentation of enable/disable across all of the various rule types.
I'm not terribly crazy about the slider style in this context. With text around it, it's more clear, but with only a small icon and no context, it's not so simple.
