Updated Branches: refs/heads/master dc342eb11 -> 1230be05f
CSS and visual improvements to the Tree component Project: http://git-wip-us.apache.org/repos/asf/tapestry-5/repo Commit: http://git-wip-us.apache.org/repos/asf/tapestry-5/commit/1230be05 Tree: http://git-wip-us.apache.org/repos/asf/tapestry-5/tree/1230be05 Diff: http://git-wip-us.apache.org/repos/asf/tapestry-5/diff/1230be05 Branch: refs/heads/master Commit: 1230be05ffa691a3876210428cb3390d10be8d0c Parents: dc342eb Author: Howard M. Lewis Ship <[email protected]> Authored: Tue Jun 18 17:54:45 2013 -0700 Committer: Howard M. Lewis Ship <[email protected]> Committed: Tue Jun 18 17:54:45 2013 -0700 ---------------------------------------------------------------------- .../META-INF/modules/t5/core/tree.coffee | 16 +-- .../tapestry5/corelib/components/Tree.java | 26 ++--- .../META-INF/assets/tapestry5/tree-sprites.png | Bin 1109 -> 2565 bytes .../META-INF/assets/tapestry5/tree.css | 98 +++++++++---------- .../tapestry5/integration/app1/TreeTests.groovy | 27 ++--- 5 files changed, 79 insertions(+), 88 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/1230be05/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/tree.coffee ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/tree.coffee b/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/tree.coffee index b2df37b..e8ef4f4 100644 --- a/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/tree.coffee +++ b/tapestry-core/src/main/coffeescript/META-INF/modules/t5/core/tree.coffee @@ -23,8 +23,8 @@ define ["./dom", "./ajax", "./zone"], LOADING = "tree-children-loading" LOADED = "tree-children-loaded" - EXPANDED = "t-tree-expanded" - SELECTED = "t-selected-leaf-node" + EXPANDED = "tree-expanded" + SELECTED = "selected-leaf-node" send = (node, action, success) -> container = node.findParent TREE @@ -43,15 +43,15 @@ define ["./dom", "./ajax", "./zone"], node.meta LOADING, true - node.addClass "t-empty-node" - node.update "<span class='t-tree-ajax-wait'/>" + node.addClass "empty-node" + node.update "<span class='tree-ajax-wait'/>" send node, "expand", (response) -> # Remove the Ajax spinner and mark the node as expanded (it will have a "-" # icon instead of a "+" icon) - node.update("").addClass(EXPANDED).removeClass("t-empty-node") + node.update("").addClass(EXPANDED).removeClass("empty-node") - label = node.findParent("li").findFirst(".t-tree-label") + label = node.findParent("li").findFirst(".tree-label") label.insertAfter response.json.content @@ -81,7 +81,7 @@ define ["./dom", "./ajax", "./zone"], loadChildren this return false - unless @hasClass "t-leaf-node" + unless @hasClass "leaf-node" toggle this return false @@ -105,7 +105,7 @@ define ["./dom", "./ajax", "./zone"], dom.onDocument "click", SELECTOR, clickHandler dom.onDocument "click", - "#{TREE}[data-tree-node-selection-enabled] LI.t-leaf-node > .t-tree-label", + "#{TREE}[data-tree-node-selection-enabled] LI.leaf-node > .tree-label", toggleSelection http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/1230be05/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Tree.java ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Tree.java b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Tree.java index 6c5b360..97de13f 100644 --- a/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Tree.java +++ b/tapestry-core/src/main/java/org/apache/tapestry5/corelib/components/Tree.java @@ -1,4 +1,4 @@ -// Copyright 2011, 2012 The Apache Software Foundation +// Copyright 2011-2013 The Apache Software Foundation // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -59,7 +59,7 @@ public class Tree /** * Allows the container to specify additional CSS class names for the outer DIV element. The outer DIV - * always has the class name "t-tree-container"; the additional class names are typically used to apply + * always has the class name "tree-container"; the additional class names are typically used to apply * a specific size and width to the component. */ @Parameter(name = "class", defaultPrefix = BindingConstants.LITERAL) @@ -86,7 +86,7 @@ public class Tree * Used to control the Tree's selections. When this parameter is bound, then the client-side Tree * will track what is selected or not selected, and communicate this (via Ajax requests) up to * the server, where it will be recorded into the model. On the client-side, the Tree component will - * add or remove the {@code t-selected-leaf-node-label} CSS class from {@code span.t-tree-label} + * add or remove the {@code selected-leaf-node-label} CSS class from {@code span.tree-label} * for the node. */ @Parameter @@ -129,7 +129,7 @@ public class Tree { public void render(MarkupWriter writer, RenderQueue queue) { - writer.element("span", "class", "t-tree-label"); + writer.element("span", "class", "tree-label"); } }; @@ -137,7 +137,7 @@ public class Tree { public void render(MarkupWriter writer, RenderQueue queue) { - writer.getElement().attribute("class", "t-selected-leaf-node"); + writer.getElement().attribute("class", "selected-leaf-node"); } }; @@ -149,7 +149,7 @@ public class Tree * @param node * to render * @param isLast - * if true, add "t-last" attribute to the LI element + * if true, add "last" attribute to the LI element * @return command to render the node */ private RenderCommand toRenderCommand(final TreeNode node, final boolean isLast) @@ -170,19 +170,19 @@ public class Tree if (isLast) { - writer.attributes("class", "t-last"); + writer.attributes("class", "last"); } if (isLeaf) { - writer.getElement().attribute("class", "t-leaf-node"); + writer.getElement().attribute("class", "leaf-node"); } - Element e = writer.element("span", "class", "t-tree-icon"); + Element e = writer.element("span", "class", "tree-icon"); if (!isLeaf && !node.getHasChildren()) { - e.addClassName("t-empty-node"); + e.addClassName("empty-node"); } boolean hasChildren = !isLeaf && node.getHasChildren(); @@ -193,10 +193,10 @@ public class Tree if (expanded) { // Inform the client side, so it doesn't try to fetch it a second time. - e.addClassName("t-tree-expanded"); + e.addClassName("tree-expanded"); } - writer.end(); // span.t-tree-icon + writer.end(); // span.tree-icon // From here on in, we're pushing things onto the queue. Remember that // execution order is reversed from order commands are pushed. @@ -256,7 +256,7 @@ public class Tree public String getContainerClass() { - return className == null ? "t-tree-container" : "t-tree-container " + className; + return className == null ? "tree-container" : "tree-container " + className; } public Link getTreeActionLink() http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/1230be05/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree-sprites.png ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree-sprites.png b/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree-sprites.png index e95f4b1..aba82c8 100644 Binary files a/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree-sprites.png and b/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree-sprites.png differ http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/1230be05/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree.css ---------------------------------------------------------------------- diff --git a/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree.css b/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree.css index 28afd45..bfe38c2 100644 --- a/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree.css +++ b/tapestry-core/src/main/resources/META-INF/assets/tapestry5/tree.css @@ -1,83 +1,83 @@ - -DIV.t-tree-container -{ - padding: 0; - margin: 0; +DIV.tree-container { + padding: 0; + margin: 0; } -DIV.t-tree-container UL -{ - list-style-type: none; - background-image: url(tree-vpipe.png); - background-repeat: repeat-y; - margin: 0 0 0 12px; - padding: 0; +DIV.tree-container UL { + list-style-type: none; + background-image: url(tree-vpipe.png); + background-repeat: repeat-y; + margin: 0 0 0 12px; + padding: 0; } -DIV.t-tree-container UL UL -{ - /* Line up the nested list's vertical bar under the element's folder icon. */ - margin: 0 0 0 24px; +DIV.tree-container UL UL { + /* Line up the nested list's vertical bar under the element's folder icon. */ + margin: 0 0 0 24px; } - -DIV.t-tree-container LI { - margin: 0; - padding: 0 0 0 16px; - background-image: url(tree-branch.png); - background-repeat: no-repeat; - line-height: 1.5; +DIV.tree-container LI { + margin: 0; + padding: 0 0 0 16px; + background-image: url(tree-branch.png); + background-repeat: no-repeat; + line-height: 1.5; } /* The last one needs a special tweak to keep the vertical bar from extending down too far. */ -DIV.t-tree-container LI.t-last -{ +DIV.tree-container LI.last { background-color: white; - background-image: url(tree-branchend.png); + background-image: url(tree-branchend.png); } /* Assume its a collapsed, but expandable, tree node. Later CSS rules overwrite this. */ -SPAN.t-tree-icon { - display: inline-block; - width: 32px; - height: 16px; - cursor: pointer; - background-image: url(tree-sprites.png); - background-position: 0px 0px; +SPAN.tree-icon { + display: inline-block; + width: 32px; + height: 16px; + cursor: pointer; + background-image: url(tree-sprites.png); + background-position: 0px 0px; } /* Fiddle with it so that leaf nodes do not appear clickable. The label is clickable, the document icon is not. */ -LI.t-leaf-node > SPAN.t-tree-icon { - cursor: default; - background-position: -32px -16px; +LI.leaf-node > SPAN.tree-icon { + cursor: default; + background-position: -32px -16px; } /* When the Tree is configured for selection, then it is the label, only on leaf nodes, that is clickable. */ -DIV[data-tree-node-selection-enabled] LI.t-leaf-node > .t-tree-label { +DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label { cursor: pointer; + padding-left: 16px; + background: url(tree-sprites.png) no-repeat; +} + +DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label { + background-position: -64px 0px; } /* Marking selection leaf nodes in bold if selected will hopefully change soon. We may even be smart enough to render a checkbox. */ -SPAN.t-tree-label.t-selected-leaf-node { - font-weight: bold; +DIV[data-tree-node-selection-enabled] LI.leaf-node > .tree-label.selected-leaf-node { + background-position: -64px -16px; } -SPAN.t-tree-icon.t-empty-node { - cursor: default; - background-position: -32px 0px !important; +SPAN.tree-icon-empty-node { + cursor: default; + background-position: -64px 0px !important; } -SPAN.t-tree-expanded { - background-position: 0px -16px; +SPAN.tree-expanded { + background-position: 0px -16px; } -SPAN.t-tree-ajax-wait { - width: 16px; - height: 16px; - display: inline-block; - background-image: url(ajax-loader.gif); +SPAN.tree-ajax-wait { + width: 16px; + height: 16px; + display: inline-block; + background-image: url(ajax-loader.gif); } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/tapestry-5/blob/1230be05/tapestry-core/src/test/groovy/org/apache/tapestry5/integration/app1/TreeTests.groovy ---------------------------------------------------------------------- diff --git a/tapestry-core/src/test/groovy/org/apache/tapestry5/integration/app1/TreeTests.groovy b/tapestry-core/src/test/groovy/org/apache/tapestry5/integration/app1/TreeTests.groovy index e252d86..3f16074 100644 --- a/tapestry-core/src/test/groovy/org/apache/tapestry5/integration/app1/TreeTests.groovy +++ b/tapestry-core/src/test/groovy/org/apache/tapestry5/integration/app1/TreeTests.groovy @@ -22,16 +22,12 @@ class TreeTests extends TapestryCoreTestCase @Test void basics() { - openBaseURL() - - clickAndWait "link=Tree Component Demo" - - clickAndWait "link=Clear Expansions" + openLinks "Tree Component Demo", "Clear Expansions" waitForPageInitialized() //Click on Games - click "//div[@class='t-tree-container test-hook']/ul/li[2]/span[@class='t-tree-icon']" + click "//div[@class='tree-container test-hook']/ul/li[2]/span[@class='tree-icon']" sleep 25 // See if that helps with the intermittent test suite failures on the CI server @@ -40,7 +36,7 @@ class TreeTests extends TapestryCoreTestCase assertTextPresent "Board Games" //Click on Board Games - click "//div[@class='t-tree-container test-hook']/ul/li[2]/ul/li/span[@class='t-tree-icon']" + click "//div[@class='tree-container test-hook']/ul/li[2]/ul/li/span[@class='tree-icon']" //Assert the leafs are displayed waitForAjaxRequestsToComplete PAGE_LOAD_TIMEOUT @@ -53,31 +49,26 @@ class TreeTests extends TapestryCoreTestCase @Test void select_node() { - - openBaseURL() - - clickAndWait "link=Tree Component Selection Demo" - - clickAndWait "link=Clear All" + openLinks "Tree Component Selection Demo", "Clear All" waitForPageInitialized() - click "//span[@class='t-tree-icon']" + click "//span[@class='tree-icon']" - waitForCSSSelectedElementToAppear "li.t-leaf-node > span" + waitForCSSSelectedElementToAppear "li.leaf-node > span" assertTextPresent "Oscar", "Gromit", "Max", "Roger", "Cooper" // Click the first selectable node, probably Oscar - click "css=[data-tree-node-selection-enabled] li.t-leaf-node > span.t-tree-label" + click "css=[data-tree-node-selection-enabled] li.leaf-node > span.tree-label" - waitForCSSSelectedElementToAppear "span.t-selected-leaf-node" + waitForCSSSelectedElementToAppear "span.selected-leaf-node" clickAndWait "link=Redraw" // Make sure it is still there after a redraw - waitForCSSSelectedElementToAppear "span.t-selected-leaf-node" + waitForCSSSelectedElementToAppear "span.selected-leaf-node" } }
