Mer/Documentation/Desktop layout

Line 20: Line 20:
Width of screen = 90*3+A*56+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder
Width of screen = 90*3+A*56+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder
-
A = (Width of screen - 90 * 3) / 56 (integer division)
+
A = (Width of screen - 90 * 3) / 56
-
 
+
-
S = Width of screen - 180 - A * 56
+
Line 49: Line 47:
*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 52px, X > 0, icons 48x48px
+
*Width: 1/3 times A (integer) items of 56px, X > 0, icons 48x48px
*Description: Shows current application and X others
*Description: Shows current application and X others
-
==== Fourth element: Slack ====
+
==== Fourth element: Status bar ====
-
 
+
-
What remains of Screen width - ((X+Y) * 52) - 180
+
-
 
+
-
==== Fifth 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 52px, Y > 0, icons 48x48px
+
*Width: Y items of 56px + S, Y > 0, icons 48x48px
*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''
''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, Z > 52, 48x48 px icon
+
*Width: 90px, 48x48 px icon
*Description: The former >>, the switcher menu, shows up when number of applications active > 0
*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
*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
Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png

Revision as of 08:23, 22 March 2009

Contents

Layout for Hildon Desktop on Mer

General outline: here

Pre-artwork implementation: http://www.daimi.au.dk/~cvm/mer-ui-implemented.png

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*56+S, A integer, X = 1/3 * A, Y = 2/3 * A, S remainder

A = (Width of screen - 90 * 3) / 56


First element: Application menu button

Implemented, h-d r1147

Second element: Menu button

Implemented in lp:~mer-committers/m-r/marquee-plugins r2

Third element: Quick task switcher

Implemented in h-d r1148

Fourth element: Status bar

Implemented in h-d, r1149

Fifth element: The magic X

Implemented in h-d, r1150

Icons for closing within this: http://i013.radikal.ru/0903/e1/5c85d73dcb42.png