What would be the best way to implement it.

[cloud11665]

I have a vector of message structs and i want to display them on the screen via a widget that can be scrolled.

I have tried something like VArray, but that didn't do it.
It could also be solved with a big VTuple that has enough elements to guarantee a full vertical screen coverage, and just changing the attributes of existing widgets instead of creating new ones.

But this creates another problem, that i want to have an input box at the bottom of the message box. Would something like this work ? (ok, i got it kinda working, Having elements with no height rules, puts them on "lower priority", so they collapse first. i don't know how to make the elements in the VTuple sticky to the bottom, not to the top, so that, you can guarantee, that the last element of the VTuple is "always" visible and when resizing. stuff scrolls in from the top instead.)

current layout looks like this:

namespace oxp = ox::pipe;

auto layout = ox::bordered(ox::vtuple(
	ox::hlabel(U"Message listing test" | ox::Trait::Bold) | oxp::align_center(),
	ox::hline(),
	ox::vtuple(
		ox::hlabel(U"30Message" | ox::Trait::Bold) | oxp::align_left(), ox::hline(),
		/* ... */
		ox::hlabel(U"1Message" | ox::Trait::Bold) | oxp::align_left()
	),
	ox::hline(),
	ox::textbox() | oxp::fixed_height(4)
));

I've attached a video to demonstrate the "sticking to top" issue.
Another issue is the inability to scroll the VTuple, but that doesn't seem hard.

scroll-2021-08-02_22.32.02.mp4

[cloud11665]

@a-n-t-h-o-n-y

[a-n-t-h-o-n-y]

Hey,
We don't currently have a way to anchor from the bottom instead of the top, this is implemented pretty deeply into the layout structure. I do see the use case though and it will be something I think of for a future update.

You could try to implement it over a layout by overriding the resize event handler to change the child widget offset appropriately (the offset is the index of the widget displayed first in the layout). I'm not entirely sure if this is the right way to do this, and I don't have the time right now to implement it myself.

template <typename Child_t>
class Bottom_anchor_layout : public ox::layout::Vertical<Child_t> {
   protected:
    auto resize_event(ox::Area new_size, ox::Area old_size) -> bool override
    {
        // use set_child_offset(std::size_t index), get_child_offset() and
        // heights of all displayed children to keep the current bottom child at
        // the bottom.
        return ox::layout::Vertical<Child_t>::resize_event(new_size, old_size);
    }
};

Another idea would be to create a new Widget that overrides the paint_event(...) to paint messages from the bottom up, you'd also have to implement a scrolling feature that the paint_event would take into account. Not ideal though.

Here is a quick prototype of the rest of the structure you were describing, with scrolling, but still anchored at the top:

#include <termox/termox.hpp>

namespace oxp = ox::pipe;

class Message : public ox::VPair<ox::HLabel, ox::HLine> {
   public:
    explicit Message(ox::Glyph_string message = U"")
    {
        *this | oxp::fixed_height(2);
        this->first | oxp::text(std::move(message));
    };
};

class Message_list : public ox::Passive<ox::layout::Vertical<Message>> {
   public:
    auto add_message(ox::Glyph_string message) -> Message&
    {
        return this->make_child<Message>(std::move(message));
    };
};

class Message_list_and_buffer : public ox::VPair<Message_list, ox::Widget> {
   public:
    Message_list& message_list = this->first;
    ox::Widget& buffer         = this->second;
};

class Scrolling_message_list
    : public ox::HPair<Message_list_and_buffer, ox::VScrollbar> {
   public:
    Message_list_and_buffer& list_and_buffer = this->first;
    ox::VScrollbar& scrollbar                = this->second;

   public:
    Scrolling_message_list()
    {
        link(scrollbar, list_and_buffer.message_list);
        list_and_buffer.buffer.install_event_filter(scrollbar);
    }
};

class Title : public ox::VPair<ox::HLabel, ox::HLine> {
   public:
    ox::HLabel& label = this->first;

   public:
    Title()
    {
        *this | oxp::fixed_height(2);
        label | oxp::text(U"Message Listing Test" | ox::Trait::Bold) |
            oxp::align_center();
    }
};

class App : public ox::VTuple<Title, Scrolling_message_list, ox::Textbox> {
   public:
    Message_list& message_list = this->get<1>().list_and_buffer.message_list;
    ox::Textbox& textbox =
        this->get<2>() | oxp::fixed_height(4) | bg(ox::Color::Blue);

   public:
    App()
    {
        for (auto i = 0; i < 100; ++i)
            message_list.add_message("Message " + std::to_string(i));
    }
};

int main() { return ox::System{}.run<App>(); }

[cloud11665]

Thank you very much for the detailed response!
I will try and experiment with the resize_event, but if I don't get that working, it won't be a deal breaker.

I have another mini-question about the scrollbar.

App() {
	for (auto i = 0; i < 100; ++i)
		message_list.add_message("Message " + std::to_string(i));

	textbox.key_pressed.connect([this](ox::Key key) {
		if (key == ox::Key::Enter) {
			message_list.add_message(std::move(textbox.text()));
			textbox.clear();
			this->get<1>().scrollbar.increment_position();
		}
	});
}

I have added a signal to the textbox, and everything is fine, but one thing is bothering me, and that is the little "overhead" in the scrollbar, that allows you to do this:

would it be possible to limit its range to something like this ?

EDIT:

found a solution!
You first have to calculate the number of scrollbars' visible children by iterating over them from the end, and summing up their heights until they match the height of the scrollbar, then just do

scrollbar.set_size(scrollbar.get_size()-offset);

and put everything inside the on_resize signal.

(I haven't implemented this yet, but in theory it should work just fine)

EDIT 2:

this doesn't seem to work. I will look more into this. If that fails, ill give Bottom_anchor_layout a spin.