Quickslot exceeds from the top of the screen

[stefaniamak]

Issue

One of the latest updates increased the height of the vertical quickslot bar's slots, which made it exceed the Terasology's default window size from the top of the screen. There's two aspects to consider for this issue:

1. In the default window size, the whole vertical quickslot bar should be visible

2. A player might decrease the window size below the default size. Here all slots should still be visible, although it's acceptable if they wrap to a second column as intended by the FlowLayout design used for the quickslot bar

Solution

1. Reduce the padding between the quickslot bar slots, so that all 10 slots (1 larger active slot, 9 smaller passive slots) fit into the default window height of 800px (ideally a bit less to match the bottom margin of the quickslot bar and allow a bit of top margin, too). Confirm that all slots are properly visible when using the default window size.

2. Set the height of the encapsulating UIBox and relativeLayout that contain the quickslot bar FlowLayout to the default window height of 800px. Confirm that

   • on using the default window size, all slots are still visible and aligned in only a single column
   • on furhter decreasing the window size, all slots are still visible, but wrapped properly into multiple columns

[jdrueckert]

@stefaniamak what would your suggestion be to fix that?
We might consider increasing the default window size, but in case we decide against that, do we have another approach, yet?

[jdrueckert]

I made a PR increasing the default window size, however the quickslot bar still exceeds the window height.
Decreasing the padding between the slots should probably help.

[stefaniamak]

@jdrueckert I think increasing the window size would be best, but for the case we don't increase it I would suggest just decreasing the height of the outer UIBox and relativeLayout, that should be enough! Probably setting the same height (and width) with the default window size would be extra cool!

(For the above, a test would be needed so to check if the rest of the elements inside sit well; if not there shall be minor corrections wherever there are needed)

[jdrueckert]

But wouldn't decreasing the UIBox and relativeLayout height result in some items being wrapped, so we would have like two columns of quickslots? I mean that still would make sense for the case that players decrease the window size, but IMO in the default window size, it should only be a single column showing all slots. To achieve this I think we need to adjust the padding between the slots.

[ZhouRicky]

I'm not sure if anyone was working on this, but I decided to make an attempt on it for my Software Design project. I made a PR to the TeraNUI repo that should allow the Flow Layout to vertically align the quickslot bar and a follow up PR to the LightAndShadow repo with the updated .ui files to go alongside the TeraNUI PR.