From c96076ef8bb2d9d9f27f0b44cb1743af0babab24 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 23 Aug 2011 13:02:17 +0000 Subject: [PATCH] Barebones fix for #6745: Connectors for Tree, i.e. ugly but works. We can make it more pretty in future releases if necessary. Includes TestBench test for the feature. svn changeset:20577/svn branch:6.7 --- .../base/tree/img/connector-item-last.png | Bin 0 -> 148 bytes .../themes/base/tree/img/connector-item.png | Bin 0 -> 153 bytes .../VAADIN/themes/base/tree/img/connector.png | Bin 0 -> 143 bytes WebContent/VAADIN/themes/base/tree/tree.css | 18 +++- .../VAADIN/themes/reindeer/tree/tree.css | 9 ++ .../tree/img/connectors/collapsed-last.png | Bin 0 -> 218 bytes .../runo/tree/img/connectors/collapsed.png | Bin 0 -> 242 bytes .../tree/img/connectors/connector-item.png | Bin 0 -> 163 bytes .../runo/tree/img/connectors/connector.png | Bin 0 -> 907 bytes .../tree/img/connectors/expanded-last.png | Bin 0 -> 226 bytes .../runo/tree/img/connectors/expanded.png | Bin 0 -> 262 bytes .../vaadin/terminal/gwt/client/ui/VTree.java | 8 +- src/com/vaadin/ui/themes/BaseTheme.java | 6 ++ .../tests/components/tree/TreeConnectors.html | 67 ++++++++++++++ .../tests/components/tree/TreeConnectors.java | 85 ++++++++++++++++++ 15 files changed, 187 insertions(+), 6 deletions(-) create mode 100644 WebContent/VAADIN/themes/base/tree/img/connector-item-last.png create mode 100644 WebContent/VAADIN/themes/base/tree/img/connector-item.png create mode 100644 WebContent/VAADIN/themes/base/tree/img/connector.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed-last.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/connector-item.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/connector.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/expanded-last.png create mode 100644 WebContent/VAADIN/themes/runo/tree/img/connectors/expanded.png create mode 100644 tests/src/com/vaadin/tests/components/tree/TreeConnectors.html create mode 100644 tests/src/com/vaadin/tests/components/tree/TreeConnectors.java diff --git a/WebContent/VAADIN/themes/base/tree/img/connector-item-last.png b/WebContent/VAADIN/themes/base/tree/img/connector-item-last.png new file mode 100644 index 0000000000000000000000000000000000000000..2eb04a32fd6dc522fdbe46193545ba54d076890a GIT binary patch literal 148 zcmeAS@N?(olHy`uVBq!ia0vp^96-#?!3-ozU2VjHlw^r(L`iUdT1k0gQ7VIDN`6wR zf@f}GdTLN=VoGJ<$y6JlBDMgZ5Z8i&g8%>j+lXEA2Z}J21o;L3XL!2ZzzfI|^K@|x qskoJtkkG;)arT6Rtsn;rhXI3tEJFaJ+RbF33IDSr z1<%~X^wgl##FWaylc_d9MQi~+A+7}l1^@s5w-LMK4-{c43Gxg6&+v4+fftY`?djqe wQgJIOA)$pq;_L|rTS18>`%bdBGBEKlc>QJAq!XRK46>FVdQ&MBb@0LNo1oB#j- literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/base/tree/img/connector.png b/WebContent/VAADIN/themes/base/tree/img/connector.png new file mode 100644 index 0000000000000000000000000000000000000000..2844bba7313b13bf310066d1008d99eaf82e248e GIT binary patch literal 143 zcmeAS@N?(olHy`uVBq!ia0vp^j6lr7!3-oT*p_ktDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9MQi~+A+7}l1^@s5w-LMK4-{c43Gxg6&+v4+fftY`=;`7Z kQgJIOAt51!A*q1@Xg(hUGkfx>%Ros6Pgg&ebxsLQ0Ld06g8%>k literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/base/tree/tree.css b/WebContent/VAADIN/themes/base/tree/tree.css index 9e056dc4d6..593771a49c 100644 --- a/WebContent/VAADIN/themes/base/tree/tree.css +++ b/WebContent/VAADIN/themes/base/tree/tree.css @@ -11,10 +11,24 @@ .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-position: -5px -10px; + background: transparent url(../common/img/sprites.png) no-repeat -5px -10px; } -div.v-tree-node-leaf { +.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 { diff --git a/WebContent/VAADIN/themes/reindeer/tree/tree.css b/WebContent/VAADIN/themes/reindeer/tree/tree.css index 3f77bd991d..d33985f713 100644 --- a/WebContent/VAADIN/themes/reindeer/tree/tree.css +++ b/WebContent/VAADIN/themes/reindeer/tree/tree.css @@ -11,6 +11,15 @@ .v-tree-node-expanded { background-position: -7px 5px; } +.v-tree-connectors .v-tree-node-leaf { + background-position: 8px -1px; +} +.v-ie6 .v-tree-connectors div.v-tree-node-leaf { + background: transparent url(../../base/tree/img/connector-item.png) no-repeat 8px -1px; +} +.v-ie6 .v-tree-connectors div.v-tree-node-leaf-last { + background: transparent url(../../base/tree/img/connector-item-last.png) no-repeat 8px -1px; +} .v-tree-node-caption { margin-left: 16px; padding-bottom: 1px; diff --git a/WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed-last.png b/WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed-last.png new file mode 100644 index 0000000000000000000000000000000000000000..28b3626d791620def354983172cf6dbd667843ea GIT binary patch literal 218 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!WQl7;NpOBzNqJ&XDuZK6ep0G} zXKrG8YEWuoN@d~6R2!fol>na**TW}I-@1Em&fNKzu3SBG?8M?F%a$%%v18Zn$IqT` z-??l0%vt~c|CgO={}ia6rzFTP7|4YI2BG`s&H=?uJY5_^DsCk`aAW2%nAJFeVV0O% z38P*a5UYuqFzV@rR|Bbu;hq1?K_ddp@EU1Dw-=_(pdXDP(OpGtDnm{r-UW| D)aX** literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed.png b/WebContent/VAADIN/themes/runo/tree/img/connectors/collapsed.png new file mode 100644 index 0000000000000000000000000000000000000000..db4d41cccd2c2593eb28fa9b8976fcc8676a0436 GIT binary patch literal 242 zcmeAS@N?(olHy`uVBq!ia0vp^0ziC%gBeI(bC@Uyq$EpRBT9nv(@M${i&7aJQ}UBi z6+Ckj(^G>|6H_V+Po~-c6{!UHgt$(hIcv_``M2)gyL9F1kz*&8E?cpE=dK;Qb}wGC z?D4bbhfkjV|NsA_--qOZ>Um0n{DOg87+?^(f9@Pm+{e?!F{I+woAZ`j42l9S7mFmX z|Gs}cWf7C9;U6_#`Cq14w=UZs-@zK)DHmd^k-~jxy3Ur87|p*$-;Tx`Ac1ekgc2C) X=e3_#UjI@AXfA`NtDnm{r-UW|_Du+!3-o>%LJH!lw^r(L`iUdT1k0gQ7VIDN`6wR zf@f}GdTLN=VoGJ<$y6JlBDMgZ5ZA*ePyhe_zx<6r7Epw#B*-uLKf}}Q23|m(s;7%% zNX4zBgoFeZMmCAFCpx@@mHCep%#!)LW!mxQc3hba49pA@_b_}E+g{WM)WG2B>gTe~ HDWM4f;1Mz) literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/runo/tree/img/connectors/connector.png b/WebContent/VAADIN/themes/runo/tree/img/connectors/connector.png new file mode 100644 index 0000000000000000000000000000000000000000..a93f458787bb485cbda6b487943d89d16690933e GIT binary patch literal 907 zcmXxjNl%(V0Eh86+BC+-CQVOmlg5u=@4eVSTAGF!5Tu^Yq6_G_;P*6}nK}8g|T1)@F6QBHMCX+eNOnCwOVNUk#Y>J|CSdSPStQi2&%-g%Cde7Qv@VF?_C)KzVfy@kJh!rZ3G+wA_Y5}RT6=cnAM6F5j?A>jS}Wz8w`w$!QkjPSZou7b!-xb#;0I-;=;(}G>lH!3ET7x zjM*J9J~Imw4kv;8f@!B4>@E+?xaYv(@e;Fh^WdbpybIu-Uj)y>5;3>v1Mku@EcjMn zaoJBStpvd5Uxnqs8mz1a!M_$F0>KchhSp(ieFK6UVImZczLYV9(9$Q UapTo>!#R#A7L(1;J}7$kA6zYYWdHyG literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/runo/tree/img/connectors/expanded-last.png b/WebContent/VAADIN/themes/runo/tree/img/connectors/expanded-last.png new file mode 100644 index 0000000000000000000000000000000000000000..504b7151224d49b9704d4cea19cbe66870024ac2 GIT binary patch literal 226 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!WQl7;NpOBzNqJ&XDuZK6ep0G} zXKrG8YEWuoN@d~6R2!fol>na**TW}I-@1Em&fNKzu3SBG?8M?F%a$%%v18Zn$IqT` z-??l0%vt~c|CgO={}ia6rzFTP7|4YI2BG`s&H=@3JY5_^DsCk`aAW2%nAJFep-qg5 zsV64kKu5qq&PSV-Gan{AdX(g3*xcIP&3ZK;%*-Tu#!Sr;2_ps$1BQBQuKXab=6^tQ O7(8A5T-G@yGywpMI9k>K literal 0 HcmV?d00001 diff --git a/WebContent/VAADIN/themes/runo/tree/img/connectors/expanded.png b/WebContent/VAADIN/themes/runo/tree/img/connectors/expanded.png new file mode 100644 index 0000000000000000000000000000000000000000..5c036ed0381a8b7b5a9ef2108b8aa6b6cd4ed067 GIT binary patch literal 262 zcmeAS@N?(olHy`uVBq!ia0vp^0t^g{IvmVE*55~m4S|$oiEBhjaDG}zd16s2gJVj5 zQmTSyZen_BP-v)g2G(HlQTD4Ho=K+IN`@(9yqgNz&neK}XS62h=V(@hJb6Mw<&;$SgeQu`! literal 0 HcmV?d00001 diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTree.java b/src/com/vaadin/terminal/gwt/client/ui/VTree.java index a1647c2c52..d7f575d675 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VTree.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VTree.java @@ -287,7 +287,8 @@ public class VTree extends FocusElementPanel implements Paintable, childTree.childNodeContainer.addStyleDependentName("root"); } if (childTree != null) { - childTree.addStyleDependentName("last"); + boolean leaf = !uidl.getTag().equals("node"); + childTree.addStyleDependentName(leaf ? "leaf-last" : "last"); childTree.childNodeContainer.addStyleDependentName("last"); } final String selectMode = uidl.getStringAttribute("selectmode"); @@ -1090,9 +1091,8 @@ public class VTree extends FocusElementPanel implements Paintable, childNodeContainer.add(childTree); } if (!i.hasNext()) { - childTree - .addStyleDependentName(childTree.isLeaf() ? "leaf-last" - : "last"); + childTree.addStyleDependentName(childTree.isLeaf() + ? "leaf-last" : "last"); childTree.childNodeContainer.addStyleDependentName("last"); } } diff --git a/src/com/vaadin/ui/themes/BaseTheme.java b/src/com/vaadin/ui/themes/BaseTheme.java index c8ba08d30d..b501f8a05c 100644 --- a/src/com/vaadin/ui/themes/BaseTheme.java +++ b/src/com/vaadin/ui/themes/BaseTheme.java @@ -44,4 +44,10 @@ public class BaseTheme { @Deprecated public static final String PANEL_LIGHT = "light"; + /** + * Adds the connector lines between a parent node and its child nodes to + * indicate the tree hierarchy better. + */ + public static final String TREE_CONNECTORS = "connectors"; + } \ No newline at end of file diff --git a/tests/src/com/vaadin/tests/components/tree/TreeConnectors.html b/tests/src/com/vaadin/tests/components/tree/TreeConnectors.html new file mode 100644 index 0000000000..b76c65fa69 --- /dev/null +++ b/tests/src/com/vaadin/tests/components/tree/TreeConnectors.html @@ -0,0 +1,67 @@ + + + + + + +TreeConnectors + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TreeConnectors
open/run/TreeConnectors?theme=base
screenCapturebase
open/run/TreeConnectors?theme=reindeer
screenCapturereindeer
open/run/TreeConnectors?theme=runo
screenCaptureruno
open/run/TreeConnectors?theme=liferay
screenCaptureliferay
open/run/TreeConnectors?theme=chameleon
screenCapturechameleon
+ + diff --git a/tests/src/com/vaadin/tests/components/tree/TreeConnectors.java b/tests/src/com/vaadin/tests/components/tree/TreeConnectors.java new file mode 100644 index 0000000000..08d4df0003 --- /dev/null +++ b/tests/src/com/vaadin/tests/components/tree/TreeConnectors.java @@ -0,0 +1,85 @@ +package com.vaadin.tests.components.tree; + +import com.vaadin.data.Item; +import com.vaadin.data.util.HierarchicalContainer; +import com.vaadin.tests.components.TestBase; +import com.vaadin.ui.Tree; +import com.vaadin.ui.themes.BaseTheme; + +@SuppressWarnings("serial") +public class TreeConnectors extends TestBase { + + @Override + protected void setup() { + final Tree tree = new Tree(null, createContainer()); + tree.addStyleName(BaseTheme.TREE_CONNECTORS); + for (Object rootItems : tree.rootItemIds()) { + tree.expandItemsRecursively(rootItems); + } + tree.setChildrenAllowed("Item 73", false); + + addComponent(tree); + } + + @Override + protected String getDescription() { + return "Tree nodes should be connected with lines indicating the hierarchy."; + } + + @Override + protected Integer getTicketNumber() { + return 6745; + } + + private HierarchicalContainer createContainer() { + HierarchicalContainer cont = new HierarchicalContainer(); + cont.addContainerProperty("name", String.class, ""); + + for (int i = 0; i < 20; i++) { + Item item = cont.addItem("Item " + i); + item.getItemProperty("name").setValue("Item " + i); + cont.setChildrenAllowed("Item " + i, false); + + if (i == 1 || i == 4) { + cont.setChildrenAllowed("Item " + i, true); + } + + // Add three items to item 1 + if (i > 1 && i < 4) { + cont.setParent("Item " + i, "Item 1"); + } + + // Add 5 items to item 4 + if (i > 4 && i < 10) { + cont.setChildrenAllowed("Item " + i, true); + + if (i == 7) { + item = cont.addItem("Item 71"); + item.getItemProperty("name").setValue("Item 71"); + cont.setParent("Item 71", "Item " + i); + cont.setChildrenAllowed("Item 71", false); + + item = cont.addItem("Item 72"); + item.getItemProperty("name").setValue("Item 72"); + cont.setParent("Item 72", "Item " + i); + cont.setChildrenAllowed("Item 72", true); + + item = cont.addItem("Item 73"); + item.getItemProperty("name").setValue("Item 73"); + cont.setParent("Item 73", "Item 72"); + cont.setChildrenAllowed("Item 73", true); + + item = cont.addItem("Item 74"); + item.getItemProperty("name").setValue("Item 74"); + cont.setParent("Item 74", "Item " + i); + cont.setChildrenAllowed("Item 74", true); + } + + cont.setParent("Item " + i, "Item " + (i - 1)); + + } + } + + return cont; + } +} -- 2.39.5