Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
E4/CSS/Visual Design
This page summarizes the investigations into an updated visual design (default stylesheet) for the e4 workbench.
Goals
The goals of this work are:
- design a compelling visual style for e4
- reduce visual noise, focus on the data
- investigate additional breathing space, lessons learned from publishing and web
- sleek/modern
- drive the ability/flexibility of the CSS styling for SWT widgets
- demonstrate the ability to keep a "classic" look and supply alternate designs
- identify the major interaction design issues (workbench model) that might block visual design
Timetable/approach
October 2009 | Nov/Dec 2009 | Jan/Feb 2010 | March 2010 | April 2010 |
---|---|---|---|---|
* Investigate/define implementation constraints
| ||||
* Visual design explorations
| ||||
* EclipseCon goals
|
Design element | Requirement | Implementation constraints | Priority | Status |
---|---|---|---|---|
Tabs | Ability to define custom shapes. Shape should be specified in CSS (ie, you shouldn't have to write Java ownerdraw code to get custom shapes). | Consider use of sprites/images and prototype the performance. Look for other standards for specifying custom shapes. | High | Bogdan investigating SVG as descriptive format for tab shapes. Linda to provide SVG file(s) of previous tab shape designs. |
Tabs | Custom highlight colors and gradients | An approach using images limits the ability to honor platform themes where the color does not need to be specified. | High | SVG would solve this issue. |
Tabs | Separate background color for area behind tabs (blank space on right) | None - Can be drawn by ETabFolder | High | |
Tabs | Specify custom fonts/bolding for normal/selection | None - Can be drawn by ETabFolder | High | |
Tabs | Ability to remove keylines or specify their color independently | None - Can be drawn by ETabFolder | High | which borders do we need to control (remove top border without removing tab tops? position of bottom line?) |
Widget borders | reducing key lines within tab content, etc. | Need to determine which borders can be removed/controlled easily at platform level. | Medium | Bogdan to provide summary of OS limitations |
View and editor toolbars | Consistent location of view and editor toolbars. Consider a local editor toolbar. Consider a static position for view toolbar (always below?). Location of min max controls | Medium | Ongoing discussion in Bug 292792 | |
View and editor visuals | Visual separation of view stacks without using keylines (coloring?). | Medium | ||
Perspective Switcher | Look and feel of switcher in e4, location of switcher | Medium | Ongoing discussion in Bug 292789 | |
Workbench background | Specify an image as the background for the workbench | ? | Low | |
Toolbar | Specify transparency or customizable background | Current assumption: limited by platform | Low | Bogdan looking at Windows 7, any changes here |
Menubar | Specify transparency or customizable background | Current assumption: limited by platform | Low | Bogdan looking at Windows 7, any changes here |
Decorations | Don't show decorators for 90% case | would need new graphics for "exception case" | ? | |
Fades | Fade non-active views | ? | ? | |
UI Forms | Are there additional requirements for styling ui forms components? | Apps desiring styling control over forms should be encouraged to use web UI technology to achieve this. There will be no more effort applied to styling ui forms. | Low | No work to be done |