-Style name convetion changes to IPanel (no longer multiple classname like ".i-panel...

-FilterSelect prev and next button structure changed (now has one extra SPAN element for styling).
-Initial tree styling done.

svn changeset:2472/svn branch:trunk

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java
index 03aa883d917b49cb25ba5bf7e3fc6d5004a78fb9..81e6e922f3bb16c32e99cf41cc279ea4737ac087 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java
@@ -96,10 +96,10 @@ public class IFilterSelect extends Composite implements Paintable,
 
                        Element root = getElement();
 
-                       DOM.setInnerText(up, "prev");
-                       DOM.sinkEvents(up, Event.ONCLICK);
-                       DOM.setInnerText(down, "next");
-                       DOM.sinkEvents(down, Event.ONCLICK);
+                       DOM.setInnerHTML(up, "<span>Prev</span>");
+                       DOM.sinkEvents(DOM.getChild(up, 0), Event.ONCLICK);
+                       DOM.setInnerHTML(down, "<span>Next</span>");
+                       DOM.sinkEvents(DOM.getChild(down, 0), Event.ONCLICK);
                        DOM.insertChild(root, up, 0);
                        DOM.appendChild(root, down);
                        DOM.appendChild(root, status);
@@ -173,9 +173,9 @@ public class IFilterSelect extends Composite implements Paintable,
 
                public void onBrowserEvent(Event event) {
                        Element target = DOM.eventGetTarget(event);
-                       if (DOM.compare(target, up)) {
+                       if (DOM.compare(target, up) || DOM.compare(target, DOM.getChild(up, 0))) {
                                filterOptions(currentPage - 1, lastFilter);
-                       } else if (DOM.compare(target, down)) {
+                       } else if (DOM.compare(target, down) || DOM.compare(target, DOM.getChild(down, 0))) {
                                filterOptions(currentPage + 1, lastFilter);
                        }
                        tb.setFocus(true);

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java
index 7bce859119bed8d18525b2c6fb4ae683714581c9..a836d4a95fce3fe3de5335d1f8d21f257a9c6817 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java
@@ -29,19 +29,9 @@ public class IPanel extends SimplePanel implements Paintable,
 
        public IPanel() {
                super();
-               setStyleName(CLASSNAME);
-
                DOM.appendChild(getElement(), captionNode);
-               DOM
-                               .setElementProperty(captionNode, "className", CLASSNAME
-                                               + "-caption");
                DOM.appendChild(getElement(), contentNode);
-               DOM
-                               .setElementProperty(contentNode, "className", CLASSNAME
-                                               + "-content");
                DOM.appendChild(getElement(), bottomDecoration);
-               DOM.setElementProperty(bottomDecoration, "className", CLASSNAME
-                               + "-deco");
        }
 
        protected Element getContainerElement() {
@@ -72,23 +62,25 @@ public class IPanel extends SimplePanel implements Paintable,
 
                // Add proper style name for root element
                // TODO refactor to support additional styles set from server-side
+               String className = CLASSNAME;
                if (uidl.hasAttribute("style"))
-                       setStyleName(CLASSNAME + " " + CLASSNAME + "-"
-                                       + uidl.getStringAttribute("style"));
-               else
-                       setStyleName(CLASSNAME);
+                       className += "-" + uidl.getStringAttribute("style");
+               setStyleName(className);
+               DOM.setElementProperty(contentNode, "className", className + "-content");
+               DOM.setElementProperty(bottomDecoration, "className", className
+                               + "-deco");
 
                // Handle caption displaying
                if (uidl.hasAttribute("caption")
                                && !uidl.getStringAttribute("caption").equals("")) {
-                       DOM.setInnerHTML(captionNode, uidl.getStringAttribute("caption"));
-                       DOM.setElementProperty(captionNode, "className", CLASSNAME
+                       DOM.setInnerText(captionNode, uidl.getStringAttribute("caption"));
+                       DOM.setElementProperty(captionNode, "className", className
                                        + "-caption");
                } else {
                        // Theme needs this to work around different styling
-                       DOM.setElementProperty(captionNode, "className", CLASSNAME
+                       DOM.setElementProperty(captionNode, "className", className
                                        + "-nocaption");
-                       DOM.setInnerHTML(captionNode, "");
+                       DOM.setInnerText(captionNode, "");
                }
 
                // Height adjustment

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITree.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITree.java
index 5f7da590f3926566cef0c954579bcc3762fc1713..6a3ef498232d6f7af268ad748f7b6e158f6fb6b7 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITree.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITree.java
@@ -5,11 +5,13 @@ import java.util.HashSet;
 import java.util.Iterator;
 import java.util.Set;
 
+import com.google.gwt.core.client.GWT;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Element;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Tree;
+import com.google.gwt.user.client.ui.TreeImages;
 import com.google.gwt.user.client.ui.TreeItem;
 import com.google.gwt.user.client.ui.TreeListener;
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
@@ -45,7 +47,7 @@ public class ITree extends Tree implements Paintable {
        private boolean immediate;
 
        public ITree() {
-               super();
+               super((TreeImages)GWT.create(com.itmill.toolkit.terminal.gwt.client.ui.TreeImages.class));
                setStyleName(CLASSNAME);
        }
 

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/TreeImages.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/TreeImages.java
new file mode 100644 (file)
index 0000000..e404a7c
--- /dev/null
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/TreeImages.java
@@ -0,0 +1,23 @@
+package com.itmill.toolkit.terminal.gwt.client.ui;\r
+\r
+import com.google.gwt.user.client.ui.AbstractImagePrototype;\r
+\r
+public interface TreeImages extends com.google.gwt.user.client.ui.TreeImages {\r
+\r
+       /**\r
+          * An image indicating an open branch.\r
+          * \r
+          * @return a prototype of this image\r
+          * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/tree/img/expanded.png\r
+          */\r
+         AbstractImagePrototype treeOpen();\r
+\r
+         /**\r
+          * An image indicating a closed branch.\r
+          * \r
+          * @return a prototype of this image\r
+          * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/tree/img/collapsed.png\r
+          */\r
+         AbstractImagePrototype treeClosed();\r
+         \r
+}\r

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css
index 9b91f64438b67755dcdd1546076db08d02bad6c5..639f734d2ad7d3b6933da049cd1100393f0c72cd 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css
@@ -1,7 +1,11 @@
 .i-panel,\r
 .i-panel-caption,\r
 .i-panel-content,\r
-.i-panel-deco {\r
+.i-panel-deco,\r
+.i-panel-light,\r
+.i-panel-light-caption,\r
+.i-panel-light-content,\r
+.i-panel-light-deco {\r
        outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */\r
 }\r
 \r
@@ -13,7 +17,8 @@
        margin-left: 9px;\r
 }\r
 \r
-.i-panel-caption {\r
+.i-panel-caption,\r
+.i-panel-light-caption {\r
        font-size: 18px;\r
        line-height: 18px;\r
        font-weight: normal;\r
@@ -77,55 +82,35 @@
 \r
 /* Light panel style */\r
 \r
-.i-panel-light:before {\r
-       display: none;\r
-}\r
-\r
-.i-panel-light .i-panel-caption {\r
+.i-panel-light-caption {\r
        border-left: none;\r
        border-right: none;\r
        background: transparent;\r
+       padding-top: 14px;\r
 }\r
 \r
-.i-panel-light .i-panel-caption:before,\r
-.i-panel-light .i-panel-nocaption:before {\r
-       display: none;\r
-}\r
-\r
-.i-panel-light .i-panel-content {\r
+.i-panel-light-content {\r
        border: none;\r
        background: transparent;\r
 }\r
 \r
-.i-panel-light .i-panel-deco {\r
-       /*display: none;*/\r
+.i-panel-light-deco {\r
        height: 0;\r
        overflow: hidden;\r
 }\r
 \r
-.i-panel-light .i-panel-deco:before {\r
-       display: none;\r
-}\r
-\r
 \r
 \r
 \r
 /* Light panel contained within another panel or a tabsheet */\r
 /* Use more precise selector to override IE specific rules automatically */\r
 \r
-.i-panel .i-panel-light .i-panel-caption,\r
-.i-tabsheet .i-panel-light .i-panel-caption {\r
-       border-left: none;\r
-       border-right: none;\r
-       /*margin: -16px -18px 0 -18px;*/\r
+.i-panel .i-panel-light-caption,\r
+.i-tabsheet .i-panel-light-caption {\r
        margin-top: -1px;\r
        padding-top: 14px;\r
        border-top: 1px solid #babfc0;\r
 }\r
-.i-panel .i-panel-light .i-panel-content,\r
-.i-tabsheet .i-panel-light .i-panel-content {\r
-       /*margin: 0 -18px 16px -18px;*/\r
-}\r
 \r
 \r
 \r
@@ -146,11 +131,11 @@
 \r
 * html .i-panel-content {\r
        border-bottom: 1px solid #babfc0;\r
-       padding: 15px 18px;\r
+       /*padding: 15px 18px;*/\r
 }\r
 *+html .i-panel-content {\r
        border-bottom: 1px solid #babfc0;\r
-       padding: 15px 18px;\r
+       /*padding: 15px 18px;*/\r
 }\r
 \r
 * html .i-panel-deco {\r

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/select/filterselect.css b/src/com/itmill/toolkit/terminal/gwt/public/default/select/filterselect.css
index 04f1207343474bcaff7f8ed27bbe66f7774c113f..6a3fe14392c75b7496fce70b5010698e72c7a05d 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/default/select/filterselect.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/default/select/filterselect.css
@@ -72,11 +72,6 @@
        margin-top: 2px;
 }
 
-/* For some silly reason IE6 leaks some negative margins to the text input */
-* html .i-panel .i-panel-light .i-panel-content .i-filterselect-input,
-* html .i-tabsheet .i-panel-light .i-panel-content .i-filterselect-input {
-       margin-left: 22px;
-}
 *+html .i-filterselect-input {
        margin-top: 1px;
 }

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/collapsed.png b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/collapsed.png
new file mode 100644 (file)
index 0000000..8d4064d
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/collapsed.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/expanded.png b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/expanded.png
new file mode 100644 (file)
index 0000000..4ac2554
Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/img/expanded.png differ

diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tree/tree.css b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/tree.css
index 60a220c67d79303ce0dcdb567bdc787c971eb566..befd6e4cf2ba04ee6d9b54e3799b0d09b9348ff7 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/public/default/tree/tree.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/default/tree/tree.css
@@ -1,6 +1,27 @@
-.i-tree-node-selected > table > tbody > tr > td > span.gwt-TreeItem {
-       background: #ff0;
+.i-tree .gwt-TreeItem {
+       cursor: pointer;
 }
-span.gwt-TreeItem {\r
-       cursor: pointer;\r
+
+.i-tree-node-selected > table > tbody > tr > td > .gwt-TreeItem {
+       background: #5daee8;
+       color: #fff;
+       display: block;
+       padding: 1px;
+       margin: -1px -1px;
+}
+.i-tree-node-selected > table > tbody > tr > td > .gwt-TreeItem:before {
+       display: block;
+       float: left;
+       content: url(../common/img/blank.gif);
+       width: 1px;
+       background: #5daee8;
+       margin: 0 1px 0 -2px;
+}
+.i-tree-node-selected > table > tbody > tr > td > .gwt-TreeItem:after {
+       display: block;
+       float: right;
+       content: url(../common/img/blank.gif);
+       width: 1px;
+       background: #5daee8;
+       margin: 0 -2px 0 1px;
 }
\ No newline at end of file

diff --git a/src/com/itmill/toolkit/tests/TestBench.java b/src/com/itmill/toolkit/tests/TestBench.java
index 7787d5c2bc380d525b0c0ff9af3629a54c66f7fd..f792ad1d7cd3ec8d056ce3c6cc21a7cdae604440 100644 (file)
--- a/src/com/itmill/toolkit/tests/TestBench.java
+++ b/src/com/itmill/toolkit/tests/TestBench.java
@@ -92,17 +92,19 @@ public class TestBench extends com.itmill.toolkit.Application implements
                        Class testable = (Class) i.next();
                        menu.setItemCaption(testable, testable.getSimpleName());
                }
-               menu.setStyle("menu");
                menu.addListener(this);
                menu.setImmediate(true);
 
                mainLayout.addComponent(menu);
 
+               bodyLayout.setStyle("light");
                bodyLayout.setHeight(100);
                bodyLayout.setHeightUnits(Panel.UNITS_PERCENTAGE);
                bodyLayout.setLayout(new ExpandLayout());
 
                mainLayout.addComponent(bodyLayout);
+               
+               mainLayout.setSplitPosition(30);
 
                mainWindow.setLayout(mainLayout);
 

diff --git a/src/com/itmill/toolkit/tests/TestForBasicApplicationLayout.java b/src/com/itmill/toolkit/tests/TestForBasicApplicationLayout.java
index 1edbc0b83f0f99889c2c0005515419f20aaaa685..de23643681c746009e200340a9c32e4bfc6c7d41 100644 (file)
--- a/src/com/itmill/toolkit/tests/TestForBasicApplicationLayout.java
+++ b/src/com/itmill/toolkit/tests/TestForBasicApplicationLayout.java
@@ -23,8 +23,6 @@ public class TestForBasicApplicationLayout extends CustomComponent {
        private TabSheet tab;\r
 \r
        public TestForBasicApplicationLayout() {\r
-               OrderedLayout main = new OrderedLayout();\r
-               setCompositionRoot(main);\r
 \r
                click = new Button("Set height -1", new ClickListener() {\r
 \r
@@ -44,12 +42,10 @@ public class TestForBasicApplicationLayout extends CustomComponent {
                });\r
 \r
                SplitPanel sp = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);\r
-               sp.setSplitPosition(290, Sizeable.UNITS_PIXELS); // Width of left\r
-                                                                                                                       // side area\r
+               sp.setSplitPosition(290, Sizeable.UNITS_PIXELS);\r
 \r
                SplitPanel sp2 = new SplitPanel(SplitPanel.ORIENTATION_VERTICAL);\r
-               sp2.setSplitPosition(255, Sizeable.UNITS_PIXELS); // Height of\r
-                                                                                                                       // right-top area\r
+               sp2.setSplitPosition(255, Sizeable.UNITS_PIXELS);\r
 \r
                Panel p = new Panel("Accordion Panel");\r
                p.setHeight(100);\r
@@ -102,7 +98,7 @@ public class TestForBasicApplicationLayout extends CustomComponent {
                sp.setFirstComponent(p);\r
                sp.setSecondComponent(tab);\r
 \r
-               main.addComponent(sp);\r
+               setCompositionRoot(sp);\r
        }\r
 \r
 }\r