Switch - no clickable area

[bartbutenaers]

Description

This is a follow-up of one of my other PRs, by adding the option "None":

In that case neither the label nor the switch itself would be clickable. Not relevant for most users, but cannot harm either to add for those that need it...

HOWEVER I have an open issue because you still get a hand-shaped cursor when hoovering above the switch. I apply the default cursor to both the label and the switch in my UISwitch.vue file:

The default cursor on my Windows portable is arrow-shaped. That works fine for the label and the empty area (between the label and the switch). But for the switch it keeps resulting in a hand-shaped cursor, indicating that you can click it (which is not the case for option "None"):

Don't get it fixed unfortunately. Me and CSS are unfortunately not best mates...
So I will mark it as DRAFT, allthough I won't be working on it anymore!

Related Issue(s)

Closes #1508

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label

[bartbutenaers]

I have posted my default cursor issue on Discourse:
https://discourse.nodered.org/t/dashboard-d2-default-cursor-issue/93598
Hopefully somebody can assist me, so that Joe doesn't have to look at it.

[joepavitt]

I saw the reply in the forum - are you okay to handle that being integrated into this PR @bartbutenaers, or want me to cover?

[bartbutenaers]

Hi @joepavitt,
Unfortunately I didn't got the feedback from @hotNipi feedback working last night:

• First I saw that I also had to add "v-switch__track" to the CSS selector:

  

  Because when I hoovered across the small part of the switch, the hand-shaped "pointer" cursor still appeared:

  

  Not sure if it is fine to add all those very specific element names to the selector, because if somebody at Vue ever changes those names then it won't work anymore...

• Afterwards it didn't even work anymore when I injected a message to set the "clickableArea". Not sure what I did wrong.

The feedback from @hotNipi was very clear, but I am starting to loose my ever-lasting battle with CSS...
So if you could have a look at it :-(

[hotNipi]

You were too close Bart

.nrdb-ui-switch-default-cursor .v-selection-control__input input, .nrdb-ui-switch-default-cursor .v-switch__track{ cursor:default; }

[bartbutenaers]

@hotNipi thanks for both the technical and mental support!

Ok, I think it finally works now, so I will remove the draft label from the PR.

There was another problem, which I think was a breaking change that sneaked in somehow in one of the recent releases.
When you select the option "entire line", everything needs to be clickable: the text, the empty space and the switch.
At the time being I had added stuff to the <label> element to make the empty space clickable.
However that doesn't work anymore. Therefore I now had to move that stuff from the label to the <div> element.
And as a result I had to change the @click on the <v-switch> to @click:stop to make sure the call wasn't propagated to the parent div, because then the div would toggle the switch back to the original state. Which first appeared to me that the switch wasn't clickable at, hence my complete confusion...

Anyway this demo flow seems to work now:

[{"id":"e86abaf652a52ba1","type":"ui-switch","z":"4aad778b57d4f47b","name":"","label":"switch","group":"1e2acdd1dfa22bf9","order":2,"width":0,"height":0,"passthru":false,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","layout":"row-spread","clickableArea":"line","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":1870,"y":2920,"wires":[[]]},{"id":"5bb9b77743d1b76c","type":"inject","z":"4aad778b57d4f47b","name":"Switch","props":[{"p":"ui_update.clickableArea","v":"switch","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1690,"y":2920,"wires":[["e86abaf652a52ba1"]]},{"id":"dc183cc40bbb20f5","type":"inject","z":"4aad778b57d4f47b","name":"Label & Switch","props":[{"p":"ui_update.clickableArea","v":"label","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1660,"y":2960,"wires":[["e86abaf652a52ba1"]]},{"id":"1b278495ce80e44d","type":"inject","z":"4aad778b57d4f47b","name":"Line","props":[{"p":"ui_update.clickableArea","v":"line","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1690,"y":3000,"wires":[["e86abaf652a52ba1"]]},{"id":"12b623a2eb33d65f","type":"inject","z":"4aad778b57d4f47b","name":"None","props":[{"p":"ui_update.clickableArea","v":"none","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1690,"y":3040,"wires":[["e86abaf652a52ba1"]]},{"id":"1e2acdd1dfa22bf9","type":"ui-group","name":"Experiments","page":"e06eacf47a88bb87","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"e06eacf47a88bb87","type":"ui-page","name":"Alarm","ui":"be29745a6e568f30","path":"/alarm","icon":"lock","layout":"grid","theme":"092547d34959327c","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":8,"className":"","visible":true,"disabled":false},{"id":"be29745a6e568f30","type":"ui-base","name":"Node-RED","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-text-input","ui-dropdown"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"default"},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

In the following demo, I click on each of the 3 area's (text, empty space and switch) to attempt to toggle the switch:

P.S. Don't forget to squash the commits...