The New Dock Theme

This theme is experimental. It is an attempt to exercise the use of modern CSS techniques in OGo templates, with two objectives:

1. Design an improved page layout with fixed parts and scrolling dynamic parts. The fixed parts contains actions that are supposed to be available independently of the size (depths) of the displayed page. For instance, the logout button, the history, and the clipboard. Two links "Top" and "Bot" allows one to jump to the top/bottom of the scrollable page.
2. Design an enhanced Dock to enable a CSS menu with direct actions to OGo aplication. This menu will have links allowing to jump directly into tabs or objects from any application.

An image worth  a thousands words.

Warnings

This theme does not follow design rules, quality assurance and specifications found in other themes officially supported by the OpenGroupware development.

In special:

• It works on trunk 1642.
• It is a graphics only theme, and the option on text-mode will probably not work.
• It may show clumsy into low-resolution screens. So better use 1024x768 screens or above.
• It was designed and tested mostly on Firefox and other Gecko-based browsers, such as Seamonkey or Mozilla. It appears to work well in KHTM (Konqueror).
• It breaks on Internet Explorer, until I fix a CSS issue on menu drop-down, hidden by the content (The solution seems to be exlained here).
• It relies heavily in CSS techniques, and several IE hacks were implemented to make it work.
• DO NOT USE this theme as your root theme. An ill-designed theme used in the root account can turn the root account unusable.

The Layout

The layout was inspired in the excellent work of Stu Nichols. This is a great site full of interesting ideas. In particular, the layout was borrowed from this sample. The CSS layout was intermixed with the OOo theme of OpenGropware.

The parts of the layout are:

1. A header, in two parts: One with the company logo (loaded in the CSS), and the other with a) the navigation, b) the clipboard and c) the warning panel.
2. The dock, just below the header, in fixed position.
3. The content, with horizontal and vertical scrolling. 
4. The footer, that contains the session username, timings, as well as the top of page, bottom of page (those are usefull on long forms since the only way to exit them is to be on top (x) or bottom of it (save/cancel)), preferences links and the logout link.

Most of the complexity of this theme is carried into the CSS file (OGo.css). The file contains specific hacks for Internet Explorer, and should be modified with great care, and some apparent syntax error in css SHOULD NOT BE CORRECTED.

The layout works in Firefox (Gecko-based browsers), KHTML and Intenet Exporer, it was not tested on Opera.

The guts

The layout is implemented in LSWSkyrixFrame.html, LSWSkyrixFrame.wod  and OGo.css

The Dock

The dock is the the most unusual part of this theme. Is was borrowed and adjusted from this example. It contains several IE6 hacks and any apparent css syntax error should not be "corrected".

This dock contains CSS-activated menus for several OGo application. Some of the menus links to specific application tabs, other creates new OGo objects, and for the Projects application, a sub-menu for docked projects will show.

To fully benefit of this new docks menus, some bug enhancements must be fixed/implemented into the trunk code. In particular:

• To access Contacs tabs directly: bug 1732
• To access Enterprises tabs directly: bug 1734
• To access Jobs tabs directly: bug 1735.

It should be possible to access Projects and Palms tabs directly with similar pieces of code (TODO).

Warnings

This dock is better displayed in 1024x768 screens. On low resolution, the last dock application may not show in the screen and you may not acess it. Sorry (TODO).

Longer docks on high-res screens may fold in new dock lines, with poor results. Sorry again.

The guts

The dock is implemented in ./BaseUI/SkyDock.* . In SkyDock.html there is a loop on dockentries. A test on miniview existence is carried on the top of the dockentries loop. Miniviews exists for the Agenda (OGoSchedulerDock)  and the Mail (OgoMailInfo).

Then for each dockentry, a test is carried to build the menus specific for the iterated dock application. For the Projects application, a sub-menu is built for the docked projects.

Some dummy links were left in the dock as example and guide for improvements. You may remove it.

If you add a new personnal dock application, other than the apps supplied by OGo developement, you MUST adjust Skydock.html, SkyDock.wod, BaseUI.strings and OGo.css

New locale strings

For each new menu entry in the dock you should provide the appropriate localization strings in the file translations/<your-language>/BaseUI.strings . Look (grep) for "labels." in SkyDock.wod to get the strings/labels you need.

For example (pt-BR)

newApptLabel            = "Novo Compromisso";
Today                   = "Hoje";
ThisWeek                = "Esta Semana";
ThisMonth               = "Este Mês";
year                    = "Ano";
docked                  = "Marcados";
newCompany              = "Nova Empresa";
newPerson               = "Novo Contato";
showAdvancedSearch      = "Pesquisa Avançada";
newProject              = "Novo Projeto";
newArticle              = "Nova Notícia";
newTask                 = "Nova Tarefa";

Conclusion and remarks

One may complain that this new dock may be hefty, since it carries a large set of links. However it should spare some intermediate page navigation as it allows to go directly to page tabs. For example: new appointment, new contact, new news, etc...If your server is like mine, 8.000 miles from me, you must have experienced "web latency".

Except for the bug-enhancements cited above, there is no need to work on the Objective-C part of the code, and all can be carried by the html/wod files and specially the OGo.css stylesheet. For instance, the new dock colors and graphics can be modified directly in the stylesheet. Experiments are encouraged.

We think this new dock with menus can improve the ease of use of OGo. I will appreciate any feedback, enhancements, suggestions or whatever on this work