Changeset 5056

Timestamp:

07/04/08 09:17:04 (6 months ago)

Author:

joonas.lehtinen@…

Message:

Made marginal and spacing calculations a lot more robust. Related to #1904

Location:

trunk

Files:

• WebContent/ITMILL/themes/default/orderedlayout/orderedlayout.css (modified) (2 diffs)
• WebContent/ITMILL/themes/default/styles.css (modified) (2 diffs)
• src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java (modified) (10 diffs)

trunk/WebContent/ITMILL/themes/default/orderedlayout/orderedlayout.css

@@ -1 @@
-.i-orderedlayout-margin-top {
+.
+/* Ordered layout spacing and margins are currently fixed.
+   This is considered to be a bug. For more info, see
+   http://dev.itmill.com/ticket/1904
+
+i-orderedlayout-margin-top {
         padding-top: 15px;
 }
@@ -19 +24 @@
 }
 
+*/
+
 /* Placing error indicator right after the widget with empty caption */
 .i-orderedlayout-w:after, .i-orderedlayout-c:after {

trunk/WebContent/ITMILL/themes/default/styles.css

@@ -698 +698 @@
         white-space: nowrap;
 }
-.i-orderedlayout-margin-top {
+.
+/* Ordered layout spacing and margins are currently fixed.
+   This is considered to be a bug. For more info, see
+   http://dev.itmill.com/ticket/1904
+
+i-orderedlayout-margin-top {
         padding-top: 15px;
 }
@@ -717 +722 @@
         padding-left: 8px;
 }
+
+*/
 
 /* Placing error indicator right after the widget with empty caption */

trunk/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java

@@ -19 +19 @@
 import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
-import com.itmill.toolkit.terminal.gwt.client.StyleConstants;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 import com.itmill.toolkit.terminal.gwt.client.Util;
@@ -40 +39 @@
     public static final int ORIENTATION_HORIZONTAL = 1;
 
-    // TODO Read this from CSS as in #1904
-    private static final int SPACING_SIZE = 8;
+    // TODO Read these from CSS as in #1904
+    private static final int HSPACING = 8;
+    private static final int VSPACING = 8;
+    private static final int MARGIN_TOP = 15;
+    private static final int MARGIN_BOTTOM = 15;
+    private static final int MARGIN_LEFT = 18;
+    private static final int MARGIN_RIGHT = 18;
 
     int orientationMode = ORIENTATION_VERTICAL;
@@ -203 +207 @@
         updateOrientation(uidl);
 
-        // Ensure correct implementation
-        if (client.updateComponent(this, uidl, false)) {
-            return;
-        }
-
         // Handle layout margins
         if (margins.getBitMask() != uidl.getIntAttribute("margins")) {
@@ -215 +214 @@
         // Handle component spacing later in handleAlignments() method
         hasComponentSpacing = uidl.getBooleanAttribute("spacing");
+
+        // Update sizes, ...
+        if (client.updateComponent(this, uidl, false)) {
+            return;
+        }
 
         // Collect the list of contained widgets after this update
@@ -318 +322 @@
         if (width == null || "".equals(width)) {
             DOM.setStyleAttribute(margin, "width", "");
+
             if (fixedCellSize && orientationMode == ORIENTATION_HORIZONTAL) {
                 removeFixedSizes();
             }
         } else {
-            DOM.setStyleAttribute(margin, "width", "100%");
+
+            // Calculate margin pixel width
+            int cw = DOM.getElementPropertyInt(root, "offsetWidth");
+            cw -= margins.hasLeft() ? MARGIN_LEFT : 0;
+            cw -= margins.hasRight() ? MARGIN_RIGHT : 0;
+            DOM.setStyleAttribute(margin, "width", cw + "px");
+
             if (orientationMode == ORIENTATION_HORIZONTAL) {
                 fixedCellSize = true;
@@ -347 +358 @@
             }
         } else {
-            DOM.setStyleAttribute(margin, "height", "100%");
+
+            // Calculate margin pixel height
+            int ch = DOM.getElementPropertyInt(root, "offsetHeight");
+            ch -= margins.hasTop() ? MARGIN_TOP : 0;
+            ch -= margins.hasBottom() ? MARGIN_BOTTOM : 0;
+            DOM.setStyleAttribute(margin, "height", ch + "px");
+
+            // Turn on vertical orientation mode if needed
             if (orientationMode == ORIENTATION_VERTICAL) {
                 fixedCellSize = true;
@@ -399 +417 @@
         }
 
-        DOM.setStyleAttribute(margin,
-                (orientationMode == ORIENTATION_HORIZONTAL) ? "width"
-                        : "height", "100%");
-
-        int size = DOM.getElementPropertyInt(margin,
+        // Calculate the space for fixed contents minus marginals
+        int size = DOM.getElementPropertyInt(root,
                 (orientationMode == ORIENTATION_HORIZONTAL) ? "offsetWidth"
                         : "offsetHeight");
+        if (orientationMode == ORIENTATION_HORIZONTAL) {
+            size -= margins.hasLeft() ? MARGIN_LEFT : 0;
+            size -= margins.hasRight() ? MARGIN_RIGHT : 0;
+        } else {
+            size -= margins.hasTop() ? MARGIN_TOP : 0;
+            size -= margins.hasBottom() ? MARGIN_BOTTOM : 0;
+        }
 
         // Horizontal layouts need fixed mode tables
@@ -417 +439 @@
         int numChild = childWidgets.size();
         if (hasComponentSpacing) {
-            size -= SPACING_SIZE * (numChild - 1);
+            size -= ((orientationMode == ORIENTATION_HORIZONTAL) ? HSPACING
+                    : VSPACING)
+                    * (numChild - 1);
         }
 
@@ -459 +483 @@
 
         // Update margin classes
-        setStyleName(margin, CLASSNAME + "-" + StyleConstants.MARGIN_TOP,
-                margins.hasTop());
-        setStyleName(margin, CLASSNAME + "-" + StyleConstants.MARGIN_RIGHT,
-                margins.hasRight());
-        setStyleName(margin, CLASSNAME + "-" + StyleConstants.MARGIN_BOTTOM,
-                margins.hasBottom());
-        setStyleName(margin, CLASSNAME + "-" + StyleConstants.MARGIN_LEFT,
-                margins.hasLeft());
+        DOM.setStyleAttribute(margin, "paddingTop",
+                margins.hasTop() ? MARGIN_TOP + "px" : "0");
+        DOM.setStyleAttribute(margin, "paddingLeft",
+                margins.hasLeft() ? MARGIN_LEFT + "px" : "0");
+        DOM.setStyleAttribute(margin, "paddingBottom",
+                margins.hasBottom() ? MARGIN_BOTTOM + "px" : "0");
+        DOM.setStyleAttribute(margin, "paddingRight",
+                margins.hasRight() ? MARGIN_RIGHT + "px" : "0");
+
+        // Update calculated height if needed
+        String currentMarginHeight = DOM.getStyleAttribute(margin, "height");
+        if (currentMarginHeight != null && !"".equals(currentMarginHeight)) {
+            int ch = DOM.getElementPropertyInt(root, "offsetHeight");
+            ch -= margins.hasTop() ? MARGIN_TOP : 0;
+            ch -= margins.hasBottom() ? MARGIN_BOTTOM : 0;
+            DOM.setStyleAttribute(margin, "height", ch + "px");
+        }
+        String currentMarginWidth = DOM.getStyleAttribute(margin, "width");
+        if (currentMarginWidth != null && !"".equals(currentMarginWidth)) {
+            int cw = DOM.getElementPropertyInt(root, "offsetWidth");
+            cw -= margins.hasLeft() ? MARGIN_LEFT : 0;
+            cw -= margins.hasRight() ? MARGIN_RIGHT : 0;
+            DOM.setStyleAttribute(margin, "width", cw + "px");
+        }
 
         // Update child layouts
@@ -703 +743 @@
         /** Set class for spacing */
         void setSpacingEnabled(boolean b) {
-            setStyleName(
-                    getElement(),
-                    CLASSNAME
-                            + "-"
-                            + (orientationMode == ORIENTATION_HORIZONTAL ? StyleConstants.HORIZONTAL_SPACING
-                                    : StyleConstants.VERTICAL_SPACING), b);
-        }
-
+            DOM.setStyleAttribute(getElement(),
+                    orientationMode == ORIENTATION_HORIZONTAL ? "paddingLeft"
+                            : "marginTop",
+                    b ? (orientationMode == ORIENTATION_HORIZONTAL ? HSPACING
+                            : VSPACING)
+                            + "px" : "0");
+        }
     }