Look & Feel

From Openmoko

NOTE: This Look & Feel is describing the old deprecated 2007.1 version!

Overview

This article describes the Look & Feel of Openmoko.

(這篇文章描述 Openmoko 的 Look & Feel)

Layout Structure

OpenMoko uses the following layout structure: (OpenMoko 使用下列的layout結構)

Top Panel Area

The Top Panel is used globally across all applications. It has the following layout: (所有應用程式的最上層都將有頂端Panel(如上圖). 頂端Panel有下圖的layout)

(See the Top Panel widget for more information.)

Application Area

The Contents Application Area depend on the Layout type. Currently the following types are supported:

Native Finger-Based

Navigation Area

(Per application, but must be large enough to navigate using finger)

Native Stylus-Based

Native applications used entirely with the stylus have the following components:

Application Menu

The Application Menu is a Popup Menu of Global Application related information. More uncommon actions should be placed here instead of in the Toolbar as Action Buttons.

Here is a sample layout:

Application Menu items that are currently not available should be grayed-out, not removed from the popup menu.

Filter Menu

The Filter Menu is a Popup Menu of Navigation specific filtering based on a set of categories.

Here is a sample layout:

Filter Menu items that are currently not available should be grayed-out, not removed from the popup menu.

Navigation Area

(Per application)

Toolbar Area

The toolbar area provides a common set of actions for the active application:

(See the Toolbar widget for more information}}

Details Area

(Per application)

Non-Native X-11

(standard application)

Footer Area

(See the Footer widget for more information.)

Alert Area

Information Alerts -- displayed for short time (~2s) in a window overlay in the following location:

Confirmation Alerts -- floating centered window overlay with two buttons as follows:

Call Notification -- floating center window overlay with "answer" and "reject" (similar to Confirmation Alerts)

Hardware Buttons

The device features two hardware buttons:

Power
Auxiliary

Hardware Power Button

On Short Press: Close topmost application

On Short Hold (1 second): Open Menu with finger-sized hit areas:
- Lock (suspends the CPU)
- Flight Mode (turns off all transmitters)
- <Profile 1> (activates profile 1)
- <Profile 2> (activates profile 2)
- ...
- <Profile n> (activates profile n)
- Power off (turns off the device, calling 'poweroff')

On long hold (5 seconds): Power off

Hardware Auxiliary Button

On Short Press: Activate Dialer in Phone Application
On Hold: Open Main Menu (finger)

Navigation Related

(TBD)

Fonts Related

Pick (Create) some great fonts. look into chinese fonts

Theme Related

We will design only one theme and let the community create other themes. Here is the first concept:

Sounds Related

Sounds will be used to indicate confirmations.

See Ringtones and Wish List - OpenMoko Ringtones and Sounds

Input Methods

Activated automatically based on widget focus. displayed as overlay windows (no resizing of application). Vertical position is automatically calculated. look at how to do this with X-11

Typewriter
Numeric
Phone
Date & Time
Stylus
Finger

This is the dock keyboard:

Icon Sizes & Styles

Sizes

Item	Action	Constraints
Gtk::ICON_SIZE_MENU	128x128 pixels	Used in mokomenu
Gtk::ICON_SIZE_SMALL_TOOLBAR	36x30 pixels	Used in moko stylus toolbox
Gtk::ICON_SIZE_LARGE_TOOLBAR	32x32 pixels	Used in moko finger toolbox
Gtk::ICON_SIZE_DND		(not used in moko right now)
Gtk::ICON_SIZE_DIALOG	96x96	Used in moko dialogs