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

• • 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

• • Linda - multiple design explorations with limited constraints
  • Susan - solicit team response/consensus on alternatives
  • Choose a direction by end of year? via bug reports, e4 meetings
• Interaction design explorations
  • Susan/Eric - work within e4 team to develop default workbench model Bug 292789

• 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.
• Eric/Susan (?) - working toward default workbench model and other interaction design issues

• • Show the new design
  • Show a "classic" stylesheet based on 3.x
  • Show radical alternatives to demonstrate CSS flexibility

Visual Design Items

The following table tracks visual design elements that are being considered and any constraints that the implementation imposes on the design. Note that the priority listed in the table is related to its impact on the overall visual design. High priority items must have their constraints defined first, while lower priority items can be defined later in the design process without affecting the overall design approach.

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