Switch - adjustable clickable area

[bartbutenaers]

Description

As requested here by Joe, a PR to allow users to specify the clickable area of a ui switch:

Depending on the use case, a user can change it to fits his needs:

P.S. I find my md file a bit limited to be honest. But not sure how to add more info to it in a decent way. Currently my info panel contains more info compared to the md file, which is the opposite what I would expect. And info like my screenshot above of the 3 areas will get lost here in this pull request and never end up in the documentation. Not sure if that is the way to go...

The property can adjusted dynamically via msg.ui_update.clickableArea. The following demo shows what happens when I hover across the 3 areas (e.g. mouse cursor) and if I click on every area:

[{"id":"bc5ab21a6466fac2","type":"ui-switch","z":"4aad778b57d4f47b","name":"","label":"Test switch","group":"c2bf863890b3eab0","order":1,"width":0,"height":0,"passthru":false,"decouple":false,"topic":"topic","topicType":"msg","style":"","className":"","clickableArea":"line","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":1070,"y":340,"wires":[["f659839079aa4ede"]]},{"id":"f659839079aa4ede","type":"debug","z":"4aad778b57d4f47b","name":"output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1230,"y":340,"wires":[]},{"id":"a2531ab733fe5e4a","type":"inject","z":"4aad778b57d4f47b","name":"Clickable label and switch","props":[{"p":"ui_update.clickableArea","v":"label","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":830,"y":380,"wires":[["bc5ab21a6466fac2"]]},{"id":"b2de1e7349ab1e13","type":"inject","z":"4aad778b57d4f47b","name":"Clickable entire line","props":[{"p":"ui_update.clickableArea","v":"line","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":850,"y":420,"wires":[["bc5ab21a6466fac2"]]},{"id":"bd9e697c7636125f","type":"inject","z":"4aad778b57d4f47b","name":"Clickable switch","props":[{"p":"ui_update.clickableArea","v":"switch","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":860,"y":340,"wires":[["bc5ab21a6466fac2"]]},{"id":"c2bf863890b3eab0","type":"ui-group","name":"Ui switch demo","page":"2e8fc9a730774265","width":"6","height":"1","order":2,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"2e8fc9a730774265","type":"ui-page","name":"Demo","ui":"be29745a6e568f30","path":"/page11","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-chart","ui-text-input","ui-dropdown"],"showPathInSidebar":false,"titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#404040","primary":"#109fbc","bgPage":"#e8e8e8","groupBg":"#d6d6d6","groupOutline":"#6fbc10"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Two remarks about the code:

• Just for clarification: I have used a @click.stop which is to avoid event propagation. Because when 'entire line' has been selected, both the <label> and <tag> elements will get a click event handler. So when you click on the tag, a switch toggle will be triggered. But the event bubbles up to the label element and trigger its click event handler also, resulting in a second switch toggle. Which is not what we want.

• Something that might be a bit confusing: for a user the "label" is the visible text. But for the ui developer, that "label" option corresponds to the <tag> element. While the <label> element will be clickable when "entire line" has been selected. It might be useful to add this as a comment in the code?

Related Issue(s)

None I think

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

[joepavitt]

Excellent addition - thanks Bart

[bartbutenaers]

@joepavitt ,
I see in the documentation some "added in release xx" labels. For this PR my stuff ends up in the documentation, so it will confuse users because the feature is currently not available yet in the npm version. Should I next time add such a label to my docs. Although I don't know in which version it will end up, because I don't know your planning...
Is this perhaps something that you guys can do after the PR has been merged?

[joepavitt]

For smaller options like this, we tend not to, otherwise our docs will be full of "AddedIn". For new widgets, and larger feature sets and functionality, we would do so.