From: Jouni Koivuviita Date: Tue, 9 Oct 2007 12:59:20 +0000 (+0000) Subject: -Style name convetion changes to IPanel (no longer multiple classname like ".i-panel... X-Git-Tag: 6.7.0.beta1~5879 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=c28458996bf4a327f1284a7df69c296ad51a3585;p=vaadin-framework.git -Style name convetion changes to IPanel (no longer multiple classname like ".i-panel .i-panel-light", just ".i-panel-light" and ".i-panel-light-caption"). -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 03aa883d91..81e6e922f3 100644 --- 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, "Prev"); + DOM.sinkEvents(DOM.getChild(up, 0), Event.ONCLICK); + DOM.setInnerHTML(down, "Next"); + 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 7bce859119..a836d4a95f 100644 --- 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 5f7da590f3..6a3ef49823 100644 --- 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 index 0000000000..e404a7caea --- /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; + +import com.google.gwt.user.client.ui.AbstractImagePrototype; + +public interface TreeImages extends com.google.gwt.user.client.ui.TreeImages { + + /** + * An image indicating an open branch. + * + * @return a prototype of this image + * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/tree/img/expanded.png + */ + AbstractImagePrototype treeOpen(); + + /** + * An image indicating a closed branch. + * + * @return a prototype of this image + * @gwt.resource com/itmill/toolkit/terminal/gwt/public/default/tree/img/collapsed.png + */ + AbstractImagePrototype treeClosed(); + +} 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 9b91f64438..639f734d2a 100644 --- 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, .i-panel-caption, .i-panel-content, -.i-panel-deco { +.i-panel-deco, +.i-panel-light, +.i-panel-light-caption, +.i-panel-light-content, +.i-panel-light-deco { outline: none; /* Prevent selection outline which might break layouts or cause scrollbars */ } @@ -13,7 +17,8 @@ margin-left: 9px; } -.i-panel-caption { +.i-panel-caption, +.i-panel-light-caption { font-size: 18px; line-height: 18px; font-weight: normal; @@ -77,55 +82,35 @@ /* Light panel style */ -.i-panel-light:before { - display: none; -} - -.i-panel-light .i-panel-caption { +.i-panel-light-caption { border-left: none; border-right: none; background: transparent; + padding-top: 14px; } -.i-panel-light .i-panel-caption:before, -.i-panel-light .i-panel-nocaption:before { - display: none; -} - -.i-panel-light .i-panel-content { +.i-panel-light-content { border: none; background: transparent; } -.i-panel-light .i-panel-deco { - /*display: none;*/ +.i-panel-light-deco { height: 0; overflow: hidden; } -.i-panel-light .i-panel-deco:before { - display: none; -} - /* Light panel contained within another panel or a tabsheet */ /* Use more precise selector to override IE specific rules automatically */ -.i-panel .i-panel-light .i-panel-caption, -.i-tabsheet .i-panel-light .i-panel-caption { - border-left: none; - border-right: none; - /*margin: -16px -18px 0 -18px;*/ +.i-panel .i-panel-light-caption, +.i-tabsheet .i-panel-light-caption { margin-top: -1px; padding-top: 14px; border-top: 1px solid #babfc0; } -.i-panel .i-panel-light .i-panel-content, -.i-tabsheet .i-panel-light .i-panel-content { - /*margin: 0 -18px 16px -18px;*/ -} @@ -146,11 +131,11 @@ * html .i-panel-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; + /*padding: 15px 18px;*/ } *+html .i-panel-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; + /*padding: 15px 18px;*/ } * html .i-panel-deco { 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 04f1207343..6a3fe14392 100644 --- 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 index 0000000000..8d4064de0a 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 index 0000000000..4ac2554eac 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 60a220c67d..befd6e4cf2 100644 --- 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 { - cursor: pointer; + +.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 7787d5c2bc..f792ad1d7c 100644 --- 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 1edbc0b83f..de23643681 100644 --- 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; public TestForBasicApplicationLayout() { - OrderedLayout main = new OrderedLayout(); - setCompositionRoot(main); click = new Button("Set height -1", new ClickListener() { @@ -44,12 +42,10 @@ public class TestForBasicApplicationLayout extends CustomComponent { }); SplitPanel sp = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL); - sp.setSplitPosition(290, Sizeable.UNITS_PIXELS); // Width of left - // side area + sp.setSplitPosition(290, Sizeable.UNITS_PIXELS); SplitPanel sp2 = new SplitPanel(SplitPanel.ORIENTATION_VERTICAL); - sp2.setSplitPosition(255, Sizeable.UNITS_PIXELS); // Height of - // right-top area + sp2.setSplitPosition(255, Sizeable.UNITS_PIXELS); Panel p = new Panel("Accordion Panel"); p.setHeight(100); @@ -102,7 +98,7 @@ public class TestForBasicApplicationLayout extends CustomComponent { sp.setFirstComponent(p); sp.setSecondComponent(tab); - main.addComponent(sp); + setCompositionRoot(sp); } }