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

svn changeset:6645/svn branch:trunk

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 {
-
-}
-
+*/

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;

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;
+    }
 }