#5780 TreeTable uses images that not display transparent in IE6

svn changeset:20720/svn branch:6.7

2 files changed, 36 insertions, 1 deletions

diff --git a/WebContent/VAADIN/themes/base/treetable/treetable.css b/WebContent/VAADIN/themes/base/treetable/treetable.css
index be834b46e4..2dd2b92197 100644
--- a/WebContent/VAADIN/themes/base/treetable/treetable.css
+++ b/WebContent/VAADIN/themes/base/treetable/treetable.css
@@ -1,6 +1,7 @@
 .v-treetable-treespacer {
     display: inline-block;
     background: transparent;
+    position: relative;
     height: 9px;
     /* defines the amount of indent per level */
     width: 18px;
@@ -17,6 +18,29 @@
     background: url(../treetable/img/arrow-down.png) right center no-repeat;
 }
 
+/* Show the tree arrows in a separate element in IE 6 to emulate background-position: right when using AlphaImageLoader */
+.v-ie6 .v-treetable-node-closed, .v-ie6 .v-treetable-node-open  {
+	background-image: none;
+}
+
+.v-treetable-spacer-ie {
+	position: absolute;
+	height: 9px;
+	width: 10px;
+	right: 0;
+	top: -1px;
+}
+
+.v-treetable-node-closed .v-treetable-spacer-ie {
+	/* vaadin.setAlphaImageLoader used to get relative paths (relative to the themeUrl) with AlphaImageLoader */
+	zoom: expression((function(e) {vaadin.setAlphaImageLoader(e, "../base/treetable/img/arrow-right.png")})(this));
+}
+
+.v-treetable-node-open .v-treetable-spacer-ie {
+	/* vaadin.setAlphaImageLoader used to get relative paths (relative to the themeUrl) with AlphaImageLoader */
+	zoom: expression((function(e) {vaadin.setAlphaImageLoader(e, "../base/treetable/img/arrow-down.png")})(this));
+}
+
 .v-treetable .v-checkbox {
 	display: inline-block;
 	padding-bottom: 4px;
diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTreeTable.java b/src/com/vaadin/terminal/gwt/client/ui/VTreeTable.java
index ecc065e117..b3b24b3f39 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VTreeTable.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTreeTable.java
@@ -192,6 +192,16 @@ public class VTreeTable extends VScrollTable {
 
                     treeSpacer = Document.get().createSpanElement();
 
+                    if (BrowserInfo.get().isIE6()) {
+                        // Must add an absolutely positioned element with right:
+                        // 0 to get the background aligned to the right in IE 6
+                        // where AlphaImageLoader is used for the background
+                        SpanElement ieSpacerHolder = Document.get()
+                                .createSpanElement();
+                        ieSpacerHolder.addClassName("v-treetable-spacer-ie");
+                        treeSpacer.insertFirst(ieSpacerHolder);
+                    }
+
                     treeSpacer.setClassName(classname);
                     container.insertFirst(treeSpacer);
                     depth = rowUidl.hasAttribute("depth") ? rowUidl
@@ -213,7 +223,8 @@ public class VTreeTable extends VScrollTable {
 
             @Override
             public void onBrowserEvent(Event event) {
-                if (event.getEventTarget().cast() == treeSpacer
+                SpanElement target = event.getEventTarget().cast();
+                if ((target == treeSpacer || target.getParentElement() == treeSpacer)
                         && treeSpacer.getClassName().contains("node")) {
                     if (event.getTypeInt() == Event.ONMOUSEUP) {
                         sendToggleCollapsedUpdate(getKey());