478
edits
Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
→Overlay Menus
| Line 24: | Line 24: | ||
====Action Menu==== | ====Action Menu==== | ||
---- | |||
| | ||
* '''Used for:''' | * '''Used for:''' | ||
** Present a list of actions related to the App content. | ** Present a list of actions related to the App content. | ||
| Line 62: | Line 61: | ||
==== Object Menu ==== | ==== Object Menu ==== | ||
'''Used for:''' | ---- | ||
* Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg: | |||
** Deleting a photo by selecting it's thumbnail, instead of having to open the full image. | |||
** Flag an email by selecting it's preview, instead of having to open the full email. | * '''Used for:''' | ||
** Call a Contact by selecting their name, instead of having to open their detailed information. | ** Directly manipulating objects without having to open them and navigate deeper into the hierarchy. eg: | ||
*** Deleting a photo by selecting it's thumbnail, instead of having to open the full image. | |||
*** Flag an email by selecting it's preview, instead of having to open the full email. | |||
*** Call a Contact by selecting their name, instead of having to open their detailed information. | |||
* '''Characteristics:''' | |||
** Accessed by user press-and-hold on selectable object (eg: list row, phone number, URL, etc) | |||
** Menu appears after X seconds. | |||
** Contain 1 or more items | |||
** Expand in height to accomodate contents, to a maximum of the screen height, at which point contents scroll. Best practice is to include maximum of 5 items + Title. | |||
** Title strings are not included (unlike Action Menus) | |||
** Are closed by pressing "Cancel" button. | |||
** Reuse the Action Menu interface. | |||
** Future (v2): | |||
*** Menu will explicitly tie itself to selected element by opening immediately above or below, shifting to fit into the available screen real estate. | |||
*** Selected object element will be highlighted (e.g.: darken surrounding content?) | |||
*** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close. | |||
---- | |||
* '''Downloads:''' | |||
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github] | * [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/action_menu/index.html Link to CSS in Github] | ||
* [https://mozilla.box.com/shared/static/it6lziv93urcx3qdvuje.zip Source PSD (.zip)] | * [https://mozilla.box.com/shared/static/it6lziv93urcx3qdvuje.zip Source PSD (.zip)] | ||
{| | {| | ||