From: Jouni Koivuviita Date: Mon, 19 Nov 2007 14:33:22 +0000 (+0000) Subject: -Fixed top and bottom margins in IOrderedLayout when adding new components on-the... X-Git-Tag: 6.7.0.beta1~5539 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=d85eed4ae1f52c3ba959f82955e2f6eca1465f76;p=vaadin-framework.git -Fixed top and bottom margins in IOrderedLayout when adding new components on-the-fly. -Panel now has faint lines above and below content area, to show clipping edges. svn changeset:2865/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java index 8ffb34ef0a..0110f517a3 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java @@ -101,6 +101,8 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { DOM.setStyleAttribute(DOM.getFirstChild(margin), "height", ""); } + // Update contained components + ArrayList uidlWidgets = new ArrayList(); for (Iterator it = uidl.getChildIterator(); it.hasNext();) { UIDL uidlForChild = (UIDL) it.next(); @@ -262,7 +264,9 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { */ protected Element createWidgetWrappper() { Element td = DOM.createTD(); - // DOM.setStyleAttribute(td, "overflow", "hidden"); + // We need this overflow:hidden, because it's the default rendering of + // IE (although it can be overridden with overflow:visible). + DOM.setStyleAttribute(td, "overflow", "hidden"); switch (orientationMode) { case ORIENTATION_HORIZONTAL: return td; @@ -346,29 +350,30 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { // Modify layout margins String marginClasses = ""; MarginInfo margins = new MarginInfo(uidl.getIntAttribute("margins")); - + Element topBottomMarginContainer = orientationMode == ORIENTATION_HORIZONTAL ? DOM + .getParent(childContainer) + : childContainer; // Top margin + // remove from current position so we can insert it to proper position + if (topMargin != null) { + DOM.removeChild(topBottomMarginContainer, topMargin); + } + topMargin = null; if (margins.hasTop()) { marginClasses += " " + StyleConstants.LAYOUT_MARGIN_TOP; if (topMargin == null) { // We need to insert a new row in to the table - topMargin = createWidgetWrappper(); - DOM.appendChild(getWidgetContainerFromWrapper(topMargin), DOM - .createDiv()); + topMargin = DOM.createTR(); + DOM.appendChild(topMargin, DOM.createTD()); + DOM.appendChild(DOM.getFirstChild(topMargin), DOM.createDiv()); DOM.setElementProperty(topMargin, "className", CLASSNAME + "-toppad"); if (orientationMode == ORIENTATION_HORIZONTAL) { DOM.setElementAttribute(DOM.getFirstChild(topMargin), "colspan", "" + getPaintables().size()); } - DOM.insertChild(childContainer, topMargin, 0); - } - } else { - if (topMargin != null) { - DOM.removeChild(childContainer, DOM - .getFirstChild(childContainer)); + DOM.insertChild(topBottomMarginContainer, topMargin, 0); } - topMargin = null; } // Right margin @@ -377,27 +382,27 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { } // Bottom margin + // remove from current position so we can insert it to proper position + if (bottomMargin != null) { + DOM.removeChild(topBottomMarginContainer, bottomMargin); + } + bottomMargin = null; if (margins.hasBottom()) { marginClasses += " " + StyleConstants.LAYOUT_MARGIN_BOTTOM; if (bottomMargin == null) { // We need to insert a new row in to the table - bottomMargin = createWidgetWrappper(); - DOM.appendChild(getWidgetContainerFromWrapper(bottomMargin), - DOM.createDiv()); + bottomMargin = DOM.createTR(); + DOM.appendChild(bottomMargin, DOM.createTD()); + DOM.appendChild(DOM.getFirstChild(bottomMargin), DOM + .createDiv()); DOM.setElementProperty(bottomMargin, "className", CLASSNAME + "-bottompad"); if (orientationMode == ORIENTATION_HORIZONTAL) { DOM.setElementAttribute(DOM.getFirstChild(bottomMargin), "colspan", "" + getPaintables().size()); } - DOM.appendChild(childContainer, bottomMargin); - } - } else { - if (bottomMargin != null) { - DOM.removeChild(childContainer, DOM.getChild(childContainer, - DOM.getChildCount(childContainer) - 1)); + DOM.appendChild(topBottomMarginContainer, bottomMargin); } - bottomMargin = null; } // Left margin 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 4e8190684b..d617b8786c 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java @@ -51,12 +51,11 @@ public class IPanel extends SimplePanel implements Paintable, public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { // Ensure correct implementation - if (client.updateComponent(this, uidl, false)) { + if (client.updateComponent(this, uidl, false)) return; - } this.client = client; - id = uidl.getId(); + this.id = uidl.getId(); // Panel size. Height needs to be saved for later use String w = uidl.hasVariable("width") ? uidl.getStringVariable("width") @@ -65,6 +64,16 @@ public class IPanel extends SimplePanel implements Paintable, : null; setWidth(w != null ? w : ""); + // Restore default stylenames + DOM + .setElementProperty(captionNode, "className", CLASSNAME + + "-caption"); + DOM + .setElementProperty(contentNode, "className", CLASSNAME + + "-content"); + DOM.setElementProperty(bottomDecoration, "className", CLASSNAME + + "-deco"); + // Handle caption displaying boolean hasCaption = false; if (uidl.hasAttribute("caption") @@ -77,7 +86,8 @@ public class IPanel extends SimplePanel implements Paintable, + "-nocaption"); } - // Add proper stylenames for all elements + // Add proper stylenames for all elements. This way we can prevent + // unwanted CSS selector inheritance. if (uidl.hasAttribute("style")) { String[] styles = uidl.getStringAttribute("style").split(" "); String captionBaseClass = CLASSNAME diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java index d1d1eb6ee4..2d534433e7 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -42,15 +42,17 @@ public class ITabsheet extends FlowPanel implements Paintable, private final TabListener tl = new TabListener() { public void onTabSelected(SourcesTabEvents sender, final int tabIndex) { - if (client != null && activeTabIndex != tabIndex) { + if (ITabsheet.this.client != null + && ITabsheet.this.activeTabIndex != tabIndex) { addStyleDependentName("loading"); - // run updating variables in deferred command to - // bypass some FF + // run updating variables in deferred command to bypass some FF // optimization issues DeferredCommand.addCommand(new Command() { public void execute() { - client.updateVariable(id, "selected", "" - + tabKeys.get(tabIndex), true); + ITabsheet.this.client.updateVariable(ITabsheet.this.id, + "selected", "" + + ITabsheet.this.tabKeys.get(tabIndex), + true); } }); } @@ -67,27 +69,31 @@ public class ITabsheet extends FlowPanel implements Paintable, public ITabsheet() { setStyleName(CLASSNAME); - tb = new TabBar(); - tp = new ITabsheetPanel(); - deco = DOM.createDiv(); + this.tb = new TabBar(); + this.tp = new ITabsheetPanel(); + this.deco = DOM.createDiv(); - tp.setStyleName(CLASSNAME + "-content"); + this.tp.setStyleName(CLASSNAME + "-content"); addStyleDependentName("loading"); // Indicate initial progress - tb.setStyleName(CLASSNAME + "-tabs"); - DOM.setElementProperty(deco, "className", CLASSNAME + "-deco"); + this.tb.setStyleName(CLASSNAME + "-tabs"); + DOM.setElementProperty(this.deco, "className", CLASSNAME + "-deco"); - add(tb); - add(tp); - DOM.appendChild(getElement(), deco); + add(this.tb); + add(this.tp); + DOM.appendChild(getElement(), this.deco); - tb.addTabListener(tl); + this.tb.addTabListener(this.tl); clearTabs(); + + // TODO For Safari only. Fix annoying 1px first cell in TabBar. + DOM.setStyleAttribute(DOM.getFirstChild(DOM.getFirstChild(DOM + .getFirstChild(tb.getElement()))), "display", "none"); } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { this.client = client; - id = uidl.getId(); + this.id = uidl.getId(); if (client.updateComponent(this, uidl, false)) { return; @@ -99,11 +105,11 @@ public class ITabsheet extends FlowPanel implements Paintable, String decoBaseClass = CLASSNAME + "-deco"; String decoClass = decoBaseClass; for (int i = 0; i < styles.length; i++) { - tb.addStyleDependentName(styles[i]); - tp.addStyleDependentName(styles[i]); + this.tb.addStyleDependentName(styles[i]); + this.tp.addStyleDependentName(styles[i]); decoClass += " " + decoBaseClass + "-" + styles[i]; } - DOM.setElementProperty(deco, "className", decoClass); + DOM.setElementProperty(this.deco, "className", decoClass); } // Adjust width and height @@ -119,17 +125,18 @@ public class ITabsheet extends FlowPanel implements Paintable, setHeight(h); } } else { - height = null; - tp.setHeight(""); + this.height = null; + this.tp.setHeight(""); } // Render content UIDL tabs = uidl.getChildUIDL(0); - boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren(); - for (int i = 0; keepCurrentTabs && i < tabKeys.size(); i++) { - keepCurrentTabs = tabKeys.get(i).equals( + boolean keepCurrentTabs = this.tabKeys.size() == tabs + .getNumberOfChildren(); + for (int i = 0; keepCurrentTabs && i < this.tabKeys.size(); i++) { + keepCurrentTabs = this.tabKeys.get(i).equals( tabs.getChildUIDL(i).getStringAttribute("key")) - && captions.get(i).equals( + && this.captions.get(i).equals( tabs.getChildUIDL(i).getStringAttribute("caption")); } if (keepCurrentTabs) { @@ -137,14 +144,14 @@ public class ITabsheet extends FlowPanel implements Paintable, for (Iterator it = tabs.getChildIterator(); it.hasNext();) { UIDL tab = (UIDL) it.next(); if (tab.getBooleanAttribute("selected")) { - activeTabIndex = index; + this.activeTabIndex = index; renderContent(tab.getChildUIDL(0)); } index++; } } else { - tabKeys.clear(); - captions.clear(); + this.tabKeys.clear(); + this.captions.clear(); clearTabs(); int index = 0; @@ -156,19 +163,18 @@ public class ITabsheet extends FlowPanel implements Paintable, caption = " "; } - captions.add(caption); - tabKeys.add(key); + this.captions.add(caption); + this.tabKeys.add(key); - // Add new tab (additional SPAN-element for - // loading indication) - tb.insertTab("" + caption + "", true, tb + // Add new tab (additional SPAN-element for loading indication) + this.tb.insertTab("" + caption + "", true, this.tb .getTabCount()); // Add placeholder content - tp.add(new ILabel("")); + this.tp.add(new ILabel("")); if (tab.getBooleanAttribute("selected")) { - activeTabIndex = index; + this.activeTabIndex = index; renderContent(tab.getChildUIDL(0)); } index++; @@ -176,18 +182,20 @@ public class ITabsheet extends FlowPanel implements Paintable, } // Open selected tab - tb.selectTab(activeTabIndex); + this.tb.selectTab(this.activeTabIndex); } private void renderContent(final UIDL contentUIDL) { DeferredCommand.addCommand(new Command() { public void execute() { - Widget content = client.getWidget(contentUIDL); - tp.remove(activeTabIndex); - tp.insert(content, activeTabIndex); - tp.showWidget(activeTabIndex); - ((Paintable) content).updateFromUIDL(contentUIDL, client); + Widget content = ITabsheet.this.client.getWidget(contentUIDL); + ITabsheet.this.tp.remove(ITabsheet.this.activeTabIndex); + ITabsheet.this.tp + .insert(content, ITabsheet.this.activeTabIndex); + ITabsheet.this.tp.showWidget(ITabsheet.this.activeTabIndex); + ((Paintable) content).updateFromUIDL(contentUIDL, + ITabsheet.this.client); removeStyleDependentName("loading"); ITabsheet.this.iLayout(); } @@ -196,15 +204,14 @@ public class ITabsheet extends FlowPanel implements Paintable, } private void clearTabs() { - int i = tb.getTabCount(); + int i = this.tb.getTabCount(); while (i > 0) { - tb.removeTab(--i); + this.tb.removeTab(--i); } - tp.clear(); + this.tp.clear(); - // Get rid of unnecessary 100% cell heights in TabBar (really - // ugly hack) - Element tr = DOM.getChild(DOM.getChild(tb.getElement(), 0), 0); + // Get rid of unnecessary 100% cell heights in TabBar (really ugly hack) + Element tr = DOM.getChild(DOM.getChild(this.tb.getElement(), 0), 0); Element rest = DOM.getChild( DOM.getChild(tr, DOM.getChildCount(tr) - 1), 0); DOM.removeElementAttribute(rest, "style"); @@ -216,18 +223,18 @@ public class ITabsheet extends FlowPanel implements Paintable, } public void iLayout() { - if (height != null) { + if (this.height != null) { // Make content zero height - tp.setHeight("0"); - DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden"); + this.tp.setHeight("0"); + DOM.setStyleAttribute(this.tp.getElement(), "overflow", "hidden"); // First, calculate needed pixel height - super.setHeight(height); + super.setHeight(this.height); int neededHeight = getOffsetHeight(); super.setHeight(""); // Then calculate the size the content area needs to be int pixelHeight = getOffsetHeight(); - tp.setHeight(neededHeight - pixelHeight + "px"); - DOM.setStyleAttribute(tp.getElement(), "overflow", ""); + this.tp.setHeight(neededHeight - pixelHeight + "px"); + DOM.setStyleAttribute(this.tp.getElement(), "overflow", ""); } Util.runDescendentsLayout(this); } 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 25660f8949..59feefad80 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 @@ -38,6 +38,7 @@ .i-panel-nocaption { height: 9px; + border-bottom: 1px solid #dee2e3; } .i-panel-caption:before, @@ -58,7 +59,7 @@ .i-panel-content { border: 1px solid #babfc0; border-top: none; - border-bottom: none; + border-bottom: 1px solid #dee2e3; background-color: #fff; overflow: auto; } @@ -94,6 +95,7 @@ border-right: none; background: transparent; padding-top: 14px; + overflow: hidden; } .i-panel-caption-light:before, diff --git a/src/com/itmill/toolkit/tests/featurebrowser/Feature.java b/src/com/itmill/toolkit/tests/featurebrowser/Feature.java index 0ce70f67bb..058cff97aa 100644 --- a/src/com/itmill/toolkit/tests/featurebrowser/Feature.java +++ b/src/com/itmill/toolkit/tests/featurebrowser/Feature.java @@ -131,6 +131,7 @@ public abstract class Feature extends CustomComponent { } description = new Label(label, Label.CONTENT_XHTML); mainLayout.addComponent(description); + mainLayout.setMargin(true); ts.addTab(mainLayout, "Description", null); }