Mer/Documentation/Desktop layout

Line 6: Line 6:
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg
New-artwork ideas: http://i041.radikal.ru/0903/5f/5cf0986d63e7.jpg
 +
 +
Touch pixel sizes from https://help.ubuntu.com/community/UMEGuide/DesigningForFingerUIs
=== Marquee ===
=== Marquee ===
Line 14: Line 16:
*Position: Top of screen, disappears in full screen.
*Position: Top of screen, disappears in full screen.
-
The following equation must be satisified: 86 + 52 + A * 42 + 52 = Width of screen, A = ((Width of screen) - 190) / 42
+
The following equation must be satisified: 90*3 + A * 42 + 52 = Width of screen, A = ((Width of screen) - 190) / 42
X = A / 3 (integer division)
X = A / 3 (integer division)
Line 39: Line 41:
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-appmenu.png
-
*Width: 86px, icon: 48x48, but should be scalable
+
*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.
*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 , needs to be part of theme template
*Widget icon: qgn_grid_tasknavigator_others , http://s51.radikal.ru/i133/0903/7d/f77074ef093e.png , needs to be part of theme template
Line 48: Line 50:
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
*Example: http://www.daimi.au.dk/~cvm/mer-menubutton.png
-
*Width: 52px, icon: 48x48
+
*Width: 90px, icon: 48x48
*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
*Implemented by: marquee-plugins, drop-down-menu.c
Line 74: Line 76:
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
*Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
-
*Width: Z px, Z > 52, 48x48 px icon
+
*Width: 90px, Z > 52, 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 22:01, 21 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.

The following equation must be satisified: 90*3 + A * 42 + 52 = Width of screen, A = ((Width of screen) - 190) / 42

X = A / 3 (integer division)

Y = A - X (integer division)

Z = Width of screen - 138 - A * 42, Z > 52

# New marquee at the top
style "hildon-navigator"
{
  bg_pixmap[NORMAL] = "../images/mb_marquee_background.png"
}
class "HildonDesktopPanelWindow" style "hildon-navigator"

../images/mb_marquee_background.png: PNG image, 18 x 52, 8-bit/color RGBA, non-interlaced


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