478
edits
Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
→Overlay Menus
| Line 21: | Line 21: | ||
---- | ---- | ||
| | ||
'''Usage''': The action menu presents a list of actions related to the App content. | |||
| Line 51: | Line 51: | ||
'''Usage:'''Directly manipulating objects without having to open them and navigate deeper into the hierarchy. | |||
* 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)] | ||