Ability to use the spacer in custom lua interfaces

[Anyone]

I'm trying to recreate the general style of factorio windows in a custom popup. I can style the buttons just fine, but the spacer area in the middle doesn't seem to work. Bilka was helping me on Discord and suggested "should be draggable_space, it's just a flow that's set to stretch". Trying to set this style I got the message "Style of type HorizontalFlow can't have parent style of type EmptyWidget"

My request: I would like to be able to style a my frame the same way as in vanilla factorio, by being able to apply this style.

[Therenas]

So you want a button, then some space that stretches to whatever container it is in, and then another button? So one button is on the left of the container, and the other one on the right? If that is what you mean, you can do it in the following way: create a horizontal flow that is the main container for this. Then, to that flow, add the first button, then another flow on which you set .style.horizontally_stretchable = true, and then add the last button.

[Anyone]

The factorio screens show a "draggable" (so to speak) bar on the bottom, same as in the title:

[Therenas]

Oh alright, I see. Haven't experimented with the 0.17 styling changes much yet.

[Bilka]

This has been implemented for the next version of 0.17. See viewtopic.php?f=65&t=46487#p443704 (empty-widget)

[Boodals]

I think people have been using frames to do this recently. I'm not entirely sure how, it might need a new style prototype, but I've seen screenshots of custom GUIs with spacers, and I think someone said it was a frame, but i'm not totally sure.
Regardless, its easier now I guess.

[Therenas]

I think people have been using frames to do this recently. I'm not entirely sure how, it might need a new style prototype, but I've seen screenshots of custom GUIs with spacers, and I think someone said it was a frame, but i'm not totally sure.
Regardless, its easier now I guess.

For completeness sake then, you can create a frame and use a style like this:

Code: Select all

data.raw["gui-style"]["default"]["footer_filler"] = {
    type = "frame_style",
    height = 32,
    graphical_set = data.raw["gui-style"]["default"]["draggable_space"].graphical_set,
    use_header_filler = false,
    horizontally_stretchable = "on",
    left_margin = data.raw["gui-style"]["default"]["draggable_space"].left_margin,
    right_margin = data.raw["gui-style"]["default"]["draggable_space"].right_margin,
}