SpitAndPolish

Revision 9 as of 2008-06-16 20:56:29

Clear message

Summary

GTK+ supports RGBA-colormaps, which allow to improve the aesthetic looks of the UI, especially in combination with a composited environment (e.g. compiz, metacity with enabled compositor). RGBA-colormaps make it possible to composite child-widgets against their parents background. In addition to that it is also possible to composite top-level windows against the desktop or whatever window is stacked below it, if run under a composited environment. There are two common approaches to make use of this GTK+-feature. The first one is a GTK+-theme engine (e.g. murrine) drawing widgets by default with a RGBA-colormap and choose the opacity on a per-widget-basis. The most popular variation of this - under composited environments - is to have the top-level windows background to be slightly transparent (see screenshot A). The second approach, which also works without a RGBA-capable GTK+-theme, is to manually take care of the clearing and filling of a widgets background in its expose-handler (see screenshots B, C and D).

screenshot A (GTK+-theme-engine murrine with RGBA-support)BR [http://people.ubuntu.com/~mmueller/murrine-rgba.jpg http://people.ubuntu.com/~mmueller/small_murrine-rgba.png]

screenshot B (top-level window composited against desktop)BR [http://people.ubuntu.com/~mmueller/authenticate-rgba.png]

screenshot C (top-level window composited against desktop)BR [http://people.ubuntu.com/~mmueller/logout-rgba.png]

screenshot D (buttons composited against window-background)BR [http://people.ubuntu.com/~mmueller/brasero-rgba.png]

This spec does not have a targetted release of Ubuntu and should rather be viewed as an on-going effort to improve the looks of the desktop in general. Not all mentioned improvements of UI-elements need to be implemented at once, although it would be nicer from a consistency point of view.

Release Note

Decoration-less popup-dialogs now use slightly rounded corners and subtle transparencies in order to make them visually more pleasing and provide a more consistent look in regards to enabled desktop-effects. Main application windows also have very light transparencies now as long as the application does not override this with custom drawing. These visual effects are only active, if desktop-effects are turned on. Also menus and comboboxes use slightly rounded corners to help unify the look of UI-elements.

Rationale

Unification of UI-elements across the desktop needs to be continued. Offering theme-artists and UI-designers greater flexibilty, makes their work more fun thus more productive. Increasing the visual attractiveness of the GNOME- and Ubuntu-desktop is of paramount importance, because users demand and expect good looking desktop-systems these days. Furthermore we need to stay competitive with offereings form other projects and vendors.

Use Cases

A list with dialogs, applications and widgets that should make use of visual enhancements possible due to the use of RGBA-colormaps and a composited desktop (desktop-effects):

mockup of gnome-screensaver's unlock-dialogBR [http://people.ubuntu.com/~mmueller/spit-and-polish/unlock-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_unlock-mockup.png]

mockup of GTK+-widget menuBR [http://people.ubuntu.com/~mmueller/spit-and-polish/menu-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_menu-mockup.png]

mockup of GTK+-widget comboboxBR [http://people.ubuntu.com/~mmueller/spit-and-polish/combobox-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_combobox-mockup.png]

comboboxentry widget (mockup, todo)

mockup of libgksu's authenticate-dialogBR [http://people.ubuntu.com/~mmueller/spit-and-polish/authenticate-mockup.png http://people.ubuntu.com/~mmueller/spit-and-polish/small_authenticate-mockup.png]

logout-dialog (screenshot, implemented) brasero (screenshot, implemented) gtk-theme (screenshot, murrine, GtkStatusIcon/tray-icon issue)

Assumptions

Design

You can have subsections that better describe specific parts of the issue.

Implementation

This section should describe a plan of action (the "how") to implement the changes discussed. Could include subsections like:

UI Changes

Should cover changes required to the UI, or specific UI that is required to implement this

Code Changes

Code changes should include an overview of what needs to change, and in some cases even the specific details.

Migration

There are no migration-concerns for users. Only the look of certain UI-elements is changed in subtle ways. The behaviour of the UI remains unchanged.

Test/Demo Plan

It's important that we are able to test new features, and demonstrate them to users. Use this section to describe a short plan that anybody can follow that demonstrates the feature is working. This can then be used during testing, and to show off after release.

This need not be added or completed until the specification is nearing beta.


CategorySpec