Mer/Documentation/Desktop layout: Difference between revisions
From Maemo Wiki
Jump to navigationJump to search
imported>stskeeps No edit summary |
imported>amigadave {{Mer}} |
||
| (5 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
== | {{Mer}} | ||
== Freemantle desktop specification == | |||
== Desktop screen == | |||
=== Marquee (top bar) === | |||
Height: 52 px, as wide as screen | |||
From left to right: | |||
WM button, different states: (align left) | |||
* Applications menu (no applications opened) | |||
** Upon click, go to Applications menu | |||
* Task switcher | |||
** Upon click, go to Task switcher | |||
* Notification in task switcher | |||
Separator: air | |||
Status area: (align left) | |||
* Clock | |||
* 16x16 icons, when clicked, full status area comes up | |||
Separator: air | |||
Title bar: (align left) | |||
* Not in use on non-telephony devices? | |||
== Applications menu display == | |||
* Pannable area of all applications launchable? | |||
== Hildon desktop specification == | |||
General outline: [http://tabletui.files.wordpress.com/2009/02/task_man_3items1.jpg?w=480&h=640 here] | General outline: [http://tabletui.files.wordpress.com/2009/02/task_man_3items1.jpg?w=480&h=640 here] | ||
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg | New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg | ||
| Line 18: | Line 50: | ||
Background: marquee_background.png, 18x52, repeating | Background: marquee_background.png, 18x52, repeating | ||
Width of screen = 90*3+A* | Width of screen = 90*3+A*48+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder | ||
A = (Width of screen - 90 * 3) / | A = (Width of screen - 90 * 3) / 48 (integer division) | ||
S = Width of screen - 270 - A * | S = Width of screen - 270 - A * 48 | ||
==== First element: Application menu button ==== | ==== First element: Application menu button ==== | ||
| Line 51: | Line 83: | ||
*Description: Shows current application and X others | *Description: Shows current application and X others | ||
==== Fourth | ==== Fourth element: Status bar ==== | ||
''Implemented in h-d, r1149'' | ''Implemented in h-d, r1149'' | ||
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png | *Example: http://www.daimi.au.dk/~cvm/mer-hmm.png | ||
*Width: Y items of | *Width: Y items of 48px, Y > 0, icons 48x48px | ||
*Description: Shows current status bar area | *Description: Shows current status bar area | ||
Latest revision as of 09:35, 22 September 2010
 |
Mer is back : Please visit http://www.merproject.org to learn more about this news. |
Freemantle desktop specification
Desktop screen
Marquee (top bar)
Height: 52 px, as wide as screen
From left to right:
WM button, different states: (align left)
- Applications menu (no applications opened)
- Upon click, go to Applications menu
- Task switcher
- Upon click, go to Task switcher
- Notification in task switcher
Separator: air
Status area: (align left)
- Clock
- 16x16 icons, when clicked, full status area comes up
Separator: air
Title bar: (align left)
- Not in use on non-telephony devices?
Applications menu display
- Pannable area of all applications launchable?
Hildon desktop specification
General outline: here
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg
Touch pixel sizes from https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs
Marquee
Implemented in h-d, r1145
- Height: 52px, Width: As wide as the screen
- Position: Top of screen, disappears in full screen.
Background: marquee_background.png, 18x52, repeating
Width of screen = 90*3+A*48+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder
A = (Width of screen - 90 * 3) / 48 (integer division)
S = Width of screen - 270 - A * 48
First element: Application menu button
Implemented, h-d r1147
- Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
- Width: 90px, icon: 48x48, but should be scalable
- Description: Mer logo or proper icon for application menu. Upon press, it highlights and shows application menu.
- Widget icon: qgn_grid_tasknavigator_others , http://s51.radikal.ru/i133/0903/7d/f77074ef093e.png , part of theme template
Second element: Menu button
Implemented in lp:~mer-committers/m-r/marquee-plugins r2
- Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
- Width: 90px, icon: 48x48
- Description: The former Hildon title bar, but since we don't have titlebars anymore, we have a menu button
- Implemented by: marquee-plugins, drop-down-menu.c
- Icon name: qgn_mer_menubutton , http://s50.radikal.ru/i129/0903/ca/21d1a72a64f5.png, part of theme template
Third element: Quick task switcher
Implemented in h-d r1148
- Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
- Width: 1/3 times A (integer) items of 56px, X > 0, icons 48x48px
- Description: Shows current application and X others
Fourth element: Status bar
Implemented in h-d, r1149
- Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
- Width: Y items of 48px, Y > 0, icons 48x48px
- Description: Shows current status bar area
Sixth element: The magic X
Implemented in h-d, r1150
- Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
- Width: 90px, 48x48 px icon
- Description: The former >>, the switcher menu, shows up when number of applications active > 0
- Icon: qgn_list_tasknavigator_appswitcher , http://s51.radikal.ru/i134/0903/84/e7c91bfbf9ce.png
Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png
