ArthurSonzogni / FTXUI

:computer: C++ Functional Terminal User Interface. :heart:
MIT License
6.73k stars 401 forks source link

Add a grid control? #114

Closed MichaelGoulding closed 2 years ago

MichaelGoulding commented 3 years ago

It would be great to have a control that lets you have a fixed set of rows and columns fit to a space.

ArthurSonzogni commented 3 years ago

That sounds like a good idea.

Note that you can use a vbox of hbox:

vbox({
  hbox({ a11, a12, a13}),
  hbox({ a21, a22, a23}),
  hbox({ a31, a32, a33}),
})

However, a gridbox would ensure a shared width/height for every elements in the same column/line. I will take a look. This sounds useful.

MichaelGoulding commented 3 years ago

This repository shows where I used vboxes of hboxes, but it doesn't work well.

ArthurSonzogni commented 3 years ago

I tried your example. It doesn't look bad. What the problem?

https://user-images.githubusercontent.com/4759106/124128355-fff55480-da7c-11eb-9afe-35f4b5c1632e.mp4

ArthurSonzogni commented 3 years ago

Fixed by: https://github.com/ArthurSonzogni/FTXUI/pull/190

See example: https://github.com/ArthurSonzogni/FTXUI/blob/51850f118983efe3e98c1d2731d848483db03176/src/ftxui/dom/gridbox_test.cpp#L75:L95

Does this fit your needs?

MichaelGoulding commented 3 years ago

Thanks! The sizing behavior appears to be what I needed. I'll take a closer look at it when I get back from vacation. Is there a way to change the borders to straight corners?

MattBystrin commented 3 years ago

Waiting for straight corners too

ArthurSonzogni commented 3 years ago

I would like to add some class to build some fancy tables with different style for the grid and the element. That will come at some point.

About rounded/straight border. I switched to rounded recently, because developers like it a lot better. However, I would have like make it configurable to fit every one wishes.

Would you have some API suggestions? Something global?

Two functions, border being straight.

Element border(Element) // Straight
Element roundedBorder(Element)

Two functions, border being rounded.

Element border(Element) // Rounded
Element straightBorder(Element)

Some options:

Element border(Element, bool rounded = true);
MattBystrin commented 3 years ago

@ArthurSonzogni , what do you think about one more "double lined" border ( inspired by mc ) style ? By the way the first option ( different names ) is really suits me .

ArthurSonzogni commented 2 years ago

@ArthurSonzogni , what do you think about one more "double lined" border ( inspired by mc ) style ?

This is now supported, via the API:

Element separator(void);
Element separatorLight();
Element separatorHeavy();
Element separatorDouble();
Element separatorStyled(BorderStyle);

Element border(Element);
Element borderLight(Element);
Element borderHeavy(Element);
Element borderDouble(Element);
Element borderRounded(Element);
Decorator borderStyled(BorderStyle);
ArthurSonzogni commented 2 years ago

The original issue as been address via the gridbox element.

ArthurSonzogni commented 2 years ago

FYI. I added gridbox for to represent a grid instead of simple row/column with hbox / vbox .

Based on that, I introduced a class to build styled table: https://github.com/ArthurSonzogni/FTXUI/discussions/228 https://github.com/ArthurSonzogni/FTXUI/pull/229

MichaelGoulding commented 2 years ago

Thanks!