Rule enable/disable icons

[Derelict]

What do you guys and gals think about this change? I know it's a little ios-centric.

The first image is what I'm proposing. The second is how things are.

[Raul Ramos]

I don't care if is iOS alike, i vote yes. By the way anything should be better than the actual.

[maverick_slo]

Nice :)

[NOYB]

Yuck.  Circle-bar is the appropriate icon.  Besides Apple messed up their icon.  On/off switches are more commonly vertical with up being on and down being off.

[bmeeks]

I sort of like the look of the on/off switches, but I think if used their color should change to "green" (text-success) when ON.  I considered using the switch icons for the enable/disable rule states on the RULES tab in the Snort package, but decided not to at the last minute.

Bill

[Derelict]

@NOYB:

Yuck.  Circle-bar is the appropriate icon.  Besides Apple messed up their icon.  On/off switches are more commonly vertical with up being on and down being off.

Better?


[grandrivers]

yes the vertical slide looks very nice

[NOYB]

Better.  Yes.  But bmeeks is correct.  The blue fill should be green in the on position.  I would take that one step further and say that the off position fill should be a darker color.  Maybe a gray.  To look good in the dark theme the colors may need to change accordingly.

[Derelict]

That sort of design decision is way over my pay grade.  I'm just using 2.3 and thinking about things that look weird and are ezpz to change.

I don't think font awesome will do a two-color icon and I certainly don't want to do anything custom.  Having it be green seems like over-tinking it to me. I'm just trying to gauge if I should submit a pull request for this or not.

[Steve_B]

It's easy enough to change the color.

I'm sitting back waiting for you guys to come to a consensus before experimenting with this. I think you are on the right track :)

[phil.davis]

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.

[MikeV7896]

IMHO, if the sliding icons are used (and I don't care if they're horizontal or vertical; being an iOS user, I'm most used to horizontal), they should show the current state of the rule. Combined with the line being grayed out if it's disabled, that makes it real easy to figure out if it's on or off… unless the plan is to stop graying out disabled rules because of the switch indication?

Don't care about the color either.

[NOYB]

@phil.davis:

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.

[Derelict]

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.

[phil.davis]

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?

[Derelict]

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.

[NOYB]

@phil.davis:

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.

[Derelict]

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.

[biggsy]

@NOYB:

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.

[NOYB]

@Derelict:

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.