Final fix for #6745: Connectors for Tree

-Adjusted all themes to have even pixel caption height
-Liferay theme doesn't support the connectors (#7682)

svn changeset:21411/svn branch:6.7

13 files changed, 180 insertions, 145 deletions

diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-collapse-last.png b/WebContent/VAADIN/themes/base/tree/img/connector-collapse-last.png
new file mode 100644
index 0000000000..c03e0839b5
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-collapse-last.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-collapse.png b/WebContent/VAADIN/themes/base/tree/img/connector-collapse.png
new file mode 100644
index 0000000000..577a7c9de6
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-collapse.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-expand-last.png b/WebContent/VAADIN/themes/base/tree/img/connector-expand-last.png
new file mode 100644
index 0000000000..3a578681de
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-expand-last.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-expand.png b/WebContent/VAADIN/themes/base/tree/img/connector-expand.png
new file mode 100644
index 0000000000..f3548875fa
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-expand.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-leaf-last.png b/WebContent/VAADIN/themes/base/tree/img/connector-leaf-last.png
new file mode 100644
index 0000000000..15a255088a
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-leaf-last.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-leaf.png b/WebContent/VAADIN/themes/base/tree/img/connector-leaf.png
new file mode 100644
index 0000000000..282839bb95
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/img/connector-leaf.png
diff --git a/WebContent/VAADIN/themes/base/tree/img/connector.png b/WebContent/VAADIN/themes/base/tree/img/connector.png
index 2844bba731..b64707e17d 100644
--- a/WebContent/VAADIN/themes/base/tree/img/connector.png
+++ b/WebContent/VAADIN/themes/base/tree/img/connector.png
diff --git a/WebContent/VAADIN/themes/base/tree/tree-connectors.css b/WebContent/VAADIN/themes/base/tree/tree-connectors.css
new file mode 100644
index 0000000000..f0c113e796
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/tree-connectors.css
@@ -0,0 +1,38 @@
+/* Make item caption height an even number (so that the connector dots overlap nicely) */
+.v-tree-connectors .v-tree-node-caption {
+	padding-top: 1px;
+}
+.v-tree-connectors .v-tree-node {
+	background: transparent url(img/connector-expand.png) no-repeat 2px -52px;
+}
+.v-tree-connectors .v-tree-node-expanded {
+	background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
+}
+.v-tree-connectors .v-tree-node-last {
+	background: transparent url(img/connector-expand-last.png) no-repeat 2px -52px;
+}
+.v-tree-connectors .v-tree-node-expanded.v-tree-node-last {
+	background: transparent url(img/connector-collapse-last.png) no-repeat 2px -52px;
+}
+.v-tree-connectors .v-tree-node-expanded {
+	background: transparent url(img/connector-collapse.png) no-repeat 2px -52px;
+}
+.v-tree-connectors .v-tree-node-leaf {
+	background: transparent url(img/connector-leaf.png) repeat-y 2px 50%;
+}
+.v-tree-connectors .v-tree-node-leaf-last {
+	background: transparent url(img/connector-leaf-last.png) repeat-y 2px 50%;
+}
+.v-tree-connectors .v-tree-node-children {
+	background: transparent url(img/connector.png) repeat-y 8px 0;
+}
+.v-tree-connectors .v-tree-node-children-last {
+	background: transparent;
+}
+.v-tree-connectors .v-tree-node-drag-top,
+.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+	background-position: 2px -53px;
+}
+.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+	background-position: 2px 50%;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree-default.css b/WebContent/VAADIN/themes/base/tree/tree-default.css
new file mode 100644
index 0000000000..c486233ea8
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/tree/tree-default.css
@@ -0,0 +1,119 @@
+.v-tree {
+	text-align: left; /* Force default alignment */
+	overflow: hidden;
+	padding: 1px 0;
+	outline: none;
+}
+.v-tree-node {
+	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
+	padding: 1px 0;
+}
+.v-tree-node-caption:focus {
+	outline: none;
+}
+div.v-tree-node-leaf {
+	background: transparent;
+}
+.v-tree-node-expanded {
+	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
+}
+.v-tree-node-caption {
+	margin-left: 1em;
+}
+.v-tree-node span {
+	cursor: pointer;
+}
+.v-tree-node-caption div {
+	white-space: nowrap;
+}
+.v-tree-node-caption span,
+.v-tree-node-caption .v-icon {
+	vertical-align: middle;
+}
+.v-tree-node-selected span {
+	background: #999;
+	color: #fff;
+}
+.v-tree-node-children {
+	padding-left: 1em;
+}
+/* ie6compatnode is hidden from non ie6 browsers, for ie6 
+ * uses weird hack to sink all events properly 
+ */
+.v-tree-node-ie6compatnode {
+	display: none;
+}
+/* IMPORTANT keep the offsetWidth of this element the same as the margin-left of v-tree-node-caption */
+.v-ie6 .v-tree-node-ie6compatnode {
+	display: inline;
+	float: left;
+	background: orange;
+	margin: 0;
+	width: 0.8em;
+	height: 0.8em;
+	padding: 0.1em;
+	filter: alpha(opacity=0);
+}
+.v-ie6 .v-tree-node,
+.v-ie6 .v-tree-node-children {
+	clear: left;
+}
+/***************************************
+ * Drag'n'drop styles
+ ***************************************/
+.v-tree .v-tree-node-drag-top {
+	border-top: 2px solid #1d9dff;
+	margin-top: -1px;
+	padding-top: 0;
+}
+.v-tree .v-tree-node-drag-bottom {
+	border-bottom: 2px solid #1d9dff;
+	margin-bottom: -1px;
+	padding-bottom: 0;
+}
+.v-tree .v-tree-node-drag-top:before,
+.v-tree .v-tree-node-drag-bottom:after,
+.v-tree .v-tree-node-caption-drag-center:after {
+	display: block;
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	margin-top: -4px;
+	background: transparent url(../common/img/drag-slot-dot.png);
+}
+.v-tree .v-tree-node-drag-bottom:after {
+	margin-top: -2px;
+}
+.v-tree .v-tree-node-caption-drag-center:after {
+	margin-left: 14px;
+}
+.v-ff .v-tree .v-tree-node-caption-drag-center:after,
+.v-ie .v-tree .v-tree-node-caption-drag-center:after {
+	margin-top: -2px;
+}
+.v-tree .v-tree-node-drag-top {
+	background-position: 5px -38px;
+}
+.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+	background-position: -5px -11px;
+}
+.v-tree .v-tree-node-caption-drag-center div {
+	border: 2px solid #1d9dff;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	margin: -2px 2px -2px -2px;
+	background-color: #bcdcff;
+}
+.v-ie6 .v-tree .v-tree-node-caption-drag-center div {
+	margin: -2px ;
+}
+.v-tree .v-tree-node-caption-drag-center div {
+	background-color: rgba(169,209,255,.6);
+}
+.v-tree .v-tree-node-caption-drag-center div,
+.v-tree .v-tree-node-drag-top,
+.v-tree .v-tree-node-drag-bottom {
+	border-color: rgba(0,109,232,.6);
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/tree/tree.css b/WebContent/VAADIN/themes/base/tree/tree.css
index 593771a49c..59987731b0 100644
--- a/WebContent/VAADIN/themes/base/tree/tree.css
+++ b/WebContent/VAADIN/themes/base/tree/tree.css
@@ -1,133 +1,2 @@
-.v-tree {
-	text-align: left; /* Force default alignment */
-	overflow: hidden;
-	padding: 1px 0;
-	outline: none;
-}
-.v-tree-node {
-	background: transparent url(../common/img/sprites.png) no-repeat 5px -37px;
-	padding: 1px 0;
-}
-.v-tree-node-caption:focus {
-	outline: none;
-}
-div.v-tree-node-leaf {
-	background: transparent;
-}
-.v-tree-connectors .v-tree-node-leaf,
-.v-tree-connectors .v-tree-node-leaf:hover {
-	background: transparent url(img/connector-item.png) no-repeat 8px 0;
-}
-.v-tree-connectors .v-tree-node-leaf-last,
-.v-tree-connectors .v-tree-node-leaf-last:hover {
-	background: transparent url(img/connector-item-last.png) no-repeat 8px 0;
-}
-.v-tree-node-expanded {
-	background: transparent url(../common/img/sprites.png) no-repeat -5px -10px;
-}
-.v-tree-connectors .v-tree-node-children {
-	background: transparent url(img/connector.png) repeat-y 8px bottom;
-}
-.v-tree-connectors .v-tree-node-children-last {
-	background: transparent;
-}
-.v-tree-node-caption {
-	margin-left: 1em;
-}
-.v-tree-node span {
-	cursor: pointer;
-}
-.v-tree-node-caption div {
-	white-space: nowrap;
-}
-.v-tree-node-caption span,
-.v-tree-node-caption .v-icon {
-	vertical-align: middle;
-}
-.v-tree-node-selected span {
-	background: #999;
-	color: #fff;
-}
-.v-tree-node-children {
-	padding-left: 1em;
-}
-/* ie6compatnode is hidden from non ie6 browsers, for ie6 
- * uses weird hack to sink all events properly 
- */
-.v-tree-node-ie6compatnode {
-	display: none;
-}
-/* IMPORTANT keep the offsetWidth of this element the same as the margin-left of v-tree-node-caption */
-.v-ie6 .v-tree-node-ie6compatnode {
-	display: inline;
-	float: left;
-	background: orange;
-	margin: 0;
-	width: 0.8em;
-	height: 0.8em;
-	padding: 0.1em;
-	filter: alpha(opacity=0);
-}
-.v-ie6 .v-tree-node,
-.v-ie6 .v-tree-node-children {
-	clear: left;
-}
-/***************************************
- * Drag'n'drop styles
- ***************************************/
-.v-tree .v-tree-node-drag-top {
-	border-top: 2px solid #1d9dff;
-	margin-top: -1px;
-	padding-top: 0;
-}
-.v-tree .v-tree-node-drag-bottom {
-	border-bottom: 2px solid #1d9dff;
-	margin-bottom: -1px;
-	padding-bottom: 0;
-}
-.v-tree .v-tree-node-drag-top:before,
-.v-tree .v-tree-node-drag-bottom:after,
-.v-tree .v-tree-node-caption-drag-center:after {
-	display: block;
-	content: "";
-	position: absolute;
-	width: 6px;
-	height: 6px;
-	margin-top: -4px;
-	background: transparent url(../common/img/drag-slot-dot.png);
-}
-.v-tree .v-tree-node-drag-bottom:after {
-	margin-top: -2px;
-}
-.v-tree .v-tree-node-caption-drag-center:after {
-	margin-left: 14px;
-}
-.v-ff .v-tree .v-tree-node-caption-drag-center:after,
-.v-ie .v-tree .v-tree-node-caption-drag-center:after {
-	margin-top: -2px;
-}
-.v-tree .v-tree-node-drag-top {
-	background-position: 5px -38px;
-}
-.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
-	background-position: -5px -11px;
-}
-.v-tree .v-tree-node-caption-drag-center div {
-	border: 2px solid #1d9dff;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	margin: -2px 2px -2px -2px;
-	background-color: #bcdcff;
-}
-.v-ie6 .v-tree .v-tree-node-caption-drag-center div {
-	margin: -2px ;
-}
-.v-tree .v-tree-node-caption-drag-center div {
-	background-color: rgba(169,209,255,.6);
-}
-.v-tree .v-tree-node-caption-drag-center div,
-.v-tree .v-tree-node-drag-top,
-.v-tree .v-tree-node-drag-bottom {
-	border-color: rgba(0,109,232,.6);
-}
\ No newline at end of file
+@import "tree-default.css";
+@import "tree-connectors.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css b/WebContent/VAADIN/themes/chameleon/components/tree/tree.css
index cf1b62ac55..64f59c116a 100644
--- a/WebContent/VAADIN/themes/chameleon/components/tree/tree.css
+++ b/WebContent/VAADIN/themes/chameleon/components/tree/tree.css
@@ -15,4 +15,8 @@
 
 .v-tree-node-selected span {
 	background-color: #333;
+	}
+
+.v-tree-connectors .v-tree-node-caption {
+	padding-bottom: 1px;
 	}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.css b/WebContent/VAADIN/themes/reindeer/tree/tree.css
index 0274d8b18e..63ac914fdf 100644
--- a/WebContent/VAADIN/themes/reindeer/tree/tree.css
+++ b/WebContent/VAADIN/themes/reindeer/tree/tree.css
@@ -11,18 +11,6 @@
 .v-tree-node-expanded {
 	background-position: -7px 5px;
 }
-.v-tree-connectors .v-tree-node-leaf,
-.v-tree-connectors .v-tree-node-leaf:hover {
-	background-position: 8px -1px;
-}
-.v-ie6 .v-tree-connectors div.v-tree-node-leaf,
-.v-ie6 .v-tree-connectors div.v-tree-node-leaf:hover {
-	background: transparent url(../../base/tree/img/connector-item.png) no-repeat 8px -1px;
-}
-.v-ie6 .v-tree-connectors div.v-tree-node-leaf-last,
-.v-ie6 .v-tree-connectors div.v-tree-node-leaf-last:hover {
-	background: transparent url(../../base/tree/img/connector-item-last.png) no-repeat 8px -1px;
-}
 .v-tree-node-caption {
 	margin-left: 16px;
 	padding-bottom: 1px;
@@ -69,4 +57,11 @@
 }
 .v-tree .v-tree-node-drag-top.v-tree-node-expanded {
 	background-position: -7px 4px;
+}
+.v-tree-connectors .v-tree-node-drag-top,
+.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+	background-position: 2px -53px;
+}
+.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+	background-position: 2px 50%;
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/tree/tree.css b/WebContent/VAADIN/themes/runo/tree/tree.css
index bec3b318dd..03c8a0d829 100644
--- a/WebContent/VAADIN/themes/runo/tree/tree.css
+++ b/WebContent/VAADIN/themes/runo/tree/tree.css
@@ -7,6 +7,9 @@
 .v-tree-node-caption {
 	margin-left: 18px;
 }
+.v-tree-connectors .v-tree-node-caption {
+	padding-bottom: 1px;
+}
 .v-tree-node-caption .v-icon {
 	margin: 0 2px 0 -2px;
 }
@@ -53,4 +56,11 @@
 .v-tree .v-tree-node-drag-top,
 .v-tree .v-tree-node-drag-top.v-tree-node-expanded {
 	background-position: 2px 0;
+}
+.v-tree-connectors .v-tree-node-drag-top,
+.v-tree-connectors .v-tree-node-expanded.v-tree-node-drag-top {
+	background-position: 2px -53px;
+}
+.v-tree-connectors .v-tree-node-drag-top.v-tree-node-leaf {
+	background-position: 2px 50%;
 }
\ No newline at end of file