-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

5 files changed, 105 insertions, 80 deletions

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 = "&nbsp;";
                 }
 
-                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("<span>" + caption + "</span>", true, tb
+                // Add new tab (additional SPAN-element for loading indication)
+                this.tb.insertTab("<span>" + caption + "</span>", 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);
         }