[FEATURE]: Responsive Layout

[TheColorRed]

I am not sure if this is possible already, and if so I am not sure how it is done, but I am looking for a way to change the layout based on screen size or even some other parameter. What I was thinking is something like a new layout type. Not sure if it would be part of the builtin or a widget that implements HorizontalLayout and VerticalLayout within it.

In this example the layout would automatically change based on the width of the window.

export component AppWindow inherits Window {
    FlexLayout {
        direction: root.width < 500px ? vertical : horizontal;

        Image { /* ... */ }
        Image { /* ... */ }
        Image { /* ... */ }
    }
}

To my knowledge, to accomplish this currently you would have to create two layouts each with duplicate layouts that use HorizontalLayout or VerticalLayout along with an if statement like this:

export component AppWindow inherits Window {
    if (root.width < 500px): VerticalLayout {
        Image { /* ... */ }
        Image { /* ... */ }
        Image { /* ... */ }
    }

    if (root.width >= 500px): Horizontal {
        Image { /* ... */ }
        Image { /* ... */ }
        Image { /* ... */ }
    }
}

[gerum100]

I have a requirement that seems similar enough that I want to add it here: I need a layout that puts as much things beside each other as possible, and if there is not space left it will start the next row.

[ogoffart]

Indeed, a layout that can be both vertical or horizontal might be usefull.

Right now you can get something without layout by computing the layout manually.
Something like

component Foo {
   preferred-width: ...;
   min-height: ...;
   ...;

   Image {
      x: (root.width < 500px) ? /* compute the size vertically */ : /* compute the size horizontally */
      y: ...
      width: ...
      height: ...
   }
}

But this is a bit fastidious, and more dynamic layout could be done.

See also #66