Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#6992 closed defect (fixed)

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

Reported by: nonken Owned by: bill
Priority: high Milestone: 1.3
Component: Dijit Version: 1.1.1
Keywords: Tree, bg, item count Cc: nonken
Blocked By: Blocking:

Description (last modified by bill)

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

Attachments (1)

mockup.png (3.8 KB) - added by bill 11 years ago.
mockup of hover effect over full row

Download all attachments as: .zip

Change History (8)

comment:1 Changed 11 years ago by bill

Description: modified (diff)
Summary: Tree markup improvementsTree: allow hover highlighting and click over full width of row

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:

mockup of hover effect over full row

Changed 11 years ago by bill

Attachment: mockup.png added

mockup of hover effect over full row

comment:2 Changed 11 years ago by bill

Milestone: 1.31.5

comment:3 Changed 11 years ago by bill

Milestone: 1.51.3
Status: newassigned

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).

comment:4 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

(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.

comment:5 Changed 11 years ago by taras

Excellent Improvement to the tree !

comment:6 Changed 11 years ago by 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.

comment:7 Changed 11 years ago by 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

Note: See TracTickets for help on using tickets.