search

Vidvox / oscqueryhtml

MIT License
14 stars 1 forks source link

Toggle button design #36

Closed dlublin closed 6 years ago

dlublin commented 6 years ago

When an int has a range of 0 to 1, the page loads this up as a toggle button.

Attached is a sample JSON that can be used with the OSCQuery Helper app that includes a toggle like in the attached screenshot.

These should have a similar look as the momentary buttons, but toggle on / off.

SampleDocumentWToggle.json.zip

screen shot 2018-08-07 at 12 35 31 pm
dustmop commented 6 years ago

How do we want this toggle to look? If the checkbox can't be styled by css (quick lookup shows that it can't), should I just make two divs that swap visibility from one to the other when clicked? For this particular example, should the values of the int (0 or 1) be the text inside the toggle-able button? If so, I should remove the value to the right of the button, right?

dlublin commented 6 years ago

My thought was that they'd look like the momentary buttons, but toggle in state between orange (on) and dark gray (off). The text would be centered and be the name of the element; I think the value can be left out, and simply reflected by the backing color of the button itself. I'm guessing that standard OS toggles can't be styled by CSS, Wiley will have to chime in with the best way to handle this in the code!

wysiwyggins commented 6 years ago

We do this a lot in web frontend by hiding the checkbox and adding a button via jquery. If we can get the replacement input part in there I can style it.

dustmop commented 6 years ago

This should be ready to go now. Updated the classes for toggle button so that they're "kind_toggle" now.