-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
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);
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);
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() {
// 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
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;
private boolean immediate;
public ITree() {
- super();
+ super((TreeImages)GWT.create(com.itmill.toolkit.terminal.gwt.client.ui.TreeImages.class));
setStyleName(CLASSNAME);
}
--- /dev/null
+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
.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
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
\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
\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
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;
}
-.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
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);
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
});\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
sp.setFirstComponent(p);\r
sp.setSecondComponent(tab);\r
\r
- main.addComponent(sp);\r
+ setCompositionRoot(sp);\r
}\r
\r
}\r