Paths

Table of Contentst

UI: Popover triangle alignment tweaks
AbandonedPublic
Actions

Authored by Nathan Craddock (natecraddock) on Dec 15 2020, 11:21 PM.

Details

Reviewers

Summary

If a popover button is very close to the window border the triangle doesn't draw centered on the button. This is to prevent the triangle from being placed over a rounded popover corner. It is preferable to align the triangle with the popover button, so this patch makes two changes to more consistently align the triangle.

Allow the triangle to be aligned with the edges of the popover
If the triangle is over a corner, don't round that corner

In cases where the triangle cannot be placed near the button (when the button is partially outside the window) the triangle is now aligned as close as possible to the button.

Before	After

Diff Detail

Repository

rB Blender

Branch

fix-popover-alignment (branched from master)

Build Status

Buildable 11763
Build 11763: arc lint + arc unit

Event Timeline

Nathan Craddock (natecraddock) requested review of this revision.Dec 15 2020, 11:21 PM

Nathan Craddock (natecraddock) created this revision.

Harbormaster completed remote builds in B11763: Diff 32039.Dec 15 2020, 11:21 PM

Nathan Craddock (natecraddock) retitled this revision from UI: Fix alignment of triangle on popovers without icons to UI: Fix alignment of triangle on popovers without icons and text.Dec 15 2020, 11:24 PM

Nathan Craddock (natecraddock) edited the summary of this revision. (Show Details)

Nathan Craddock (natecraddock) added a project: User Interface.

Nathan Craddock (natecraddock) retitled this revision from UI: Fix alignment of triangle on popovers without icons and text to UI: Fix alignment of triangle on popovers on the right of the window.Dec 15 2020, 11:30 PM

Nathan Craddock (natecraddock) edited the summary of this revision. (Show Details)

Don't round corners when triangle is on edge

Harbormaster completed remote builds in B11764: Diff 32042.Dec 16 2020, 2:46 AM

Account for menu roundness

Harbormaster completed remote builds in B11766: Diff 32045.Dec 16 2020, 3:38 AM

Nathan Craddock (natecraddock) edited the summary of this revision. (Show Details)Dec 16 2020, 3:48 AM

Nathan Craddock (natecraddock) added a reviewer: Hans Goudey (HooglyBoogly).

Nathan Craddock (natecraddock) retitled this revision from UI: Fix alignment of triangle on popovers on the right of the window to UI: Popover triangle alignment tweaks.

It looks like there is a suitable icon for this, 'OPTIONS'.

I can't say that I like what popover's arrow looks like in this patch. And I'm not sure about the arrow-button without any icon or text... i don't know how to explain the issue though, it doesn't look right.

@Yevgeny Makarov (jenkm) I'm totally fine with using that icon in D9758. This patch would still be nice though, to better position the triangle in cases where the popover button is close to the edge, or partially cut off.

Nathan Craddock (natecraddock) mentioned this in D9758: UI: Properties editor popover & outliner sync dropdown.Dec 17 2020, 6:30 PM

I'm seeing this at 2X scale:

(The sharp corner to the right of the arrow doesn't look great and is probably avoidable)

Maybe only do the clamping and clearing of roundness if the arrow will be farther than some threshold above the mouse otherwise. And I guess that threshold should depend on UI scale too.

In D9865#246732, @Hans Goudey (HooglyBoogly) wrote:

I'm seeing this at 2X scale:

I did that intentionally. Otherwise we get overlap like this

Maybe only do the clamping and clearing of roundness if the arrow will be farther than some threshold above the mouse otherwise. And I guess that threshold should depend on UI scale too.

I don't see a way to avoid the sharp corner here without rejecting the patch entirely. Though I did take into account the menu corner roundness in the preferences, so until the triangle would overlap the round corner, the corner is still round.

I think that the current version is the best, even though there is an offset.
I looked like in other programs - the same thing.

The alternatives don't look any better.

One option that will look better is to not use the triangle at all.
But this is also not easy to implement, you will need to move both the background and the content itself.

I don't think it's worth it for just one or two use cases, but you can have a try.

But if each editor will have such a menu with additional options then you need to create a separate widget for this which will work perfectly.

The current patch:

Personally I don't think the square corner looks bad. But if everyone else is against it than that's okay with me. The way I see it, either we are okay with an off-center triangle, or we square the corner and shift the triangle.

I would remove the arrow entirely as I find our treatment of different popup content to be inconsistent.

The following shows three windows of content popping up, all containing things to select or change. One popping up from a thing with text with a dropdown arrow. The second from some text without such an arrow. The third looks different from some reason.

Of course under the hood these are different but from a user's perspective they are all very similar. Its not enough to say "well that is a popover" - a word we make up - "and not a menu". Or that the arrow itself should somehow indicate to the user that this content stays up longer? I think it was just added as a pretty decoration that only adds inconsistency.

I think removing the arrow is a good solution.

Also, this is how it appears for me in 2.91 too. The arrow is centered on the first popover's arrow

https://developer.blender.org/differential/diff/32288/?revisionID=9865