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

Bug 360255

Summary:	Icon decorators
Product:	[ECD] Orion	Reporter:	Szymon Brandys <Szymon.Brandys>
Component:	Client	Assignee:	Anton McConville <antonm>
Status:	CLOSED WONTFIX	QA Contact:
Severity:	normal
Priority:	P3	CC:	antonm, Michael_Rennie, susan
Version:	unspecified
Target Milestone:	---
Hardware:	PC
OS:	Windows 7
Whiteboard:

Description Szymon Brandys

2011-10-07 12:18:24 EDT

I need to add decorators to icons in my navigator tree. For instance each 'folder' icon in my tree may have a decoration in top-right and bottom-right corners. Since there may be many of these decorations, creating an icon variant per each combination does not look good. I started using css layers but I'm not sure how to use it together with recently used sprites

Comment 1 Susan McCourt

2011-10-07 12:21:46 EDT

can you get me an HTML/CSS snippet of what you are doing now to create the overlays, and I'll try a sprited equivalent. 

In general I got rid of image tags and replaced with spans that were 
display:inline-block

I'm not sure how that plays with layers...

Comment 2 Szymon Brandys

2011-10-07 12:47:51 EDT

dojo.create("img", {src: "image.gif", style: "vertical-align: middle;"}, div);
dojo.create("img", {src: "decoration_ovr.gif", style: "vertical-align: middle; position:relative; left:-12px; z-index:2;"}, div);

z-index does the trick. Of course I use images instead of styles now. But I could use styles and use z-index in css.

Comment 3 Susan McCourt

2011-10-10 14:27:26 EDT

(In reply to comment #2)
> dojo.create("img", {src: "image.gif", style: "vertical-align: middle;"}, div);
> dojo.create("img", {src: "decoration_ovr.gif", style: "vertical-align: middle;
> position:relative; left:-12px; z-index:2;"}, div);
> 
> z-index does the trick. Of course I use images instead of styles now. But I
> could use styles and use z-index in css.

I don't think sprites should cause any trouble here.  Several options:

1 - you can retain the img element, using "none.png" as the image src.  Then add classes to the images for the sprite background and the position in the sprite.  The sprites rely on background-position, not position, so there should not be a conflict here.  So assuming you have some CSS such as:
.mySprite {
   vertical-align: middle;
   background: url(../images/core_sprites.png) no-repeat top left;
}

.myOverlay {
   position: relative;
   left: -12px;
   z-index: 2;
}

you can use:
dojo.create("img", {src: "none.png", class: "mySprite core-sprite-image"}, div);
dojo.create("img", {src: "none.png", class" "mySprite core-sprite-decoration_ovr myOverlay"}, div);


- where possible i have gotten rid of img elements (to eliminate the need for the none.png).  I use a span instead, and assign "imageSprite" class which ensures the inline-block and other necessary css.  Again, these classes don't use position or z-index, so I think you should be fine. Example: 

dojo.create("span", {class: "imageSprite core-sprite-image"}, div);
dojo.create("span", {class" "imageSprite core-sprite-decoration_ovr myOverlay"}, div);

Comment 4 Szymon Brandys

2011-10-27 08:14:29 EDT

Thanks. I'll try this out and confirm that it works.

Comment 5 Anton McConville

2015-05-08 10:08:44 EDT

This is new again!

Comment 6 Michael Rennie

2017-01-10 15:40:29 EST

Closing as part of a mass clean up of inactive bugs. Please reopen if this problem still occurs or is relevant to you. For more details see:

https://dev.eclipse.org/mhonarc/lists/orion-dev/msg04002.html