Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "E4/CSS/Visual Design"

< E4‎ | CSS
(Visual Design Items)
Line 110: Line 110:
 
| ?
 
| ?
 
| <br>
 
| <br>
|-}
 
 
{| border="1" cellpadding="2" width="100%"
 
!width="20%"|Test
 
!width="5%" align="center"|Foo
 
!width="40%"|Bar
 
!width="10%"|Reporter
 
!width="10%"|Details
 
!width="15%"|Comments
 
!width="10%"|STatus
 
 
|-}
 
|-}
  

Revision as of 15:18, 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

Interaction Design Ideas

  • Activity based layouts vs. perspectives (default workbench model)
  • Is there still a single editor area now that we can be more flexible?
  • "Split editor" interactions
    • Today creating a split is same feedback as stack manipulation but it's a different thing
    • Toolbar icons for managing split/unsplit (might be useful in "compare" also)


Timetable/approach

  • October
    • Investigate/define implementation constraints
      • Bogdan - explore tab shape definition, border control, Windows 7 implications (if any)
    • Prioritize visual design areas
      • Susan - work within e4 plat UI team to prioritize focus areas for design exploration
  • November
    • Visual design explorations
      • Linda - multiple design explorations with limited constraints
      • Susan - solicit team response/consensus on alternatives
      • Choose a direction by end of November
    • Interaction design explorations
      • Susan/Eric - work within e4 team to develop default workbench assumptions wrt perspectives, activity-based layouts, role of the editor area
  • Dec/Jan/Feb
    • Visual design
      • Linda/Susan/Bogdan - Iterate (push/pull) on default design
      • Susan - project team consensus, communicate to community
      • Susan/Bogdan - investigate programmatic reduction of clutter (fades, decorator removal, etc.)
      • Bogdan - implementation/evolution of CSS/SWT styling engine, CTabFolder, etc.
    • Interaction design
      • Eric/Susan (?) - implementation
  • March
    • EclipseCon goals
      • Show the new design
      • Show a "classic" stylesheet based on 3.x
      • Show radical alternatives to demonstrate CSS flexibility
  • April
    • stabilize design
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
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
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 10/19/2009 Susan - Need to push on default workbench model for SDK and use of perspectives.
UI Forms Is there any styling control to be offered 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  ?  ?

Back to the top