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

Bug 370415

Summary:

Padding and alignment for different command presentations

Product:

[ECD] Orion

Reporter:

Szymon Brandys <Szymon.Brandys>

Component:

Client

Assignee:

Susan McCourt <susan>

Status:

RESOLVED FIXED

QA Contact:

Severity:

normal

Priority:

CC:

susan

Version:

0.4

Target Milestone:

0.4 RC1

Hardware:

OS:

Windows 7

Whiteboard:

Attachments:

Description	Flags
Some buttons are taller some lower	none
No padding between icon and label	none
Problems with alignment	none

Description Szymon Brandys

2012-02-02 05:17:48 EST

I see some issues with command presentations and I'm not sure if they are described in another bug. I'll attached a screenshot per each case.

Comment 1 Szymon Brandys

2012-02-02 05:20:56 EST

Created attachment 210434 [details]
Some buttons are taller some lower

case 1: Some buttons are taller, some lower

Comment 2 Szymon Brandys

2012-02-02 05:22:40 EST

Created attachment 210435 [details]
No padding between icon and label

Case 2: No padding between icon and label

Comment 3 Szymon Brandys

2012-02-02 05:36:05 EST

Created attachment 210436 [details]
Problems with alignment

(1) shows 5 actions rendered using the "button" style. Two of them do not have icons attached. The alignment is fine in this case, everything is vertically aligned.
(2) are actually two divs. The first one contains just the "See Full Log" command with no icon rendered using the "tool" style. The second contains 4 commands with icons rendered using the "button" style. The first div has some top padding added, otherwise it would look like (3). And see (4), this is "tool" presentation. By default the icon is moved a bit to top comparing to "button" presentation.

Comment 4 Susan McCourt

2012-02-02 10:52:45 EST

i expect much of this to be addressed when I implement the guidelines in bug 360986.  I anticipate adding some structure (ul/li) around the command sequence so we can easily style margins, etc.  The way it's done now requires individual styling of the elements and this does not scale in different scenarios.  I'll revalidate these screenshots when bug 360986 is implemented.

Note in that bug we are moving away from text+icon.

Comment 5 Susan McCourt

2012-02-03 02:38:26 EST

(In reply to comment #1)
> Created attachment 210434 [details]
> Some buttons are taller some lower
> 
> case 1: Some buttons are taller, some lower

Fixed.  The particular case doesn't happen because we don't have text + icon anymore. (bug 360986) The icon tools are all of uniform size.  Note that where the icon sits in its 16x16 box can affect the perception.  I find that delete/fetch look good together but checkout/delete look a little weird.  You can use the button hover to verify that they are indeed positioned the same.

(In reply to comment #2)
> Created attachment 210435 [details]
> No padding between icon and label
> 
> Case 2: No padding between icon and label
Per bug 360986 we don't do this anymore.

(In reply to comment #3)
> Created attachment 210436 [details]
> Problems with alignment

The vertical alignment is fixed (and I removed the padding you had for the links.  Further, i was able to get rid of the extra div.

The main thing I'm not quite happy with is vertical alignment of the entire row.  I opened bug  370522 to address this.  We have this issue in section headers and toolbars.