From aebc8d3fbed595c03c41fc1bbcf0afd9ccad8734 Mon Sep 17 00:00:00 2001
From: Jouni Koivuviita <jouni.koivuviita@itmill.com>
Date: Tue, 27 Jan 2009 11:01:40 +0000
Subject: [PATCH] Fixes #2455: ComboBox item icon does not display correctly.

svn changeset:6645/svn branch:trunk
---
 .../select/img/bg-center-filter-error.png     | Bin 0 -> 217 bytes
 .../default/select/img/bg-center-filter.png   | Bin 0 -> 1008 bytes
 .../select/img/bg-left-filter-error.png       | Bin 397 -> 230 bytes
 .../default/select/img/bg-left-filter.png     | Bin 305 -> 230 bytes
 .../ITMILL/themes/default/select/select.css   |  51 ++++++++------
 WebContent/ITMILL/themes/default/styles.css   |  49 ++++++++-----
 .../terminal/gwt/client/ui/IFilterSelect.java |  66 +++++++++++++-----
 7 files changed, 109 insertions(+), 57 deletions(-)
 create mode 100644 WebContent/ITMILL/themes/default/select/img/bg-center-filter-error.png
 create mode 100644 WebContent/ITMILL/themes/default/select/img/bg-center-filter.png

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
index 0000000000000000000000000000000000000000..72f74f16abf76e4e5dafea79cd83e44d6b87ee99
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0y~yV7&umi*qmoNwq(<Z9q!0#5JNMI6tkVJh3R1!7(L2
zDOJHUH!(dmC^a#qvhZZ84Nwt(fKQ0)%d=;<?cTF|&Dt;5uKj=T;OAzoV?e0{PZ!6K
zid%24928_w;5ocO<VO9obB=ye2l<~f1gJBJ>|(fbl6gVjPUacb4A1x)b}}ctW0+wL
tqai{wcC#SK0hvHGH8$TF7o6iVU=WOX&|#6~Hy3CZgQu&X%Q~loCII~oP$mEX

literal 0
HcmV?d00001

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
index 0000000000000000000000000000000000000000..03e7384343c3d044f49b4b1a619fe7f271e364c3
GIT binary patch
literal 1008
zcmV<M0}uR(P)<h;3K|Lk000e1NJLTq00+<j000*V0{{R3WUM5~0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#08mU+MZCen`T6<S+uYXK+4%YS$IHvT
z!NS+s+OD&-r>w2%>FM<J^tQXa|NsC0|NjpU4-gO#5fKp*5)u;=6BHB_6%`d078Vy5
z7Z?~A85tQG8X6lL8yp-Q9UUDW9v&YbA0QwgAt50mA|fLrBP1jwB_$;$CMG8*CnzW=
zDJdx`Dk>{0D=aK5EiElBE-o)GFEB7LF)=YRGBPtWGc+_bH8nLhHa0gmH#j&rIXO8x
zIyyT$J3Kr*Jv}`>K0ZG`KR`f0K|w)6LPA4BLqtSGMMXtMMn*?RM@UFWNl8gcN=i#h
zOH52mO-)TsPEJoxPf$=$QBhG+Qc_b>Q&dz`RaI41R#sP6S6EnBSy@?HT3TCMTU=aR
zU0q#XUS3~cUtnNhVPRonVq#-sV`OAxWo2b%W@cw+XJ}|>X=!O{YHDk1Yiw+6ZEbCC
zZf<XHZ*XvMadB~Sa&mKXb98icb#--ic6N7ncX)Vsd3kwydU|_%dwhI+eSLj?etv&{
ze}I61fq{X7f`WsCgM@^Hg@uKNhK7fShlq%XiHV7dii(Sii;Rqnjg5_tj*gFykC2d%
zk&%&-l9H2?la!Q{m6es2mX?>7mzbECnVFfInwp!No1C1Sot>SYo}QndpP-<ip`oFo
zqN1atqokyyrKP2&rlzN-r>Ll?si~=|s;aB2tE{Z7t*x!DuCA}IuduMNv9YnTva++Y
zv$V9dwY9ajwzjvox45{txw*Nzy1Ki&yS%)-y}iA@zP`V|zreu2!NI}8!otJD!^FhI
z#l^+O#>U6T$H>UY$;rve%F4^j%goHo&CSiu&d$%z&(P4&(b3V;($dq@)6~?|)z#J3
z*4Ee8*Vx$D+1c6J+S=RO+uYpT-QC^Z-rnEe-{9cj;o;%p;^O1u<K*Pz<>lq(=H}<;
z=jiC@>FMd}>gwz3>+J08?d|RE?(XmJ@9^;O@$vEU^78ZZ^Yrxe_4W1k_V)Mp_xSku
z`T6<!`uh9(`~3X;{r&y^{{H{}{~*?FnE(I)4|GyaQ~&?}|NsC0|NsC0|Ns90)ZCb%
z0001MNkl<Zc-rjMu?YYm5CpJm1^3_4-d@-EgJg+h0RZ)K0DyYA06@Jw0HB`G0YK;g
zfY1Q|p#uOy2LPc1073@<gbn}*9RP$500<ob5IO)LbN~=K03dV#K<EH~&;dZ`0Kn+b
eHvmxY3orn5iWk0Hoae~^0000<MNUMnLSTZ#@%FO-

literal 0
HcmV?d00001

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
GIT binary patch
delta 201
zcmeBWe#WTS8Q|y6%O%Cdz`(%k>ERLtq~(BEoP!xiYCq(Un5d{;&!8LN6XLq(;Gv(l
zZ(rNL|Hkb*KW^VXe){y@gNLr)ytQugmgQ^KzC3&O%e8CUcJKNB;DJiujLA#mmjX@T
zFA4Gs{*M9}uH2ci5GZBh>EaktaqG>=lZ*@s9LyV-?kWB5f6Y?Dc-FkbDvfVhH$#f>
rhr@sB)+owv@#TK~;%sqv10zF|xMEhymAIEc0~kDA{an^LB{Ts5*cx5H

literal 397
zcmeAS@N?(olHy`uVBq!ia0y~yV7&umi*v96NkOIFEkH`L#5JNMI6tkVJh3R1!7(L2
zDOJHUH!(dmC^a#qvhZZ84FdzCzNd?0NX4x;Hw^O*If%Gk>`#rkw8Z(I*SGmitP2FR
zbdE<J>RIZu<W0lF>CZj#nb+@0&epZloBnO@Ul&bPpd}0p4bNrQZD0Rwx6PxsC7(dn
zGcc4$O)u^JUfEZBe=j3gVD7P~Y@g$g|ARRVcFo*i#)Hx(YcNAa;0{=wLgNEIumC4Z
zIhgiP*ue~9I4~WQ1q%pqyaUq{917S$j0P6+jYycWO!L*gY9_FOaRz6e7vGt#+VukB
ug1dZcx9+IBcWYN}VAfX-u#%D=!U+s<wFa+xE6)D|iFmsDxvX<aXaWGEW^#f6

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
GIT binary patch
delta 126
zcmdnU^o&ulGr-TCmrII^fq{Y7)59eQNXr4SI0rM3)PBexF;Ov`T_teF%M}$rCf3V&
zns~Z6hE&{obMho3g8~Qh2Bv#Tzx!XalrWw(@32ba%j#xG5&m%aPu&{DEmyf-zc^bQ
b-oVJvB&wLz`lss;&`1VPS3j3^P6<r_I-e^H

delta 202
zcmaFHxRFV*Gr-TCmrII^fq{Y7)59f*fr0%3kS)%^3?x(5sGOXr7|#Cx|Nm~a<69@z
z%hlI=x;TbZ+<J30TCl-DfaRd~q1g@fJ2e~*gq3>Fn7^{z){j9U`fDL0!^2g#co|w&
z|72iz$s@}EL<S`c2QDx&IJ1KgoDUU(@DWPt+T(m#7&_#u<h!{TCfI!`zputH;jM6j
aD1*Pq#Vak5+yy}AF?hQAxvX<aXaWF;yFb1F

diff --git a/WebContent/ITMILL/themes/default/select/select.css b/WebContent/ITMILL/themes/default/select/select.css
index 5364c1d0f7..270b9b5d17 100644
--- 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 d925d9ad16..a79bbd9220 100644
--- 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 a3e8af4a37..23c71f975c 100644
--- 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;
+    }
 }
-- 
2.39.5