bczsalba / pytermgui

Python TUI framework with mouse support, modular widget system, customizable and rapid terminal markup language and more!
https://ptg.bczsalba.com
MIT License
2.21k stars 54 forks source link

[REQUEST] better checkbox and radio button styling #29

Closed developomp closed 2 years ago

developomp commented 2 years ago

Is your feature request related to a problem? Please describe. No, not really. This is purely a cosmetic improvement.

Describe the solution you'd like Use a cleaner character for checkbox and radio buttons. The characters below are taken from the FTXUI project.

Checkbox:
 ☐  ->  ▣
[ ] -> [X]

Radio:
 ○  ->  ◉
( ) -> (*)

Describe alternatives you've considered There are none other than using other tui libraries with more flexible customization.

Is this feature present in other TUI products? Yes. In FTXUI.

Additional context None.

developomp commented 2 years ago

Ah crap pressed enter too early

developomp commented 2 years ago

fixed

bczsalba commented 2 years ago

Hm. I think this is all up to personal preference. At the moment ASCII characters are used for all default styles if I remember correctly, though not quite sure why. You can manually customize widget characters fairly easily though, so if you could make an example of how it would look I'd gladly look into it!

developomp commented 2 years ago

I don't think the checkbox widget can be customized without changing the logic in this case.

As for the ASCII characters, the box widgets does not use ASCII characters for its border, so I don't think this will be an issue.

Also, using a single character instead of three gives more space, which is a huge benefit imo since you can only fit so many characters on average displays.

bczsalba commented 2 years ago

I don't think the checkbox widget can be customized without changing the logic in this case

Actually, it can! It's not the cleanest widget in terms of implementation, but it's still customizable the same way. I used this pretty ugly piece of code to mock up what it would look like inside a completely un-styled mockup window:

{                                                                                                                 
  ptg.Checkbox()                                                                            
  .set_char("checked", "▣") 
  .set_char("unchecked", "☐"): "Already registered?" 
}

I'm not sure I like this as a default style, for one main reason. As you can see on the second screenshot below, the character is small enough that it gets almost completely hidden when an average sized mouse cursor is over it. This hides its current state as well, which I don't find optimal.

I find it too small in general, so while it is a nice looking character it feels like it does the job less than [x] does. Though if you don't care about these concerns, you can use the code above (or the proper configuration APIs) to set it so.

Screenshot 2022-01-29 at 9 04 38 Screenshot 2022-01-29 at 9 04 57

I am planning to add support for more out-of-the-box configurations for things other than Container and Window, probably using some chars class.