]> source.dussan.org Git - vaadin-framework.git/commitdiff
Fixed #2156 IE Panel problems
authorArtur Signell <artur.signell@itmill.com>
Tue, 21 Oct 2008 08:24:34 +0000 (08:24 +0000)
committerArtur Signell <artur.signell@itmill.com>
Tue, 21 Oct 2008 08:24:34 +0000 (08:24 +0000)
Added caption size change detection
Fixed caption width calculation and clipping

svn changeset:5679/svn branch:trunk

WebContent/ITMILL/themes/default/styles.css
src/com/itmill/toolkit/terminal/gwt/client/ApplicationConnection.java
src/com/itmill/toolkit/terminal/gwt/client/ICaption.java
src/com/itmill/toolkit/terminal/gwt/client/Util.java
src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java
src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java
src/com/itmill/toolkit/terminal/gwt/client/ui/layout/CellBasedLayout.java
src/com/itmill/toolkit/terminal/gwt/client/ui/layout/ChildComponentContainer.java

index b069d9dd166b03ca15067286b0a8c715517d1376..387f0edec96eed567bc0465f7fed0e82dc7c885f 100644 (file)
@@ -38,6 +38,7 @@
 .i-button {
        cursor: pointer;
        font-size: 13px;
+       white-space: nowrap;
 }
 
 .i-button img {
 }
 
 .i-errorindicator {
-       width: 10px;
+       width: 12px;
        height: 16px;
-       padding-right:13px;
-       display: inline;
+       float: left;
        background: transparent url(icons/16/error.png) no-repeat top right;
 }
 
 *+html .i-errorindicator {
        margin-left:-3px;
 }
-       
 .i-caption .i-icon {
        padding-right: 2px;
        vertical-align: middle;
@@ -926,7 +925,7 @@ input.i-modified,
 }
 
 .i-orderedlayout-vspacing {
-       margin-top: 8px;
+       padding-top: 8px;
 }
 .i-orderedlayout-hspacing {
        padding-left: 8px;
@@ -1219,16 +1218,13 @@ input.i-modified,
 
 .i-filterselect {
        height: 23px;
-       background: transparent url(select/img/bg-left-filter.png) no-repeat;
-       margin-right: 1px;
        white-space: nowrap;
        text-align: left /* Force default alignment */
 }
 
 .i-filterselect-input {
-       width: 99%;
+       background: transparent url(select/img/bg-left-filter.png) no-repeat;
        border: none;
-       background: transparent;
        height: 20px;
        margin: 0;
        padding: 3px 0 0 4px;
@@ -1241,7 +1237,7 @@ input.i-modified,
 
 .i-filterselect-button {
        float: right;
-       margin: -23px -1px 0 0;
+       margin-left: -23px;
        width: 25px;
        height: 23px;
        cursor: pointer;
index 00b72f9a42619f30a0f594680c0f35f2921097c1..28a6700bb3e135ae1acf4476caa0447caff4dd5c 100755 (executable)
@@ -121,6 +121,7 @@ public class ApplicationConnection {
     private int sessionExpirationInterval;
 
     private ArrayList<Widget> relativeSizeChanges = new ArrayList<Widget>();;
+    private ArrayList<Widget> captionSizeChanges = new ArrayList<Widget>();;
 
     public ApplicationConnection(WidgetSet widgetSet,
             ApplicationConfiguration cnf) {
@@ -556,6 +557,7 @@ public class ApplicationConnection {
 
         Vector<Widget> updatedWidgets = new Vector<Widget>();
         relativeSizeChanges.clear();
+        captionSizeChanges.clear();
 
         for (int i = 0; i < changes.size(); i++) {
             try {
@@ -596,6 +598,7 @@ public class ApplicationConnection {
         Set<Widget> sizeUpdatedWidgets = new HashSet<Widget>();
 
         updatedWidgets.addAll(relativeSizeChanges);
+        sizeUpdatedWidgets.addAll(captionSizeChanges);
 
         for (Widget widget : updatedWidgets) {
             Size oldSize = componentOffsetSizes.get(widget);
@@ -1378,4 +1381,8 @@ public class ApplicationConnection {
     public void setWindowName(String newName) {
         windowName = newName;
     }
+
+    public void captionSizeUpdated(Widget component) {
+        captionSizeChanges.add(component);
+    }
 }
index 1033c128c2927adf8f016ef4a63efa33e6ece386..ecfb9f0c61e97658d546d6ab940f947a8b38036a 100644 (file)
@@ -227,17 +227,33 @@ public class ICaption extends HTML {
 
     public int getWidth() {
         int width = 0;
+
         if (icon != null) {
             width += icon.getOffsetWidth();
         }
-        if (captionText != null) {
-            width += captionText.getOffsetWidth();
-        }
-        if (requiredFieldIndicator != null) {
-            width += requiredFieldIndicator.getOffsetWidth();
-        }
-        if (errorIndicatorElement != null) {
-            width += errorIndicatorElement.getOffsetWidth();
+
+        if (maxWidth >= 0) {
+            if (captionText != null) {
+                width += captionText.getOffsetWidth();
+            }
+            if (requiredFieldIndicator != null) {
+                width += requiredFieldIndicator.getOffsetWidth();
+            }
+            if (errorIndicatorElement != null) {
+                width += errorIndicatorElement.getOffsetWidth();
+            }
+
+        } else {
+            if (captionText != null) {
+                width += captionText.getScrollWidth();
+            }
+            if (requiredFieldIndicator != null) {
+                width += requiredFieldIndicator.getScrollWidth();
+            }
+            if (errorIndicatorElement != null) {
+                width += errorIndicatorElement.getScrollWidth();
+            }
+
         }
 
         return width;
index 69b62ede746788b90d1d6d7f27d33da7b491c6cd..edfae1e55e71689e0a04f0f67b92467ed1166e68 100644 (file)
@@ -46,6 +46,8 @@ public class Util {
         Map<Container, Set<Paintable>> childWidgets = new HashMap<Container, Set<Paintable>>();
 
         for (Widget widget : widgets) {
+//            ApplicationConnection.getConsole().log(
+//                    "Widget " + Util.getSimpleName(widget) + " size updated");
             Widget parent = widget.getParent();
             while (parent != null && !(parent instanceof Container)) {
                 parent = parent.getParent();
@@ -204,6 +206,37 @@ public class Util {
         return padding;
     }
 
+    public static int measureHorizontalBorder(Element element) {
+        int borders;
+        if (BrowserInfo.get().isIE6()) {
+            String originalWidth = DOM.getStyleAttribute(element, "width");
+            int originalOffsetWidth = element.getOffsetWidth();
+            DOM.setStyleAttribute(element, "width", originalOffsetWidth + "px");
+            borders = element.getOffsetWidth()
+                    - element.getPropertyInt("clientWidth");
+
+            DOM.setStyleAttribute(element, "width", originalWidth);
+        } else {
+            borders = element.getOffsetWidth()
+                    - element.getPropertyInt("clientWidth");
+        }
+        assert borders >= 0;
+
+        return borders;
+    }
+
+    public static int measureVerticalBorder(Element element) {
+        int borders = element.getOffsetHeight()
+                - element.getPropertyInt("clientHeight");
+        assert borders >= 0;
+        return borders;
+    }
+
+    public static int measureMarginLeft(Element element) {
+        return element.getAbsoluteLeft()
+                - element.getParentElement().getAbsoluteLeft();
+    }
+
     public static void setWidthExcludingPadding(Element element,
             int requestedWidth, int paddingGuess) {
 
index fc6f35e7a8508c1ce7be599d227e1fbbff99a49d..7ca5f56aacce494e5ddfb140f6c8e7fa3f5893f9 100644 (file)
@@ -128,6 +128,7 @@ public class IOrderedLayout extends CellBasedLayout {
 \r
         /* Fetch alignments and expand ratio from UIDL */\r
         updateAlignmentsAndExpandRatios(uidl, uidlWidgets);\r
+        // w.mark("Alignments and expand ratios updated");\r
 \r
         /* Fetch widget sizes from rendered components */\r
         for (ChildComponentContainer childComponentContainer : widgetToComponentContainer\r
@@ -138,8 +139,12 @@ public class IOrderedLayout extends CellBasedLayout {
              */\r
             childComponentContainer.updateWidgetSize();\r
         }\r
+        // w.mark("Widget sizes updated");\r
 \r
         recalculateLayout();\r
+        // w.mark("Layout size calculated (" + activeLayoutSize +\r
+        // ") offsetSize: "\r
+        // + getOffsetWidth() + "," + getOffsetHeight());\r
 \r
         /* Render relative size components */\r
         for (int i = 0; i < relativeSizeComponents.size(); i++) {\r
@@ -151,6 +156,9 @@ public class IOrderedLayout extends CellBasedLayout {
             // childComponentContainer.updateWidgetSize();\r
         }\r
 \r
+        // w.mark("Rendering of " + (relativeSizeComponents.size())\r
+        // + " relative size components done");\r
+\r
         /* Fetch widget sizes for relative size components */\r
         for (ChildComponentContainer childComponentContainer : widgetToComponentContainer\r
                 .values()) {\r
@@ -159,8 +167,10 @@ public class IOrderedLayout extends CellBasedLayout {
             childComponentContainer.updateWidgetSize();\r
         }\r
 \r
-        // w.mark("Rendering of " + (relativeSizeComponents.size())\r
-        // + " relative size components done");\r
+        // w.mark("Widget sizes updated");\r
+\r
+        /* Update component spacing */\r
+        updateContainerMargins();\r
 \r
         /* Recalculate component sizes and alignments */\r
         recalculateComponentSizesAndAlignments();\r
@@ -241,8 +251,6 @@ public class IOrderedLayout extends CellBasedLayout {
             return;\r
         }\r
 \r
-        updateContainerMargins();\r
-\r
         /*\r
          * Update the height of relative height components in a horizontal\r
          * layout or the width for relative width components in a vertical\r
@@ -286,17 +294,18 @@ public class IOrderedLayout extends CellBasedLayout {
             int widgetWidth = s.getWidth()\r
                     + childComponentContainer.getCaptionWidthAfterComponent();\r
 \r
-            if (isDynamicWidth()) {\r
-                /*\r
-                 * For a dynamic width layout the max of caption/widget defines\r
-                 * the required size\r
-                 */\r
+            /*\r
+             * If the component does not have a specified size in the main\r
+             * direction the caption may determine the space used by the\r
+             * component\r
+             */\r
+            if (!childComponentContainer.widgetHasSizeSpecified(orientation)) {\r
                 int captionWidth = childComponentContainer.getCaptionWidth();\r
                 if (captionWidth > widgetWidth) {\r
                     widgetWidth = captionWidth;\r
                 }\r
             }\r
-\r
+            \r
             int widgetHeight = s.getHeight()\r
                     + childComponentContainer.getCaptionHeightAboveComponent();\r
 \r
@@ -383,10 +392,19 @@ public class IOrderedLayout extends CellBasedLayout {
                     width = childComponentContainer.getWidgetSize().getWidth()\r
                             + childComponentContainer\r
                                     .getCaptionWidthAfterComponent();\r
-                    int captionWidth = childComponentContainer\r
-                            .getCaptionWidth();\r
-                    if (captionWidth > width) {\r
-                        width = captionWidth;\r
+\r
+                    /*\r
+                     * If the component does not have a specified size in the\r
+                     * main direction the caption may determine the space used\r
+                     * by the component\r
+                     */\r
+                    if (!childComponentContainer\r
+                            .widgetHasSizeSpecified(orientation)) {\r
+                        int captionWidth = childComponentContainer\r
+                                .getCaptionWidth();\r
+                        if (captionWidth > width) {\r
+                            width = captionWidth;\r
+                        }\r
                     }\r
                 } else {\r
                     width = 0;\r
@@ -484,6 +502,10 @@ public class IOrderedLayout extends CellBasedLayout {
 \r
     }\r
 \r
+    /**\r
+     * Updates the spacing between components. Needs to be done only when\r
+     * components are added/removed.\r
+     */\r
     private void updateContainerMargins() {\r
         ChildComponentContainer firstChildComponent = getFirstChildComponentContainer();\r
 \r
@@ -636,4 +658,16 @@ public class IOrderedLayout extends CellBasedLayout {
         }\r
     }\r
 \r
+    public void updateCaption(Paintable component, UIDL uidl) {\r
+        ChildComponentContainer componentContainer = getComponentContainer((Widget) component);\r
+        componentContainer.updateCaption(uidl, client);\r
+        if (!isRendering) {\r
+            /*\r
+             * This was a component-only update and the possible size change\r
+             * must be propagated to the layout\r
+             */\r
+            client.captionSizeUpdated((Widget) component);\r
+        }\r
+    }\r
+\r
 }\r
index 2847900a88414a7a3d2368e047b9f4e21793b5d8..546d481ec54d538225698311978dc7e5cec4d7bb 100644 (file)
@@ -65,6 +65,10 @@ public class IPanel extends SimplePanel implements Container,
 
     private int borderPaddingVertical = -1;
 
+    private int captionPaddingHorizontal = -1;
+
+    private int captionMarginLeft = -1;
+
     public IPanel() {
         super();
         DOM.appendChild(getElement(), captionNode);
@@ -166,9 +170,9 @@ public class IPanel extends SimplePanel implements Container,
         }
         layout.updateFromUIDL(layoutUidl, client);
 
-
-        if (BrowserInfo.get().isIE7()) {
-               // IE is not able to make the offsetWidth for contentNode correct for some reason...
+        if (BrowserInfo.get().isIE()) {
+            // IE is not able to make the offsetWidth for contentNode correct
+            // for some reason...
             iLayout(false);
         }
         // We may have actions attached to this panel
@@ -249,8 +253,6 @@ public class IPanel extends SimplePanel implements Container,
     }
 
     public void iLayout(boolean runGeckoFix) {
-        renderInformation.updateSize(getElement());
-
         if (BrowserInfo.get().isIE6() && width != null && !width.equals("")) {
             /*
              * IE6 requires overflow-hidden elements to have a width specified
@@ -271,10 +273,8 @@ public class IPanel extends SimplePanel implements Container,
             int parentWidthExcludingPadding = getElement().getOffsetWidth()
                     - parentPadding;
 
-            int captionMarginLeft = captionNode.getAbsoluteLeft()
-                    - getElement().getAbsoluteLeft();
             Util.setWidthExcludingPadding(captionNode,
-                    parentWidthExcludingPadding - captionMarginLeft, 26);
+                    parentWidthExcludingPadding - getCaptionMarginLeft(), 26);
 
             int contentMarginLeft = contentNode.getAbsoluteLeft()
                     - getElement().getAbsoluteLeft();
@@ -284,21 +284,15 @@ public class IPanel extends SimplePanel implements Container,
 
         }
 
-        if (BrowserInfo.get().isIE7() && (width == null || width.equals(""))) {
-        //FIXME This won't work if the panel's content gets narrower later on...
-            int captionMarginLeft = captionNode.getAbsoluteLeft()
-                    - getElement().getAbsoluteLeft();
-            int captionWidth = captionNode.getOffsetWidth() + captionMarginLeft;
-            int contentWidth = contentNode.getOffsetWidth();
+        if (BrowserInfo.get().isIE() && (width == null || width.equals(""))) {
+            int captionWidth = captionText.getOffsetWidth()
+                    + getCaptionMarginLeft() + getCaptionPaddingHorizontal();
             int layoutWidth = ((Widget) layout).getOffsetWidth()
                     + getContainerBorderWidth();
-            int width = contentWidth;
+            int width = layoutWidth;
             if (captionWidth > width) {
                 width = captionWidth;
             }
-            if (layoutWidth > width) {
-                width = layoutWidth;
-            }
 
             super.setWidth(width + "px");
         }
@@ -396,6 +390,20 @@ public class IPanel extends SimplePanel implements Container,
         }
     }
 
+    private int getCaptionMarginLeft() {
+        if (captionMarginLeft < 0) {
+            detectContainerBorders();
+        }
+        return captionMarginLeft;
+    }
+
+    private int getCaptionPaddingHorizontal() {
+        if (captionPaddingHorizontal < 0) {
+            detectContainerBorders();
+        }
+        return captionPaddingHorizontal;
+    }
+
     private int getContainerBorderHeight() {
         if (borderPaddingVertical < 0) {
             detectContainerBorders();
@@ -420,14 +428,17 @@ public class IPanel extends SimplePanel implements Container,
 
     private void detectContainerBorders() {
         DOM.setStyleAttribute(contentNode, "overflow", "hidden");
-        borderPaddingHorizontal = contentNode.getOffsetWidth()
-                - contentNode.getPropertyInt("clientWidth");
-        assert borderPaddingHorizontal >= 0;
-        borderPaddingVertical = contentNode.getOffsetHeight()
-                - contentNode.getPropertyInt("clientHeight");
-        assert borderPaddingVertical >= 0;
+
+        borderPaddingHorizontal = Util.measureHorizontalBorder(contentNode);
+        borderPaddingVertical = Util.measureVerticalBorder(contentNode);
 
         DOM.setStyleAttribute(contentNode, "overflow", "auto");
+
+        captionPaddingHorizontal = Util.measureHorizontalPadding(captionNode,
+                26);
+
+        captionMarginLeft = Util.measureMarginLeft(captionNode);
+
     }
 
     public boolean hasChildComponent(Widget component) {
@@ -478,6 +489,7 @@ public class IPanel extends SimplePanel implements Container,
              */
             return true;
         }
+        iLayout(false);
         return !renderInformation.updateSize(getElement());
     }
 
index 121cdf9ad81ff0fa7c3b8410cde05d8c6ca2875a..47c96f352217a39680101a313f2b7b8249477324 100644 (file)
@@ -9,7 +9,6 @@ import com.google.gwt.user.client.ui.ComplexPanel;
 import com.google.gwt.user.client.ui.Widget;\r
 import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;\r
 import com.itmill.toolkit.terminal.gwt.client.Container;\r
-import com.itmill.toolkit.terminal.gwt.client.Paintable;\r
 import com.itmill.toolkit.terminal.gwt.client.UIDL;\r
 import com.itmill.toolkit.terminal.gwt.client.ui.MarginInfo;\r
 \r
@@ -91,11 +90,6 @@ public abstract class CellBasedLayout extends ComplexPanel implements Container
         throw new UnsupportedOperationException();\r
     }\r
 \r
-    public void updateCaption(Paintable component, UIDL uidl) {\r
-        ChildComponentContainer componentContainer = getComponentContainer((Widget) component);\r
-        componentContainer.updateCaption(uidl, client);\r
-    }\r
-\r
     public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {\r
         this.client = client;\r
 \r
@@ -253,8 +247,8 @@ public abstract class CellBasedLayout extends ComplexPanel implements Container
         spacingFromCSS.vSpacing = measurement.getOffsetHeight() - 1;\r
         spacingFromCSS.hSpacing = measurement.getOffsetWidth() - 1;\r
 \r
-        ApplicationConnection.getConsole().log("Margins: " + marginsFromCSS);\r
-        ApplicationConnection.getConsole().log("Spacing: " + spacingFromCSS);\r
+        // ApplicationConnection.getConsole().log("Margins: " + marginsFromCSS);\r
+        // ApplicationConnection.getConsole().log("Spacing: " + spacingFromCSS);\r
 \r
         root.removeChild(measurement);\r
 \r
index 81c41a59494c28c1f379e2f7b3c91f1423a991fa..dc381227f791e423951244441b2e630c7b7e065a 100644 (file)
@@ -29,6 +29,10 @@ public class ChildComponentContainer extends Panel {
      * Size of the widget inside the container DIV\r
      */\r
     private Size widgetSize = new Size(0, 0);\r
+    /**\r
+     * Size of the caption\r
+     */\r
+    private Size captionSize = new Size(0, 0);\r
 \r
     /**\r
      * Padding added to the container when it is larger than the component.\r
@@ -208,7 +212,7 @@ public class ChildComponentContainer extends Panel {
             return 0;\r
         }\r
 \r
-        return caption.getWidth();\r
+        return captionSize.getWidth();\r
     }\r
 \r
     public int getCaptionHeight() {\r
@@ -216,7 +220,7 @@ public class ChildComponentContainer extends Panel {
             return 0;\r
         }\r
 \r
-        return caption.getHeight();\r
+        return captionSize.getHeight();\r
     }\r
 \r
     public int getCaptionWidthAfterComponent() {\r
@@ -224,7 +228,7 @@ public class ChildComponentContainer extends Panel {
             return 0;\r
         }\r
 \r
-        return caption.getWidth();\r
+        return getCaptionWidth();\r
     }\r
 \r
     public int getCaptionHeightAboveComponent() {\r
@@ -232,7 +236,7 @@ public class ChildComponentContainer extends Panel {
             return 0;\r
         }\r
 \r
-        return caption.getHeight();\r
+        return getCaptionHeight();\r
     }\r
 \r
     public int calculateVerticalAlignmentTopOffset(int emptySpace) {\r
@@ -250,7 +254,7 @@ public class ChildComponentContainer extends Panel {
                         .getHeight());\r
             } else {\r
                 emptySpace -= widgetSize.getHeight();\r
-                emptySpace -= caption.getHeight();\r
+                emptySpace -= getCaptionHeight();\r
             }\r
         } else {\r
             /*\r
@@ -293,14 +297,14 @@ public class ChildComponentContainer extends Panel {
                  */\r
                 captionSpace = 0;\r
                 widgetSpace -= widgetSize.getWidth();\r
-                widgetSpace -= caption.getWidth();\r
+                widgetSpace -= getCaptionWidth();\r
             } else {\r
                 /*\r
                  * The caption is above the component. Caption and widget needs\r
                  * separate alignment offsets.\r
                  */\r
                 widgetSpace -= widgetSize.getWidth();\r
-                captionSpace -= caption.getWidth();\r
+                captionSpace -= getCaptionWidth();\r
             }\r
         } else {\r
             /*\r
@@ -361,6 +365,16 @@ public class ChildComponentContainer extends Panel {
 \r
         }\r
 \r
+        int w = 0;\r
+        int h = 0;\r
+\r
+        if (caption != null) {\r
+            w = caption.getWidth();\r
+            h = caption.getHeight();\r
+        }\r
+\r
+        captionSize.setWidth(w);\r
+        captionSize.setHeight(h);\r
     }\r
 \r
     private void setCaption(ICaption newCaption) {\r
@@ -501,6 +515,22 @@ public class ChildComponentContainer extends Panel {
         return widget;\r
     }\r
 \r
+    /**\r
+     * Return true if the size of the widget has been specified in the selected\r
+     * orientation.\r
+     * \r
+     * @return\r
+     */\r
+    public boolean widgetHasSizeSpecified(int orientation) {\r
+        String size;\r
+        if (orientation == CellBasedLayout.ORIENTATION_HORIZONTAL) {\r
+            size = widget.getElement().getStyle().getProperty("width");\r
+        } else {\r
+            size = widget.getElement().getStyle().getProperty("height");\r
+        }\r
+        return (size != null && !size.equals(""));\r
+    }\r
+\r
     public boolean isComponentRelativeSized(int orientation) {\r
         if (relativeSize == null) {\r
             return false;\r
@@ -606,6 +636,8 @@ public class ChildComponentContainer extends Panel {
         // Also update caption max width\r
         if (caption != null) {\r
             caption.setMaxWidth(width);\r
+\r
+            captionSize.setWidth(caption.getWidth());\r
         }\r
 \r
     }\r