[sdk] Need a context menu component

[Olivier Tilloy]

The design for the browser app’s contextual menu requires the popover to be centered inside its caller (the webview). See https://docs.google.com/a/canonical.com/presentation/d/1woHjO8K4iqyVZZlfQ4BXL0DhYbwkEmZ7wvcUhYzHDRk/edit#slide=id.g34608d763_079 for reference. The popover is opened using PopupUtils.open(…).

I’ve tried two different approaches to achieve that, but none actually works:

 - passing the webview as the caller
 - passing no caller parameter at all

In both cases, the popover is horizontally centered, but it’s anchored to the top of the scene.

I’m attaching a standalone example that demonstrates the issue.

[Olivier Tilloy (osomon)]

Attaching a screenshot of the result.

[Tim Peeters (tpeeters)]

Currently a popover without a caller is added to the top of the screen in order to leave space at the bottom to make it easy for the user to tap that area in order to close the popover. I assume we want to be consistent between the apps (including browser). Should we change the default behavior in the UITK to center the popover vertically, or should the design for the popover in the webbrowser be updated?

[Olivier Tilloy (osomon)]

As pointed out by Christian, the visual spec seems to require the context menu to be a Dialog (which would give the greyed out background for free). However, the modal nature of the dialog seems to clash with the contextual nature of the menu: if a user invoked the menu by accident, she should be able to dismiss it by tapping outside of it, which the dialog component doesn’t seem to permit.

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

- Dialogs are definitively modal, as they interrupt the user interaction and need to be interacted upon. They can't be simply dismissed on tap.
- Pop-overs are less modal and they can be safely ignored by tapping outside them

https://design.ubuntu.com/apps/building-blocks/dialog

I believe these two components are related from a SDK perspective, but to the user the behave and look different.

[Olivier Tilloy (osomon)]

Thanks for clarifying Giorgio. So, what should I use to implement the context menu for the browser on desktop?

[Giorgio Venturi (giorgio-venturi-deactivatedaccount)]

1) On the phone, we need to add the 'Cancel' option at the bottom of the list (adding this to the design backlog & assigning this to Rae)
2) On the tablet/desktop, we will use the popover component check these:
https://www.dropbox.com/s/k9dvb0az5ykm8ox/contexual_options_image.png?dl=0
https://www.dropbox.com/s/d1x8tsx8x7ce200/contexual_options_link.png?dl=0

Folder here
https://www.dropbox.com/sh/i2an4x0gvfsdsfb/AAAjvJxtJJeekKds2PxGqhZda?dl=0

[Cris Dywan (kalikiana)]

These designs appear to assume the context menu component we don't yet have, which would have this different positioning behavior.

[Cris Dywan (kalikiana)]

We can essentially use the ActionSelectionPopover, with a refactor so it can support the horizontal layout needed to replace the TextInputPopover.