You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by hl...@apache.org on 2013/06/19 02:54:49 UTC
git commit: CSS and visual improvements to the Tree component
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 <hl...@apache.org>
Authored: Tue Jun 18 17:54:45 2013 -0700
Committer: Howard M. Lewis Ship <hl...@apache.org>
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"
}
}