Fixes #2455: ComboBox item icon does not display correctly.

svn changeset:6645/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/select/img/bg-center-filter-error.png b/WebContent/ITMILL/themes/default/select/img/bg-center-filter-error.png
new file mode 100644 (file)
index 0000000..72f74f1
Binary files /dev/null and b/WebContent/ITMILL/themes/default/select/img/bg-center-filter-error.png differ

diff --git a/WebContent/ITMILL/themes/default/select/img/bg-center-filter.png b/WebContent/ITMILL/themes/default/select/img/bg-center-filter.png
new file mode 100644 (file)
index 0000000..03e7384
Binary files /dev/null and b/WebContent/ITMILL/themes/default/select/img/bg-center-filter.png differ

diff --git a/WebContent/ITMILL/themes/default/select/img/bg-left-filter-error.png b/WebContent/ITMILL/themes/default/select/img/bg-left-filter-error.png
index 05672a666d3a8caa21839ebd3e36138fa8fcd88d..0ce411381996f10e04031af20ecc16167999f5ff 100644 (file)
Binary files a/WebContent/ITMILL/themes/default/select/img/bg-left-filter-error.png and b/WebContent/ITMILL/themes/default/select/img/bg-left-filter-error.png differ

diff --git a/WebContent/ITMILL/themes/default/select/img/bg-left-filter.png b/WebContent/ITMILL/themes/default/select/img/bg-left-filter.png
index 06b4d3f01184af76fdb5d9de529f8f68b02f0f5b..246d146d71ade542e90a9e165f79472f98febe7b 100644 (file)
Binary files a/WebContent/ITMILL/themes/default/select/img/bg-left-filter.png and b/WebContent/ITMILL/themes/default/select/img/bg-left-filter.png differ

diff --git a/WebContent/ITMILL/themes/default/select/select.css b/WebContent/ITMILL/themes/default/select/select.css
index 5364c1d0f78daa22450bd006bbcd99bba66f4078..270b9b5d17ec146217c774036712e03ad5ead514 100644 (file)
--- a/WebContent/ITMILL/themes/default/select/select.css
+++ b/WebContent/ITMILL/themes/default/select/select.css
@@ -71,16 +71,20 @@
 .i-filterselect {
        height: 23px;
        white-space: nowrap;
-       text-align: left /* Force default alignment */
-}
-
-.i-filterselect-input {
+       text-align: left; /* Force default alignment */
        background: transparent url(img/bg-left-filter.png) no-repeat;
+       padding-left: 4px;
+}
+.i-filterselect .i-icon {
+       float: left;
+}
+.i-app .i-filterselect .i-filterselect-input {
+       background: transparent url(img/bg-center-filter.png) no-repeat 1px 0;
        float: left;
        border: none;
        height: 20px;
        margin: 0px;
-       padding: 3px 0 0 4px;
+       padding: 3px 0 0 2px;
        font-size: 13px;
 }
 .i-filterselect-input:focus {
@@ -130,16 +134,21 @@
        line-height: 18px;
        margin-top: -1px;
 }
-.i-filterselect-suggestmenu {
-       margin-left: -2px;
+.i-filterselect-suggestmenu table {
+       border-collapse: collapse;
+       border: none;
 }
 .i-filterselect-suggestmenu .gwt-MenuItem {
-       padding: 1px 5px;
+       padding: 1px 6px;
        cursor: pointer;
        height: 18px;
        white-space: nowrap;
 }
 
+.i-filterselect-suggestmenu .gwt-MenuItem .i-icon {
+       margin-right: 3px;
+}
+
 .i-filterselect-suggestmenu .gwt-MenuItem-selected {
        background: #5daee8;
        color: #fff;
@@ -206,15 +215,22 @@
        border-top: 1px solid #b6bbbc;
 }
 
+
+/* Error styles (disabled by default)
+   ----------------------------------
+   
 .i-filterselect-error {
-       background: transparent url(img/bg-left-filter-error.png) no-repeat;
+       background-image: url(img/bg-left-filter-error.png);
+}
+
+.i-filterselect-error .i-filterselect-input {
+       background-image: url(img/bg-center-filter-error.png);
 }
 
 .i-filterselect-error .i-filterselect-button {
-       background: transparent url(img/bg-right-filter-error.png);
+       background-image: url(img/bg-right-filter-error.png);
 }
 
-/* Disabled by default
 .i-select-error .i-select-option,
 .i-select-error .i-select-select,
 .i-select-error .i-select-twincol-selections,
@@ -224,7 +240,9 @@
 }
 */
 
-/* Disabled by default
+/*  Required field styles (disabled by default)
+   --------------------------------------------
+   
 .i-select-required .i-select-option,
 .i-select-required .i-select-select,
 .i-select-required .i-select-twincol-selections,
@@ -232,11 +250,4 @@
        background:transparent;
        background-color: #FFE0E0;
 }
-*/
-
-/* IE specific styles */
-
-* html .i-filterselect {
-
-}
-
+*/
\ No newline at end of file

diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index d925d9ad1698a6b41a91c01703fa90bd9c815ecb..a79bbd9220af8341fb69f6a87cd298aceaf00469 100644 (file)
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -1292,16 +1292,20 @@ input.i-modified,
 .i-filterselect {
        height: 23px;
        white-space: nowrap;
-       text-align: left /* Force default alignment */
-}
-
-.i-filterselect-input {
+       text-align: left; /* Force default alignment */
        background: transparent url(select/img/bg-left-filter.png) no-repeat;
+       padding-left: 4px;
+}
+.i-filterselect .i-icon {
+       float: left;
+}
+.i-app .i-filterselect .i-filterselect-input {
+       background: transparent url(select/img/bg-center-filter.png) no-repeat 1px 0;
        float: left;
        border: none;
        height: 20px;
        margin: 0px;
-       padding: 3px 0 0 4px;
+       padding: 3px 0 0 2px;
        font-size: 13px;
 }
 .i-filterselect-input:focus {
@@ -1351,16 +1355,21 @@ input.i-modified,
        line-height: 18px;
        margin-top: -1px;
 }
-.i-filterselect-suggestmenu {
-       margin-left: -2px;
+.i-filterselect-suggestmenu table {
+       border-collapse: collapse;
+       border: none;
 }
 .i-filterselect-suggestmenu .gwt-MenuItem {
-       padding: 1px 5px;
+       padding: 1px 6px;
        cursor: pointer;
        height: 18px;
        white-space: nowrap;
 }
 
+.i-filterselect-suggestmenu .gwt-MenuItem .i-icon {
+       margin-right: 3px;
+}
+
 .i-filterselect-suggestmenu .gwt-MenuItem-selected {
        background: #5daee8;
        color: #fff;
@@ -1427,15 +1436,22 @@ input.i-modified,
        border-top: 1px solid #b6bbbc;
 }
 
+
+/* Error styles (disabled by default)
+   ----------------------------------
+   
 .i-filterselect-error {
-       background: transparent url(select/img/bg-left-filter-error.png) no-repeat;
+       background-image: url(select/img/bg-left-filter-error.png);
+}
+
+.i-filterselect-error .i-filterselect-input {
+       background-image: url(select/img/bg-center-filter-error.png);
 }
 
 .i-filterselect-error .i-filterselect-button {
-       background: transparent url(select/img/bg-right-filter-error.png);
+       background-image: url(select/img/bg-right-filter-error.png);
 }
 
-/* Disabled by default
 .i-select-error .i-select-option,
 .i-select-error .i-select-select,
 .i-select-error .i-select-twincol-selections,
@@ -1445,7 +1461,9 @@ input.i-modified,
 }
 */
 
-/* Disabled by default
+/*  Required field styles (disabled by default)
+   --------------------------------------------
+   
 .i-select-required .i-select-option,
 .i-select-required .i-select-select,
 .i-select-required .i-select-twincol-selections,
@@ -1455,13 +1473,6 @@ input.i-modified,
 }
 */
 
-/* IE specific styles */
-
-* html .i-filterselect {
-
-}
-
-
 /* ./WebContent/ITMILL/themes/default/shadow/shadow.css */
 .i-shadow {
        position: absolute;

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 a3e8af4a379ee37e52609bd043f052feec7d0e93..23c71f975c64573906f97d85023e045857de1e13 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IFilterSelect.java
@@ -21,6 +21,7 @@ import com.google.gwt.user.client.ui.FocusListener;
 import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.KeyboardListener;
+import com.google.gwt.user.client.ui.LoadListener;
 import com.google.gwt.user.client.ui.PopupListener;
 import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.TextBox;
@@ -104,7 +105,8 @@ public class IFilterSelect extends Composite implements Paintable, Field,
         private boolean isPagingEnabled = true;
 
         private long lastAutoClosed;
-        private int menuLeftMargin = -1;
+
+        private int popupOuterPadding = -1;
 
         SuggestionPopup() {
             super(true, false, true);
@@ -297,27 +299,25 @@ public class IFilterSelect extends Composite implements Paintable, Field,
             final int desiredWidth = getMainWidth();
             int naturalMenuWidth = DOM.getElementPropertyInt(DOM
                     .getFirstChild(menu.getElement()), "offsetWidth");
+
+            if (popupOuterPadding == -1) {
+                popupOuterPadding = Util.measureHorizontalPaddingAndBorder(
+                        getElement(), 2);
+            }
+
             if (naturalMenuWidth < desiredWidth) {
-                menu.setWidth(desiredWidth + "px");
+                menu.setWidth((desiredWidth - popupOuterPadding) + "px");
                 DOM.setStyleAttribute(DOM.getFirstChild(menu.getElement()),
                         "width", "100%");
                 naturalMenuWidth = desiredWidth;
             }
 
             if (BrowserInfo.get().isIE()) {
-                // Take left margin into account
-                if (menuLeftMargin == -1) {
-                    int menuOffsetLeft = menu.getElement().getOffsetLeft();
-                    int menuParentOffsetLeft = getContainerElement()
-                            .getOffsetLeft();
-                    menuLeftMargin = menuOffsetLeft - menuParentOffsetLeft;
-                }
-
                 /*
                  * IE requires us to specify the width for the container
                  * element. Otherwise it will be 100% wide
                  */
-                int rootWidth = naturalMenuWidth + menuLeftMargin;
+                int rootWidth = naturalMenuWidth - popupOuterPadding;
                 DOM.setStyleAttribute(getContainerElement(), "width", rootWidth
                         + "px");
             }
@@ -522,6 +522,7 @@ public class IFilterSelect extends Composite implements Paintable, Field,
     private boolean popupOpenerClicked;
     private String width = null;
     private int textboxPadding = -1;
+    private int componentPadding = -1;
     private int suggestionPopupMinWidth = 0;
     private static final String CLASSNAME_EMPTY = "empty";
     private static final String ATTR_EMPTYTEXT = "emptytext";
@@ -533,6 +534,17 @@ public class IFilterSelect extends Composite implements Paintable, Field,
 
     public IFilterSelect() {
         selectedItemIcon.setVisible(false);
+        selectedItemIcon.setStyleName("i-icon");
+        selectedItemIcon.addLoadListener(new LoadListener() {
+            public void onError(Widget sender) {
+            }
+
+            public void onLoad(Widget sender) {
+                updateSelectedIconPosition();
+                updateRootWidth();
+            }
+        });
+
         panel.add(selectedItemIcon);
         tb.sinkEvents(ITooltip.TOOLTIP_EVENTS);
         panel.add(tb);
@@ -719,7 +731,17 @@ public class IFilterSelect extends Composite implements Paintable, Field,
         } else {
             selectedItemIcon.setUrl(iconUri);
             selectedItemIcon.setVisible(true);
+            updateSelectedIconPosition();
         }
+        updateRootWidth();
+    }
+
+    private void updateSelectedIconPosition() {
+        // Position icon vertically to middle
+        int availableHeight = getOffsetHeight();
+        int iconHeight = Util.getRequiredHeight(selectedItemIcon);
+        DOM.setStyleAttribute(selectedItemIcon.getElement(), "marginTop",
+                (availableHeight - iconHeight) / 2 + "px");
     }
 
     public void onKeyDown(Widget sender, char keyCode, int modifiers) {
@@ -875,9 +897,7 @@ public class IFilterSelect extends Composite implements Paintable, Field,
         } else {
             this.width = width;
         }
-
-        super.setWidth(width);
-
+        Util.setWidthExcludingPaddingAndBorder(this, width, 4);
         updateRootWidth();
     }
 
@@ -910,7 +930,8 @@ public class IFilterSelect extends Composite implements Paintable, Field,
              * When the width is specified we also want to explicitly specify
              * widths for textbox and popupopener
              */
-            setTextboxWidth(getMainWidth());
+            int padding = getComponentPadding();
+            setTextboxWidth(getMainWidth() - padding);
 
         }
     }
@@ -925,25 +946,34 @@ public class IFilterSelect extends Composite implements Paintable, Field,
         } else {
             componentWidth = getOffsetWidth();
         }
-
         return componentWidth;
     }
 
     private void setTextboxWidth(int componentWidth) {
         int padding = getTextboxPadding();
         int popupOpenerWidth = Util.getRequiredWidth(popupOpener);
-        int textboxWidth = componentWidth - padding - popupOpenerWidth;
+        int iconWidth = Util.getRequiredWidth(selectedItemIcon);
+        int textboxWidth = componentWidth - padding - popupOpenerWidth
+                - iconWidth;
         if (textboxWidth < 0) {
             textboxWidth = 0;
         }
         tb.setWidth(textboxWidth + "px");
     }
 
-    public int getTextboxPadding() {
+    private int getTextboxPadding() {
         if (textboxPadding < 0) {
             textboxPadding = Util.measureHorizontalPaddingAndBorder(tb
                     .getElement(), 4);
         }
         return textboxPadding;
     }
+
+    private int getComponentPadding() {
+        if (componentPadding < 0) {
+            componentPadding = Util.measureHorizontalPaddingAndBorder(
+                    getElement(), 3);
+        }
+        return componentPadding;
+    }
 }