DB2 Switch node doesn't response when clicking on the label

[edje11]

In DB1 you can click anywhere on the line in a switch node, label or icon to get the node switching

However in DB2 the node is only responding we clicking on the icon. This is very annoying when working with touchscreen, you need to do now an "precise click". The wife is used to click somewhere to get the light on.

Do I miss something here, or is it by design.

[BartButenaers]

@edje11,

No idea whether that is by design or not.

But when you look at the frontend code of the ui-switch, you see that there is a label and a switch. And there is only a click event handler attached to the the v-switch but not to the label, so it will indeed it looks like it will behave like you describe.

I think it could be solved by adding also a click event handler to the label element:

But not sure whether the UX folks consider it good practice, that the labels are clickable. Moreover not sure whether other widgets behave in a similar way, because I assume the look and feel should be consistent across all available widgets.

Bart

[joepavitt]

I think this is a very reasonable request, and if I recall correctly, is how we once had it, but some users requested it was removed. I can't find any evidence of that in our issues though, if I recall correctly @Colin was involved in that discussion at one point?

[Colin]

@joepavitt

if I recall correctly @Colin was involved in that discussion

I don't remember that, but it seems strange to me that clicking the label should trip the switch, so perhaps I did argue that. However, I do see that that this is how D1 works, and I had never noticed, so it apparently is not an issue for me either way.

[joepavitt]

In which case, @BartButenaers given you have the local change, if you want to open the PR - we'll get it reviewed/merged

[BartButenaers]

Well in fact I had it updated in notepad++ only for a screenshot
Anyway I have changed the code, but I am not sure yet how it should behave visually.

Question 1 - Look and feel

Currently the label is not clickable in the original dashboard D2:

So I changed the label as clickable:

But that way it isn't visually clear that the label is clickable. So I added a 'pointer' cursor to the label:

But it looks very weird that the entire label - even the empty area - is clickable. So I added a span for the text within the label, and applied the label and click handler to that span element. Then only the label text is clickable:

So the multi-million-dollar question is: which one is preferred. Imho the last one...

Question 2 - Optional clickable label

Personally I don't like the clickable label at all, because I want only the switch to become clickable. I e.g. have switches to turn sirenes on and off. So I don't want to happen that by clicking on a label while swiping on my phone's screen...

But I can understand that some folks want it for other use cases. So I was wondering if it is ok to add an option to the config screen where you can choose whether the label is clickable or not. Because I would certainly turn it off...

[hotNipi]

Optional for sure.

[edje11]

@BartButenaers

But it looks very weird that the entire label - even the empty area - is clickable

That is the way it was also in DB1.
For touchscreen is nice that the the whole line, text, blank part and icon response to the touch.

In DB1 it was not optional, but if it's an easy mod everybody can be happy.

[BartButenaers]

@edje11

everybody can be happy

Perhaps I can do it like this, to cover all use cases:

[joepavitt]

PR would be very welcome

[BartButenaers]

Here you go @joepavitt (demo animation included):

Switch - adjustable clickable area