Main: Fix moreOptionsButton being cutoff on resize (!34) · Merge requests · Education / Kanagram

Currently, if the window is resized while the moreOptionsButton is visible, it does not get resized when the window is resized. This results in incorrect sizing and spacing for the icons and an unnatural look, as if the moreOptionsButton is hidden and shown again when the window is maximized, it will use the correct size.

The cause of this problem is that the width for the moreOptionsButton is set when it is toggled to be visible, in toggleMoreOptions() where it is set to blackboard.width / 2.5. However this does not dynamically update, meaning it is set to the blackboard.width at the time the button is clicked.

This MR makes the following changes:

Initialize the width property in the moreOptionsButton creation to blackboard.width / 2.5. The width property is currently initialized to a small size, but as far as I can tell this doesn't really matter since the user should never see that size, so it should be safe to set the width like this. In doing it here, the sizing will dynamically update as the window resizes, so no need to define it at all in toggleMoreOptions().
- Since the height property was not overridden in toggleMoreOptions(), the height would dynamic adjust based on the window size, but width was not because it was overridden to that static value, which is what this MR fixes.
Instead of changing the opacity of the moreOptionsButton, we can instead toggle its visible property, initializing this to false on creation.
- We could simplify a whole lot of logic here by setting all of the visible properties in toggleMoreOptions to equal flag, instead of assigning true or false in a conditional. We could also rename flag to something more obvious in that case, so it's clearer why we're assigning flag to these values.
- To go one step further, although apologies in advance as I am not super experienced with QML so this may not apply: Maybe it's also possible to make the icons parents of the moreOptionsButton , and if so maybe they will inherit the visible property of the parent? That would mean we would only need to invert the visibility of moreOptionsButton on the helpButton.MouseArea.onClick() . Maybe this could even be a one-liner.
  - If the above is possible, it could be done in this PR or in a follow-up. I am conscious of not opening a huge PR where it can be helped, but also that these potential improvements are related.