Tree: allow hover highlighting and click over full width of row

[nonken]

Currently tree deals width indenting through setting a margin. This is preventing setting a bg over the whole with of an item.

We also need a way to be able to have right-aligned indicators such as read/item counts as you see in mail applications, etc.

I might be able to help on that ticket, but assigned to bill initially

[bill]

You can see something like this in ​http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-widget/demos/widget/Tree/tree.html (but w/out any hover effect).

Given the one-background-image-per-node limitation of HTML, it means that each "row" in the tree has multiple square cells, one for each grid line or expando icon.

We can still have nested divs, but they can't have margin.

Hover should end up looking like this:

[bill]

mockup of hover effect over full row

[bill]

I unexpectedly found a simple way to allow Tree highlighting over the entire row. It keeps the same DOM structure but stops using margin-left, and rather just adjusts padding-left on dijitTreeRow depending on the node's indent level, plus adjust the background-image position to get the grid lines to still show up correctly.

The problem comes in RTL mode, where it's difficult to display the grid lines. They work fine in normal LTR mode.

The issue is that in CSS2 and in most/all browsers, you can't specify a background image as being offset x pixels from the right... the offsets are always from the left except for the "right" keyword itself.

I think I could get the grid lines to work in RTL mode too, by making Tree work like a layout widget, having a resize() method and monitoring page resizes but I'm wondering if it's worth it.

Oh, I tried using positive padding and negative margin instead, but IE has issues there, and the hovering/clicking to the left of the plus sign doesn't work (thus, no reason for the change).

[bill]

(In [16088]) Allow hovering/clicking over entire width of tree item, including portion to left of expando (+/-) icon. Fixes #6992 !strict.

The tree in RTL mode doesn't support the grid lines (see comments in ticket). Could possibly implement but probably not worth it.

Also, maybe want to adust/remove hover color for nihilo and soria. I just copied the setting from tundra.

[taras]

Excellent Improvement to the tree !

[bill]

(In [16191]) Use transparent png images for row highlighting hover effect, so that hovering over a tree row doesn't block out the grid lines behind it.

Note that users have the choice of overriding this styling by:

• not using grid lines at all
• not using a full-width background hover effect

In either of the above cases, users can use a plain background-color CSS rule w/out interfering w/the grid lines.

This checkin works everywhere except IE6, which I'm punting on (tree is still functional but the hover effect blocks out the grid line for that row). Dojo users can write a custom CSS rule for IE6 to use a filter: condition to pull in the transparent PNG, but they need to put the path relative to the main HTML file, not the CSS file.

Refs #6992

PS: these are preliminary images; a designer should update them if there's a better setting.

[bill]

(In [16215]) Tree was getting indented one level too much (the initial node was indented rather than being at the far left). Refs #6992 !strict