Page MenuHomePhabricator

Optimize the 'Customize toolbar' tooltip
Closed, ResolvedPublic

Assigned To
Authored By
scblr
Jul 7 2022, 10:17 AM
Referenced Files
F35430365: Screenshot_20220812-105101.png
Aug 12 2022, 12:21 PM
F35421640: Screenshot_20220810_163751.png
Aug 10 2022, 9:06 PM
F35330039: Screenshot_20220722-112040.png
Jul 22 2022, 9:26 AM
F35330041: Customize toolbar Design.png
Jul 22 2022, 9:26 AM
F35310564: Screenshot_20220707-103623 copy.png
Jul 7 2022, 10:17 AM
F35310583: Screenshot_20220706-161832.png
Jul 7 2022, 10:17 AM
F35310579: Screenshot_20220707-103623.png
Jul 7 2022, 10:17 AM

Description

Problems:

1.2.
Screenshot_20220707-103623.png (2×1 px, 1 MB)
Screenshot_20220706-161832.png (2×1 px, 586 KB)
  1. The 'Customize toolbar' tooltip points to the space in between buttons/icons
  2. When the overflow menu is tapped before the 'Customize toolbar' tooltip appears, the tooltip is shown on top of the overflow menu

Screenshot_20220707-103623 copy.png (2×1 px, 1 MB)

Solutions:

  1. Optimize the tooltip position: e.g., move the tooltip to the top and position the triangle (that points to the overflow menu) on the right side of the blue square.
  1. Make sure the 'Customize toolbar' tooltip is not shown when the overflow menu has been tapped before.

Event Timeline

@scblr

position the triangle (that points to the overflow menu) on the right side of the blue square.

The arrow of the tooltip component can only be at the top or bottom, not left or right.

@scblr

position the triangle (that points to the overflow menu) on the right side of the blue square.

The arrow of the tooltip component can only be at the top or bottom, not left or right.

Ok, that’s fine – but the arrow needs to be optimized, so it points to the overflow menu icon, not to the space in-between:

DesignvsImplementation
Customize toolbar Design.png (1×720 px, 437 KB)
Screenshot_20220722-112040.png (2×1 px, 1022 KB)

Also, where/how can I test it? APK? Alpha? Thanks

I will look at this next week, thanks @Dbrant for the work so far

@scblr These changes should already be in the latest alpha. However, there is a limit to how precisely we can position the arrow below the overflow button. It also looks like this behavior might be device-specific. Here is how it looks on my device:

Screenshot_20220810_163751.png (2×1 px, 1 MB)

Unless we start searching for a different third-party tooltip library, I'm afraid we can't make any more precise changes to the positioning of the arrow.

Thanks @Dbrant – I like the horizontal alignment. Are you also saying that we can’t vertically align it closer to the overflow menu?

I just took a screenshot from Google Chrome this morning for reference; this would be the ideal vertical alignment:

Screenshot_20220812-105101.png (2×1 px, 129 KB)

Thanks @Dbrant – I like the horizontal alignment. Are you also saying that we can’t vertically align it closer to the overflow menu?

Yes, I do mean that this is the extent of the vertical and horizontal alignment that we can apply to this component.

I see - thanks for clarifying @Dbrant – moving this to code review.

ABorbaWMF subscribed.

Looks pointy in the right direction on 2.7.50419-beta-2022-08-29