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

Bug 371136

Summary:	consider using <ul><li><li>... for command rendering
Product:	[ECD] Orion	Reporter:	Susan McCourt <susan>
Component:	Client	Assignee:	Susan McCourt <susan>
Status:	RESOLVED FIXED	QA Contact:
Severity:	normal
Priority:	P3
Version:	0.4
Target Milestone:	0.5 M1
Hardware:	PC
OS:	Windows 7
Whiteboard:
Bug Depends on:
Bug Blocks:	368843

Description Susan McCourt

2012-02-09 15:25:34 EST

Getting good layout for commands is often more difficult than it should be because we are creating command elements in a span and using the individual elements to do things like margins/spacing.

For example see bug 370522

To get approximate vertical centering in the toolbar we had to pad the command element classes.  It works for the most part, but you end up with other contexts (git status page) where you don't need all that padding.

What we really should do is have the command element padding be only what an individual command would need to look good, as specified by a visual designer.  For example....use a 1 px button border around icons, and have 2 px of padding/breathing room between icon and border.

If we then want to add pixels between commands horizontally, or add a margin to push a row of commands down, we should be doing this in an outer command row element.  The rest of the planet does this with <ul><li>my command</li>...etc.

Then you can style your lists and elements as needed in the context in which they appear.

This was too risky to consider in 0.4 RC1 but I'd like to do some experiments early in 0.5.  It would make our CSS much less brittle.

The problem we get with this approach is that the spacing should be different in different contexts.  F

Comment 1 Susan McCourt

2012-02-09 15:26:28 EST

ignore that.  pushed the button before deleting unneeded text.
> The problem we get with this approach is that the spacing should be different
> in different contexts.  F

Comment 2 Susan McCourt

2012-03-08 18:06:08 EST

fixed. 
As it turned out, the ul/li was not a huge win on its own, but going through the exercise helped me to clean up the CSS independent of that:
- separate true command styling (padding needed for border and hover effect) from the margin styling
- remove all vertical margins (whether it's ul or the old way)
- have parents specify vertical spacing where it's needed (like the toolbar)

In general this compacted the vertical spacing (in a good way).  There is more that can be done on vertical layout polish, but that would happen outside of the framework on a case by case basis.