search

mikedilger / gossip

Gossip is a nostr client
Other
631 stars 74 forks source link

Toggle - Custom component #639

Open dtonon opened 5 months ago

dtonon commented 5 months ago

The toggle has two size variants; the Large one can be used when the toggle in showed aligned with buttons/selects (for example in the top area).

image image
bu5hm4nn commented 4 months ago

We currently also have toggles that switch between two different options (not just on/off). For example the "Main posts" (O=) "include replies" switch at the top of the feed. Currently in that case we do not use the accent color, we just have the switch move over. Should we keep doing it that way? Or convert all switch uses to on/off logic?

dtonon commented 4 months ago

@bu5hm4nn the current UI is not so common, can be confusing and require more space; I would suggest to revisit it simply leaving the "Include replies" part. If we really need to point out the "Main posts" part (and I don't think is needed) we can switch to a select.

bu5hm4nn commented 4 months ago

Ok.

Another thing: We might not need "Hover" state but we should have some sort of "Focus" state for accessibility.

dtonon commented 4 months ago

I was thinking about this matter a couple of days ago. It doesn't seem to exist a focus standard for toggles, and often they are excluded from the navigation! (see macOS preference or Telegram).

Since the toggle is often related to a label, a first idea could be to dashed underline the label (similar to the button focus).

But sometimes toggles are used in a row structure, like this:

image



In this case Chrome apply an external border, like this:

image



This could be a solution, but I'm worried from the fact that the external border can break alignments and heights.

So I propose this: a little dashed arc on the left:

image



What do you think? Can it be done?