Editing Mer/Documentation/Desktop layout

Warning: You are not logged in. Your IP address will be recorded in this page's edit history.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then save the changes below to finish undoing the edit.
Latest revision Your text
Line 1: Line 1:
-
{{Mer}}
+
== Layout for Hildon Desktop on 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
 
-
 
-
Touch pixel sizes from https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs
 
=== Marquee ===
=== Marquee ===
-
 
-
''Implemented in h-d, r1145''
 
*Height: 52px, Width: As wide as the screen
*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
+
The following equation must be satisified: 86 + 52 + X * 42 + Y * 42 + 52 = Width of screen
==== First element: Application menu button ====
==== First element: Application menu button ====
-
 
-
''Implemented, h-d r1147''
 
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
-
*Width: 90px, icon: 48x48, but should be scalable
+
*Width: 86px
*Description: Mer logo or proper icon for application menu. Upon press, it highlights and shows application menu.
*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 ====
==== Second element: Menu button ====
-
 
-
''Implemented in lp:~mer-committers/m-r/marquee-plugins r2''
 
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
-
*Width: 90px, icon: 48x48
+
*Width: 52px
*Description: The former Hildon title bar, but since we don't have titlebars anymore, we have a menu button
*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 ====
==== Third element: Quick task switcher ====
-
 
-
''Implemented in h-d r1148''
 
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
*Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
-
*Width: 1/3 times A (integer) items of 56px, X > 0, icons 48x48px
+
*Width: X items of 42px, X > 0, icons 32x32px
*Description: Shows current application and X others
*Description: Shows current application and X others
==== Fourth element: Status bar ====
==== Fourth element: Status bar ====
-
 
-
''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 48px, Y > 0, icons 48x48px
+
*Width: Y items of 42px, Y > 0, icons 32x32px
*Description: Shows current status bar area
*Description: Shows current status bar area
-
==== Sixth element: The magic X ====
+
==== Fifth element: The magic X ====
-
 
+
-
''Implemented in h-d, r1150''
+
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
-
*Width: 90px, 48x48 px icon
+
*Width: 52px, 32x32 px icon
-
*Description: The former >>, the switcher menu, shows up when number of applications active > 0
+
*Description: The former >>, the switcher menu
-
*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
+

Learn more about Contributing to the wiki.


Please note that all contributions to maemo.org wiki may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see maemo.org wiki:Copyrights for details). Do not submit copyrighted work without permission!


Cancel | Editing help (opens in new window)

Templates used on this page: