Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 338483

Summary: [client] visual styling for M6
Product: [ECD] Orion Reporter: Susan McCourt <susan>
Component: ClientAssignee: Susan McCourt <susan>
Status: RESOLVED FIXED QA Contact:
Severity: normal    
Priority: P3    
Version: 0.2   
Target Milestone: 0.2   
Hardware: PC   
OS: Windows 7   
Whiteboard:

Description Susan McCourt CLA 2011-02-28 17:32:00 EST
This bug tracks some visual styling tweaking I'm doing during reviews with our visual designer (Linda).
Comment 1 Susan McCourt CLA 2011-02-28 17:35:16 EST
Our text links are way too cluttered.  We are getting default (bright blue) link colors with underlining for some links.  This includes the purple "visited" underlining.  

Note that we currently use underlined links to suggest moving to another page (files, file favorites, searches), and non-underlined links for navigation that stays in page (folders in nav, outliner).

The suggestion is to tone down the styling for regular links:
- get rid of underlines until hover
- get rid of visited
- figure out another way to distinguish "move to another page" from "change context of current page."  Need to try out different ideas (color differences, underline on hover differences)
Comment 2 Susan McCourt CLA 2011-02-28 18:21:52 EST
(In reply to comment #1)
> - figure out another way to distinguish "move to another page" from "change
> context of current page."  Need to try out different ideas (color differences,
> underline on hover differences)

I tried a few different things:
1) color for links to another page, no color for links that stay on page.  Looks okay in outliner (where we are used to things being black) but
  - the file and folder favorites were differentiated by color and it seemed random
  - links in page have no differentiation until hover.  How do you know it's a link on a touch device?

2) black for all links, use dotted line for "stay on page" and solid underscore for "go to another page."  We tried black just to see if it calmed down the navigator.  
  - It was too plain
  - we still have no link differentiation outside of hover

3) use our dark blue link color for all links, use dotted line hover for "stay on page" and solid underscore hover for "go to a new page."  This looked best.  The rationale is that this still lets one distinguish links on touch devices and the distinction for "on page"/"off page" is helpful, but not critical to touch operation.
Comment 3 Susan McCourt CLA 2011-02-28 18:28:58 EST
other things we will try to do:
- nav breadcrumb moves up to main banner, after Orion logo
- editor "file name" becomes a breadcrumb
- page commands in dedicated strip above content for both editor and nav
- some font/styling cleanup 
- additional separators (for example between search box and login menu)
- shrink orion logo so we don't have to clip it
- alternate colors/gradients for main banner

Linda is still working on some ideas so these things will wait a few days.
Comment 4 Susan McCourt CLA 2011-03-08 02:18:51 EST
I've released a bunch of changes that get us closer to Linda's mockups for M6. 
Still to do:
- the menu link colors on the dark "page toolbar" need to be lightened
- need two styles of separators for upper and lower toolbars
- extra separators between logo and breadcrumb, search bar, etc.
Comment 5 Susan McCourt CLA 2011-03-08 02:44:35 EST
- on IE8 there is a scrollbar in the top header due to a few extra pixels below the dark bar.  Check the border and padding of the containing table.

- when you collapse the splitter in the editor, it flushes left rather than flushing to the 44px margin under the dark bar.
Comment 6 Susan McCourt CLA 2011-03-08 02:49:50 EST
- the "dead space" squares under the editor ruler that you get when you have a horizontal scrollbar are the dark gray of the underlying border container.  They should be white.
Comment 7 Susan McCourt CLA 2011-03-08 17:10:05 EST
This is a summary of the previous to-dos

>DONE - the menu link colors on the dark "page toolbar" need to be lightened
>DONE - need two styles of separators for upper and lower toolbars
>DONE - extra separators between logo and breadcrumb, search bar, etc.
TODO - on IE8 there is a scrollbar in the top header due to a few extra pixels below the dark bar.  Check the border and padding of the containing table.
TODO - when you collapse the splitter in the editor, it flushes left rather than
flushing to the 44px margin under the dark bar.
TODO - the "dead space" squares under the editor ruler that you get when you have a horizontal scrollbar are the dark gray of the underlying border container. 
They should be white.
Comment 8 Susan McCourt CLA 2011-03-08 19:33:58 EST
closing this bug in favor of more specific ones, so we can prioritize for M6.

> TODO - on IE8 there is a scrollbar in the top header due to a few extra pixels
> below the dark bar.  Check the border and padding of the containing table.

opened bug 339302.  This is high prio for M6.

> TODO - when you collapse the splitter in the editor, it flushes left rather
> than flushing to the 44px margin under the dark bar.

opened bug 339303.  Would be nice to fix for M6.

> TODO - the "dead space" squares under the editor ruler that you get when you
> have a horizontal scrollbar are the dark gray of the underlying border
> container.  They should be white.

opened bug 339304.  Minor detail, investigate after M6.