Ubuntu
ubuntu-ui-toolkit package

[sdk] Need a context menu component

Bug #1424588 reported by Olivier Tilloy on 2015-02-23

This bug report is a duplicate of: Bug #1276823: new component: Contextual Menu. Edit Remove

This bug affects 2 people

Affects		Status	Importance	Assigned to	Milestone
	Ubuntu UX	Fix Committed	Medium	Olga Kemmet
	ubuntu-ui-toolkit (Ubuntu)	Confirmed	High	Cris Dywan

Bug Description

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.

Tags:

Related branches

lp://staging/~ubuntu-sdk-team/ubuntu-ui-toolkit/contextMenu

On hold for merging into lp://staging/ubuntu-ui-toolkit/staging

Ubuntu SDK team: Pending requested 2016-01-07

Revision history for this message

Olivier Tilloy (osomon) wrote on 2015-02-23:

test.qml Edit (648 bytes, text/plain)

Revision history for this message

Olivier Tilloy (osomon) wrote on 2015-02-23:

popover.png Edit (11.0 KiB, image/png)

Attaching a screenshot of the result.

Revision history for this message

Tim Peeters (tpeeters) wrote on 2015-02-23:

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?

Revision history for this message

Olivier Tilloy (osomon) wrote on 2015-02-23:

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.

Revision history for this message

Giorgio Venturi (giorgio-venturi-deactivatedaccount) wrote on 2015-02-24:

- 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.

Revision history for this message

Olivier Tilloy (osomon) wrote on 2015-02-24:

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

Giorgio Venturi (giorgio-venturi-deactivatedaccount) on 2015-02-24

Changed in ubuntu-ux:
status:	New → In Progress
importance:	Undecided → Medium
assignee:	nobody → Giorgio Venturi (giorgio-venturi)

Revision history for this message

Giorgio Venturi (giorgio-venturi-deactivatedaccount) wrote on 2015-02-24:

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

Changed in ubuntu-ux:
status:	In Progress → Fix Committed

Revision history for this message

Cris Dywan (kalikiana) wrote on 2015-03-09:

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

summary:	- unable to center popover in caller + Need a context menu component
Changed in ubuntu-ui-toolkit (Ubuntu):
status:	New → Confirmed

Tim Peeters (tpeeters) on 2015-03-11

tags:

added: design-sync

Cris Dywan (kalikiana) on 2015-03-11

Changed in ubuntu-ui-toolkit (Ubuntu):
importance:	Undecided → High
assignee:	nobody → Christian Dywan (kalikiana)

Revision history for this message

Cris Dywan (kalikiana) wrote on 2015-04-01: Re: Need a context menu component

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

Magdalena Mirowicz (magdalena-mirowicz) on 2015-06-04

summary:	- Need a context menu component + [sdk] Need a context menu component
Changed in ubuntu-ux:
assignee:	Giorgio Venturi (giorgio-venturi) → Olga Kemmet (olga-kemmet)