Improve Popup component

[yexingsha]

The new Popup component is great, just need a few small tweaks:

• Give each row 44dp height, instead of the current 48dp.
• Make the spacing between checkmark and label 4dp, instead of the current 8dp.
• Give the entire popup a 250dp max width, and wrap long labels (2 lines = 66dp, 3 lines = 88dp, etc). This prevents the popup from taking up too much horizontal space and looking like a sheet.
• Instead of the black border, use a drop shadow so that the popup is layered above the main body and has better contrast. For reference, iOS uses a drop shadow with x-offset = 0, y-offset = 0, blur = 32, spread = 0, color is black with 20% opacity.
• Place the popup directly below (or above) the touch target with 4dp space in between. It should be left or right aligned to the touch target, with a minimum of 8dp distance to the edge of the screen. Right now the popup is too far away from the touch target:

Compared to iOS:

[Dima]

Please take a look at how it looks after I’ve made the adjustments.
One thing to keep in mind is that the “touch target” is not just the “three dots” of “more options” button, but the button itself, which is a square with “three dots” inside of it.

So in terms of positioning  I did the following:

1. Vertically it now has 4.dp margin between the popup and the “touch target”.
2. Horizontally on the tablet the left side of the popup is aligned to the left side of touch target with no extra horizontal padding added. On the Phone the right side of the popup aligned to the right side of the touch target also with no extra horizontal padding.

In terms of drop shadow on Android we do have a mechanism for that, but we don’t operate with the same values as on iOS. Instead we have “elevation” which basically controls how far the shadow is away from the popup and we can also play with the color of the shadow. On screenshots you can see my current attempt to make it look good.

[yexingsha]

I think there need to be a little bit more vertical space between the popup and the button, so that it doesn't cover the search bar.

I know about the android elevation mechanism and I, uh, don't really agree with the lack of control and the lower contrast along the top edge. Can we experiment with the elevation some more, to see if we can get a bit more shadow along the top edge, without getting a too heavy shadow along the bottom edge? Perhaps 1-2dp more elevation?

[Dima]

Here is with 1 extra elevation:

Here is with 2 extra elevation:

[yexingsha]

Ugh, the android elevation mechanism really doesn't increase the top shadow enough with higher elevation. But I think we do need that extra elevation, so that the larger shadow along the side and bottom edges provides stronger contrast. Let's go with the 2 extra elevation.