Skip to content

Improve alignment of items in the application delegate

Marco Martin requested to merge work/mart/delegateAlignment into master

Make sure spacing is ok between all the items in the application delegate, that everything looks very aligned to an ideal grid

  • add a background for the icon, so that all the icons look like they're the same square as no two of them look aligned with each other or aligned with anything else
  • make sure the install button has the same space all around, the same as the icon background
  • for the text that should be perfectly aligned with graphical elements, like the title and the icon background, base off tightBoundingRect, as there aren't simple ways in QML to align text vertically considering only the painted region (without the rest of the line height) and that's the reson why in general text always look all over the place
  • with the same trick the text besides the rating stars looks a bit better vertically aligned with them

not everything can ever be aligned exactly to the pixel, as fonts will always be tricky, buttons have a single pixel empty padding around, stars are aligned to the circle but not to the square(it's complicated..) but this way it already looks much cleaner

before:

image

after:

image

details of the item alignment, before:

image

after:

image

Merge request reports