Skip to content

Main: Scale 'Next Anagram' text based on width of text

Eamonn Rea requested to merge eamonnrea/kanagram:cutoff-next-anagram-text-fix into master

Follow-up based on discussion in !30 (merged).

This MR introduces some changes to the 'Next Anagram' text to make it shrink down when the text is longer than its width using the QML fontSizeMode set to Text.HorizontalFit. We define this width based on the size that the nextAnagramButton will grow to when it finishes animating, which is blackboard.width / 2.5 (could be worth defining a property for this?). In order to account for the size of the nextAnagramIcon, we take its width times 1.5 (a multiplier chosen based on testing, could switch to Kirigami units potentially although it's not used elsewhere at the moment in this file from what I can see) and apply it as rightPadding.

Some associated formatting changes were made as well, based on the width and scaling mode, we need to now apply horizontalAlignment and verticalAlighment to get the text to align properly.

I also removed width from nextAnagramIcon, as it seems this is not necessary, given taht it uses fillMode: Image.PreserveAspectFit. This was discovered accidentally during development, and can be added back if I got this wrong.

I hardcoded the label to "Anagrama Següernt" based on the screenshot in !30 (comment 1024610) to show the changes here.

Before (master)

image.png

image.png

image.png

After (This MR)

There is a slight change in positioning of the "Next Anagram" text, it is slightly further to the left based on the padding applied based on the next arrow size. Let me know if we should adjust this.

image.png

image.png

image.png

As before, all feedback is appreciated on the approach taken here. The spirit of the change, to make labels scale better when their width is too large to fit in the button, could be considered for the other buttons as well in future.

Thanks!

Merge request reports