"Read only" mode?

[guss77]

Description

I want to be able to use the paper-toggle-button to show the status of an item (which could be active or inactive) but without the user being able to change it.

To prevent modifications I've set the element's disabled attribute but that changes the color of the bar and button so it no longer looks to be "on". From looking at the code, unlike all the other modes, there doesn't seem to be a CSS option to change the "disabled" color.

Expected outcome

Ideally it would be possible to put the toggle button into a "read-only mode" where it rejects attempts to modify it. Less ideally we would be able to set the color for "on but disabled" and "off but disabled" using CSS

Actual outcome

"disabled mode" always looks the same without the ability to customize.

[divanvisagie]

I actually forked this for a work project to get this working, It didn't require too much modification.
All that I did was enable the user to set the disabled colors. Will do a public fork and let's see if we can a conversation going.

[divanvisagie]

@guss77 , this is what I have, the effect is the following.

[guss77]

Thanks @divanvisagie ! Unfortunately this solution is not ideal for me because I'd need to mimic the default toggle button style in custom CSS, and if the default ever changes (or is changed globally) I have to remember to go back into the relevant module and change it as well.

But after reviewing your change, I was inspired to do the implementation of the readonly feature myself, and its available as PR #130 .

That PR is basically just preventing manipulation of the active state of the toggle, which preserves all the styling and behavior of a standard toggle button, including the ripple effects when clicked - so the control responds and doesn't look like its stuck, it just refuses to be edited.

[grudra7714]

You can also add pointer-events: none style to your paper-toggle-button

[notwaldorf]

In general, having the UI imply it accepts changes but then silently rejecting them is infuriating for a user. In the gif above, the button looks clickable, and you click it, and nothing happens, which is bad UI; if something isn’t clickable, it needs to communicate that, and this element does it by looking faded out.

I am strongly against adding such a change to this element; if you must do it locally, you can do what @gudra7714 said and add pointer-events:none.