MozillaWiki

Gaia/Design/BuildingBlocks: Difference between revisions

Page Discussion

Gaia/Design/BuildingBlocks (view source)

Revision as of 23:09, 10 October 2012

678 bytes added ,  10 October 2012
Convert massive images to thumbnails
(Convert massive images to thumbnails)
Line 3: Line 3:
*''' Link to source PSD ''' [https://www.dropbox.com/s/wyuqv3fwpokax73/CommonControls_121005.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/wyuqv3fwpokax73/CommonControls_121005.psd]


[[Image:CommonControls 121005.jpg|Dialogue: Common Controls 121005]]
[[Image:CommonControls 121005.jpg|Dialogue: Common Controls 121005|thumbnail|center]]
 
===Action Menu===
===Action Menu===


Line 19: Line 20:
** Selecting one of the actions.
** Selecting one of the actions.
** Pressing "Cancel" button (verbiage TBD)
** Pressing "Cancel" button (verbiage TBD)


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress
*''' Link to source PSD ''' [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd]


[[Image:OWD 00 ActionMenu.jpg|Dialogue: Action Menus]]
{|
[[Image:BB_ActionMenu_1.jpg|Dialogue: Action Menus]]
| [[Image:OWD 00 ActionMenu.jpg|Dialogue: Action Menus|thumbnail|center]]
[[Image:BB_ActionMenu_2.jpg|Dialogue: Action Menus]]
| [[Image:BB_ActionMenu_1.jpg|Dialogue: Action Menus|thumbnail|center]]
| [[Image:BB_ActionMenu_2.jpg|Dialogue: Action Menus|thumbnail|center]]
|}


== Banner ==
== Banner ==
Line 49: Line 50:
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Can either be part of an App (eg: a "photos deleted" Banner is associated with the Gallery app) or the System (eg: a "Low Battery" alert).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).
* Ideally would be designed to prevent two Banner appearing simultaneously (eg: If two Banner appear at same time, newer replaces older).


*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css]
*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/status.css]
*''' Link to source PSD ''' [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/1l0vsabud5cv224/OWD_00_Banner.psd]


[[Image:OWD 00 Banner.jpg|Dialogue: Banner]]
{|
[[Image:BB_Banner_1.jpg|Dialogue: Banner]]
| [[Image:OWD 00 Banner.jpg|Dialogue: Banner|thumbnail|center]] || [[Image:BB_Banner_1.jpg|Dialogue: Banner|thumbnail|center]] || [[Image:BB_Banner_2.jpg|Dialogue: Banner|thumbnail|center]]
[[Image:BB_Banner_2.jpg|Dialogue: Banner]]
|}


==Buttons==
==Buttons==
Line 72: Line 71:
** normal
** normal
** Active (pressed)
** Active (pressed)


*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css]
*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css]
*''' Link to source PSD ''' [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/5ae1lmbai91e9js/OWD_Buttons.psd]


 
[[Image:OWD 01 Buttons.jpg|Dialogue: Banner|thumbnail|center]]
[[Image:OWD 01 Buttons.jpg|Dialogue: Banner]]


== Drawer ==
== Drawer ==


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress


[[Image:OWD wiki Drawer.jpg|Dialogue: Banner]]
[[Image:OWD wiki Drawer.jpg|Dialogue: Banner|thumbnail|center]]


== Filters ==
== Filters ==
Line 107: Line 102:
* Numbering: minimum 2, maximum 5.
* Numbering: minimum 2, maximum 5.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.
* Can be populated with icons or text, but not both. Because of the smaller height of a filter (versus a tab), text is the best practice.


* ''' Link to CSS ''' Work in Progress
* ''' Link to CSS ''' Work in Progress
* ''' Link to source PSD ''' [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd]
* ''' Link to source PSD ''' [https://www.dropbox.com/s/g64iolxhrm7d8bg/OWD_01_Filters.psd]


[[Image:OWD 01 Filters.jpg|Filters 1]]
{|
[[Image:Gaia_BB_Filters.png|Filters 1]]
| [[Image:OWD 01 Filters.jpg|Filters 1|thumbnail|center]]
| [[Image:Gaia_BB_Filters.png|Filters 1|thumbnail|center]]
|}


==Headers==
==Headers==
Line 130: Line 125:
* Optional: heading text string can include text (eg: current unread email count)
* Optional: heading text string can include text (eg: current unread email count)
* Present in most applications
* Present in most applications


*''' Link to "Headers" CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css]
*''' Link to "Headers" CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/headers.css]
*''' Link to "Edit Mode" CSS '''[https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css]
*''' Link to "Edit Mode" CSS '''[https://github.com/mozilla-b2g/gaia/blob/master/shared/style/edit_mode.css]
*''' Link to Source PSD ''' [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd]
*''' Link to Source PSD ''' [https://www.dropbox.com/s/0ro1rb8tg41ynuv/OWD_03_Headers.psd]


[[Image:OWD 03 Headers.jpg |Header 1]]
{|
[[Image:Gaia_BB_Header_1.png|Header 1]]
| [[Image:OWD 03 Headers.jpg |Header 1|thumbnail|center]]
| [[Image:Gaia_BB_Header_1.png|Header 1|thumbnail|center]]
|}


==Lists==
==Lists==
Line 157: Line 151:
** Button row
** Button row
** Link row
** Link row


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress
*''' Link to Source PSD ''' [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd?m]
*''' Link to Source PSD ''' [https://www.dropbox.com/s/bz314lc8a0bltla/OWD_01_Lists.psd?m]


[[Image:OWD 00 Lists.jpg|Lists 1]]
[[Image:OWD 00 Lists.jpg|Lists 1|thumbnail|center]]


== Object Menu ==
== Object Menu ==
Line 187: Line 179:
** Selected object element will be highlighted (e.g.: darken surrounding content?)
** 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.
** Explicit "Cancel" input may be removed in favor of pressing on empty screen real estate to close.


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress
*''' Link to source PSD ''' [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/uzw0ftpqcn6fc7w/OWD_00_ObjectMenu.psd]


[[Image:OWD 00 ObjectMenu.jpg |Dialogue: Object Menu]]
{|
[[Image:BB_ObjectMenu_2.jpg|Dialogue: Object Menu]]
| [[Image:OWD 00 ObjectMenu.jpg |Dialogue: Object Menu|thumbnail|center]]
| [[Image:BB_ObjectMenu_2.jpg|Dialogue: Object Menu|thumbnail|center]]
|}


==Progress & Activity Indicators==
==Progress & Activity Indicators==
Line 210: Line 202:
** Activity
** Activity
*** Displays a looping animation, communicating to the user that the process is active.
*** Displays a looping animation, communicating to the user that the process is active.


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress
*''' Link to Source PSD ''' [https://www.dropbox.com/s/kfcce1fnryut1te/OWD_loading_V05.psd]
*''' Link to Source PSD ''' [https://www.dropbox.com/s/kfcce1fnryut1te/OWD_loading_V05.psd]


[[Image:OWD 00 Progress%2BActivity.jpg|Progress & Activity 1]]
{|
[[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1]]
| [[Image:OWD 00 Progress%2BActivity.jpg|Progress & Activity 1|thumbnail|center]]
| [[Image:Gaia_BB_Progress&Activity_1.png|Progress & Activity 1|thumbnail|center]]
|}


== Prompt ==
== Prompt ==
Line 239: Line 231:
** Input: Cancel (optional).
** Input: Cancel (optional).
*** Can customize label string
*** Can customize label string


*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css]
*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/confirm.css]


[[Image:OWD_wiki_Prompts.jpg|Dialogue: Prompt]]
{|
[[Image:BB_Prompt_1.jpg|Dialogue: Prompt]]
| [[Image:OWD_wiki_Prompts.jpg|Dialogue: Prompt|thumbnail|center]]
[[Image:BB_Prompt_2.jpg|Dialogue: Prompt]]
| [[Image:BB_Prompt_1.jpg|Dialogue: Prompt|thumbnail|center]]
[[Image:BB_Prompt_3.jpg|Dialogue: Prompt]]
| [[Image:BB_Prompt_2.jpg|Dialogue: Prompt|thumbnail|center]]
| [[Image:BB_Prompt_3.jpg|Dialogue: Prompt|thumbnail|center]]
|}


==Scrolling==
==Scrolling==
Line 259: Line 252:
** Scrollbar
** Scrollbar
** Index scrolling
** Index scrolling


*''' Link to CSS''' Work in Progress
*''' Link to CSS''' Work in Progress


[[Image:OWD wiki Scroll Index.jpg|Scrolling 1]]
[[Image:OWD wiki Scroll Index.jpg|Scrolling 1|thumbnail|center]]


==Seek Bars==
==Seek Bars==
Line 276: Line 268:
* Optional images for left and right values
* Optional images for left and right values
* Can be horizontal or vertical
* Can be horizontal or vertical


*''' Link to CSS ''' Work in Progress
*''' Link to CSS ''' Work in Progress
*''' Link to Source PSD ''' [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd]
*''' Link to Source PSD ''' [https://www.dropbox.com/s/mdp3oxxw8j0qeo2/OWD_00_SeekBars.psd]


[[Image:OWD 00 SeekBars.jpg |Seek Bars 1]]
[[Image:OWD 00 SeekBars.jpg |Seek Bars 1|thumbnail|center]]


==Switches==
==Switches==
Line 297: Line 287:
** Radio
** Radio
** Checkbox
** Checkbox


*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css]
*''' Link to CSS ''' [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/switches.css]
*''' Link to source PSD ''' [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/00t8x2905jl7vpu/OWD_00_Switches.psd]


[[Image:OWD 00 Switches.jpg|Switches 1]]
[[Image:OWD 00 Switches.jpg|Switches 1|thumbnail|center]]


==Tabs==
==Tabs==
Line 327: Line 315:
* Active
* Active
* Disabled
* Disabled


*''' Link to CSS ''': Work in Progress
*''' Link to CSS ''': Work in Progress
*''' Link to source PSD ''' [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd]
*''' Link to source PSD ''' [https://www.dropbox.com/s/9l6g3mb0870m64o/OWD_02_Tabs.psd]


[[Image:OWD 03 Tabs.jpg |Tabs 1]]
[[Image:OWD 03 Tabs.jpg |Tabs 1|thumbnail|center]]


==Tool Bars==
==Tool Bars==
Line 351: Line 337:
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.  
* Should be positioned at the bottom of the screen unless Tabs are also present. In that case, should be positioned at the top.  
* Can contain various elements (buttons, filters, progress/activity indicators, etc).
* Can contain various elements (buttons, filters, progress/activity indicators, etc).


*''' Link to CSS''' Work in Progress
*''' Link to CSS''' Work in Progress


[[Image:OWD wiki Toolbars.jpg|Toolbars 1]]
{|
[[Image:Gaia_BB_Toolbars_1.png|Toolbars 1]]
| [[Image:OWD wiki Toolbars.jpg|Toolbars 1|thumbnail|center]]
[[Image:Gaia_BB_Toolbars_2.png|Toolbars 2]]
| [[Image:Gaia_BB_Toolbars_1.png|Toolbars 1|thumbnail|center]]
| [[Image:Gaia_BB_Toolbars_2.png|Toolbars 2|thumbnail|center]]
|}


== Value Selector==
== Value Selector==
Line 374: Line 361:
** Single-select list
** Single-select list
** Multiple-select list
** Multiple-select list


*''' Link to CSS / Date - Time Picker ''' Work in Progress
*''' Link to CSS / Date - Time Picker ''' Work in Progress
*''' Link to CSS / Single-Multiple ''' [https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/bb]
*''' Link to CSS / Single-Multiple ''' [https://github.com/mozilla-b2g/gaia/tree/master/apps/system/style/bb]


[[Image:OWD wiki ValueSelector01.jpg |Value Selector]]
{|
[[Image:OWD wiki ValueSelector02.jpg |Value Selector]]
| [[Image:OWD wiki ValueSelector01.jpg |Value Selector|thumbnail|center]] || [[Image:OWD wiki ValueSelector02.jpg |Value Selector|thumbnail|center]] || [[Image:BB_ValueSel_2.jpg|Value Selector|thumbnail|center]]
[[Image:BB_ValueSel_2.jpg|Value Selector]]
|-
[[Image:BB_ValueSel_3.jpg|Value Selector]]
| [[Image:BB_ValueSel_3.jpg|Value Selector|thumbnail|center]] || [[Image:BB_ValueSel_1.jpg|Value Selector|thumbnail|center]]
[[Image:BB_ValueSel_1.jpg|Value Selector]]
|}


== Input Areas ==
== Input Areas ==


*''' Link to CSS '''  [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css]
*''' Link to CSS '''  [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/input_areas.css]
*''' Link to Source PSD'''  [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd]
*''' Link to Source PSD'''  [https://www.dropbox.com/s/9pcmukgbwsmdmo3/OWD_00_InputAreas.psd]


[[Image:OWD 00 InputAreas.jpg |Dialogue: Banner]]
[[Image:OWD 00 InputAreas.jpg |Dialogue: Banner|thumbnail|center]]
Gbrander
canmove, Confirmed users
227

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/478557"