Page MenuHome

UI: Fix text padding in the List widget
ClosedPublic

Authored by Yevgeny Makarov (jenkm) on Dec 16 2020, 8:04 PM.

Details

Summary

UI: Fix text padding in the List widget

There is a padding between text and button's emboss boundary
but pure text labels don't have it, see D9058.

In several cases, in the list widget, we have overlaid labels
on top of the other background buttons.

The fix is to use emboss = 'NONE' for such labels, that changes
the drawing style and adds padding. It wasn't actually intended,
but it works properly.

Diff Detail

Repository
rB Blender

Event Timeline

Yevgeny Makarov (jenkm) requested review of this revision.Dec 16 2020, 8:04 PM
Yevgeny Makarov (jenkm) created this revision.

Yikes, it's nice that this is fixable but it's such a hack. As a last resort this is probably fine though, not sure if you've looked into solving it properly?

Do you have any idea what part of the changes to padding caused this?

All uiItemL() and label(), actual all UI_BTYPE_LABEL, if they are without an icon,
have no text-padding, so they are always aligned with the buttons.

So it can't be tweaked in just one specific use case. Such as in the List Widget where the buttons are overlapped.

But if emboss = NONE, then buttons uses a different widget style, so that all text is aligned.
In fact, these UIList use emboss = NONE for prop() as you can see, so it seems like this "hack" is quite appropriate here.

I thought that issue is actually caused by the placement of the ListItem highlight. We also see that highlight too close to items on the left side when they include an icon. We could just draw that highlight edge-to-edge.

I'd rather not consider larger visual changes in this patch.

My other thought initially was that we could just decrease the maximum horizontal space for buttons inside the list row, that would probably mean regular non-label buttons wouldn't get enough space, right?

There's always the option of fitting some special case into the layout code, but this case is probably infrequent enough that it's not worth it. That code is already too full of special cases anyway.

I can suggest basically the same thing, but less hack-looking code:
https://developer.blender.org/differential/diff/32196/?revisionID=9874

We could decrease the maximum horizontal space, or draw highlight edge-to-edge,
but we still need a separate fix for these labels so that there are symmetrical margins on the right and left of the list.

Sure, let's go with that. Looks better to me.

This revision is now accepted and ready to land.Dec 20 2020, 5:30 PM