slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
16.95k stars 568 forks source link

Feature Request: Top Level Generic Widget #5178

Closed felipetesc closed 3 months ago

felipetesc commented 4 months ago

Feature Request: Create an abstract top level widget

Description: Currently we don't have an out of the box way to create top level widgets. Because of this, menubars, alert boxes and other top level components must to be created for each project, and this feature seems quite relevant to everyone with the desire to use Slint. The only widget with a close behavior is AboutSlint, which can't have @children.

While searching for templates, examples and ideas about top level ui elements I found this links:

We could have a component called TopLevel with resamblance and functionality from Rectangle but with the addition of another property such as "z-index", or layer-order.

Sample:

export component Menu inherits TopLevel{
      x: 32px;
      y: 5px;
      layer: 1;

      // children widgets
}

Platform 1: OS: Windows Version: 11 Arch: x64 Platform 2: OS: Arch Linux Version: KDE Plasma 6 Arch: x64

Thanks!

ogoffart commented 4 months ago

You could use Rectangle for that, right? Also you can add @children in your own component.

eg:

export component TopLevel { @children } 
felipetesc commented 4 months ago

You could use Rectangle for that, right? Also you can add @children in your own component.

eg:

export component TopLevel { @children } 

Yes, it's possible to use rectangle, and I'm already using it while I'm configuring it's z property. However every top level widget inheriting rectangle will need a way to control what components comes first and what components comes later. For example, I'm creaing an app, which will have a menubar and I need to draw this widget after the toolbar element. Even though it's ok to put the menu bar after the tools bar, it seems wrong, and sometimes the behaviour we need is: if some event occurs to a given top level element the previous top level opened element is automatically closed. Maybe, by allowing us to access the end of the drawing loop we can have that easily.

There is also another point, with top level widgets, perhaps it will be a litle bit easier to create dockpanels, and fully dragable panels, because those componets will always deal with a layer closer to user, which can have predefined areas where we can place panels, and so on. Who knows, maybe SlintPad will benefit from this, and you won't need lumino anymore.

Nothing changes the fact it's alredy possible to create top level elements with Slint as it is, but with a lot of control code working inside the ui. TopLevel as part of the default widget's list will make the life of every one better. AboutSlint can be used as a start point.

Thanks 4 your time.

Amazing project!

ogoffart commented 4 months ago

I see, So you're looking at something like PopupWindow then.

felipetesc commented 4 months ago

I see, So you're looking at something like PopupWindow then.

Yes, PopupWindow, as part of the default list of widgets, can do it all it's needed to the creation of menubars, dock panels, draggable widgets, dragging regions, droppable areas, popups, message boxes, touch and drag areas. Since, this library can be used with MCU(s), softbuffer (that's really great), that will bring a great flexibility. Why not to use z since it's already done ? Rust is faster than Slint, and pass this functionality to core of the Slint render runtime will allow faster drawing too. If we team up with UI designers this brings an over simplified way to achieve better results faster. I always think about how to create menus with css, for example. Unordered list for menus?That's wrong !

Again, thanks.

ogoffart commented 3 months ago

Thanks. I'll close this issue since this doesn't seem like something that is actionable. (PopupWindow has many bugs bug we have already issues for them)