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: | + | 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: | + | *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: | + | *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: | + | *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
- 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 , needs to be 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
Third element: Quick task switcher
Implemented in h-d r1148
- Example: http://www.daimi.au.dk/~cvm/mer-hmm.png
- Width: X items of 42px, X > 0, icons 32x32px
- 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 42px, Y > 0, icons 32x32px
- Description: Shows current status bar area
Fifth element: The magic X
Implemented in h-d, r1150
- Example: http://www.daimi.au.dk/~cvm/mer-xmenu.png
- Width: 90px, Z > 52, 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
