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.
Difference between revisions of "E4/CSS/Visual Design"
(→Timetable/approach) |
|||
Line 12: | Line 12: | ||
== Visual Design Items == | == Visual Design Items == | ||
− | |||
− | + | {| border="1" cellpadding="2" width="100%" | |
− | + | !width="15%"|Design element | |
− | + | !width="25%"|Requirement | |
− | + | !width="30%"|Implementation constraints | |
− | + | !width="5%"|Priority | |
− | + | !width="25%"|Status | |
− | + | |- | |
− | + | | Tabs | |
− | + | | Ability to define custom shapes | |
− | + | | Shape should be specified in CSS, shouldn't require Java code (ownerdraw). Consider use of sprites/images and prototype the performance. Look for other standards for specifying custom shapes. | |
− | + | | High | |
− | + | | 10/19/2009 - 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 | |
− | + | | 10/19/2009 - SVG would solve this issue. | |
− | + | | - | |
− | + | | Tabs | |
− | + | | Separate background color for area behind tabs (blank space on right) | |
− | + | | None - Can be drawn by ETabFolder | |
+ | | High | ||
+ | | (Already in .9?) | ||
+ | | - | ||
+ | | Tabs | ||
+ | | Specify custom fonts/bolding for normal/selection | ||
+ | | None - Can be drawn by ETabFolder | ||
+ | | High | ||
+ | | (Already in .9?) | ||
+ | | - | ||
+ | | Tabs | ||
+ | | Ability to remove keylines or specify their color independently | ||
+ | | None - Can be drawn by ETabFolder | ||
+ | | High | ||
+ | | Needs definition - 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 | ||
+ | | Needs definition | ||
+ | | - | ||
+ | | 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 | ||
+ | | Needs definition | ||
+ | | - | ||
+ | | View and editor visuals | ||
+ | | Visual separation of view stacks without using keylines (coloring?). | ||
+ | | | ||
+ | | Medium | ||
+ | | Needs definition | ||
+ | | - | ||
+ | | 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 | ||
+ | | Needs definition | ||
+ | | - | ||
+ | | Perspective Switcher | ||
+ | | Look and feel of switcher in e4, location of switcher | ||
+ | | | ||
+ | | Medium | ||
+ | | Susan - Need to push on default workbench model for SDK and use of perspectives. | ||
+ | | - | ||
+ | | Perspective Switcher | ||
+ | | Look and feel of switcher in e4, location of switcher | ||
+ | | | ||
+ | | Medium | ||
+ | | 10/19/2009 Susan - Need to push on default workbench model for SDK and use of perspectives. | ||
+ | | - | ||
+ | | UI Forms | ||
+ | | Is there any styling control beyond existing "blend with platform colors approach"? | ||
+ | | | ||
+ | | Medium | ||
+ | | 10/19/2009 Susan - Collect requirements | ||
+ | | - | ||
+ | | Workbench background | ||
+ | | Specify an image as the background for the workbench | ||
+ | | ? | ||
+ | | Low | ||
+ | | | ||
+ | | Need to understand implementation constraints | ||
+ | | - | ||
+ | | Toolbar | ||
+ | | Specify transparency or customizable background | ||
+ | | Current assumption: limited by platform | ||
+ | | Low | ||
+ | | 10/19/2009 - Bogdan looking at Windows 7, any changes here | ||
+ | | - | ||
+ | | Menubar | ||
+ | | Specify transparency or customizable background | ||
+ | | Current assumption: limited by platform | ||
+ | | Low | ||
+ | | 10/19/2009 - 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 | ||
+ | | ? | ||
+ | | ? | ||
+ | | - | ||
+ | } | ||
− | == Interaction Design | + | |
+ | == Interaction Design Ideas == | ||
* Activity based layouts vs. perspectives (default workbench model) | * Activity based layouts vs. perspectives (default workbench model) | ||
* Is there still a single editor area now that we can be more flexible? | * Is there still a single editor area now that we can be more flexible? | ||
Line 44: | Line 132: | ||
** Toolbar icons for managing split/unsplit (might be useful in "compare" also) | ** Toolbar icons for managing split/unsplit (might be useful in "compare" also) | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Timetable/approach == | == Timetable/approach == | ||
* October | * October | ||
** Investigate/define implementation constraints | ** Investigate/define implementation constraints | ||
− | *** Bogdan - explore tab shape definition, | + | *** Bogdan - explore tab shape definition, border control, Windows 7 implications (if any) |
** Prioritize visual design areas | ** Prioritize visual design areas | ||
*** Susan - work within e4 plat UI team to prioritize focus areas for design exploration | *** Susan - work within e4 plat UI team to prioritize focus areas for design exploration |
Revision as of 14:36, 19 October 2009
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
Visual Design Items
Design element | Requirement | Implementation constraints | Priority | Status | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Tabs | Ability to define custom shapes | Shape should be specified in CSS, shouldn't require Java code (ownerdraw). Consider use of sprites/images and prototype the performance. Look for other standards for specifying custom shapes. | High | 10/19/2009 - 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 | 10/19/2009 - SVG would solve this issue. | - | Tabs | Separate background color for area behind tabs (blank space on right) | None - Can be drawn by ETabFolder | High | (Already in .9?) | - | Tabs | Specify custom fonts/bolding for normal/selection | None - Can be drawn by ETabFolder | High | (Already in .9?) | - | Tabs | Ability to remove keylines or specify their color independently | None - Can be drawn by ETabFolder | High | Needs definition - 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 | Needs definition | - | 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 | Needs definition | - | View and editor visuals | Visual separation of view stacks without using keylines (coloring?). | Medium | Needs definition | - | 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 | Needs definition | - | Perspective Switcher | Look and feel of switcher in e4, location of switcher | Medium | Susan - Need to push on default workbench model for SDK and use of perspectives. | - | Perspective Switcher | Look and feel of switcher in e4, location of switcher | Medium | 10/19/2009 Susan - Need to push on default workbench model for SDK and use of perspectives. | - | UI Forms | Is there any styling control beyond existing "blend with platform colors approach"? | Medium | 10/19/2009 Susan - Collect requirements | - | Workbench background | Specify an image as the background for the workbench | ? | Low | Need to understand implementation constraints | - | Toolbar | Specify transparency or customizable background | Current assumption: limited by platform | Low | 10/19/2009 - Bogdan looking at Windows 7, any changes here | - | Menubar | Specify transparency or customizable background | Current assumption: limited by platform | Low | 10/19/2009 - 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 | ? | ? | -
}
Interaction Design Ideas
Timetable/approach
|