Author: abelevich Date: 2008-01-24 14:03:09 -0500 (Thu, 24 Jan 2008) New Revision: 5605 Modified: trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonGradient.java trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonPressGradient.java trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx Log: fix combobox appearance Modified: trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonGradient.java =================================================================== --- trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonGradient.java 2008-01-24 18:33:00 UTC (rev 5604) +++ trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonGradient.java 2008-01-24 19:03:09 UTC (rev 5605) @@ -13,6 +13,6 @@ */ public class ComboBoxButtonGradient extends BaseGradient { public ComboBoxButtonGradient() { - super(8, 18, 9,Skin.generalBackgroundColor, "tabBackgroundColor"); + super(8, 18, 9,"tabBackgroundColor", Skin.headerBackgroundColor); } } Modified: trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonPressGradient.java =================================================================== --- trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonPressGradient.java 2008-01-24 18:33:00 UTC (rev 5604) +++ trunk/sandbox/ui/combobox/src/main/java/org/richfaces/renderkit/images/ComboBoxButtonPressGradient.java 2008-01-24 19:03:09 UTC (rev 5605) @@ -13,7 +13,7 @@ public class ComboBoxButtonPressGradient extends BaseGradient{ public ComboBoxButtonPressGradient() { - super(7,15 , 9, "tabBackgroundColor",Skin.generalBackgroundColor); + super(7,15 , 9, Skin.headerBackgroundColor, "tabBackgroundColor"); } } Modified: trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss =================================================================== --- trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss 2008-01-24 18:33:00 UTC (rev 5604) +++ trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/css/combobox.xcss 2008-01-24 19:03:09 UTC (rev 5605) @@ -12,71 +12,64 @@ .rich-combobox-button-hovered { } +.rich-combobox-input-width { + width : 250px; +} + .rich-combobox-input { - /*position : absolute; - top : 0px; left : 0; - padding-right :20px; - padding-left :3px; - margin : 0px; - border : 1px solid; - background-position:left top; - background-repeat:repeat-x;*/ width : 240px; position : absolute; top : 0px; left : 0; padding-left :3px; margin : 0px; - border : 1px solid #c0c0c0; + border-width: 1px; + border-color : #000000; + background-position:left top; + background-repeat:repeat-x; } .rich-combobox-input-disabled { + width : 240px; position : absolute; - top : 0px; left : 0; - padding-right :20px; + top : 0px; + left : 0; padding-left :3px; margin : 0px; - border : 1px solid; + border-width: 1px; + border-color : #000000; background-position:left top; - background-repeat:repeat-x; + background-repeat:repeat-x; } .rich-combobox-input-inactive { - /*position : absolute; - top : 0px; - left : 0px; - padding-right :20px; - padding-left :3px; - margin : 0px; - border : 1px solid; - background-position:left top; - background-repeat:repeat-x;*/ - width : 240px; position : absolute; top : 0px; left : 0; padding-left :3px; margin : 0px; - border : 1px solid #c0c0c0; - /*background-image: url(SpinnerFieldGradient.gif); - */ background-position:left top; + border-width: 1px; + border-color : #000000; + background-position:left top; + background-repeat:repeat-x; } .rich-combobox-list-position { position : absolute; - top:-1px; + top:1px; left:0px; } .rich-combobox-list-decoration { - border : 1px solid #BED6F8; + border : 1px solid #c0c0c0; padding : 0px; background : #FFFFFF; } -.rich-combobox-list-scroll { - overflow-y : auto; - overflow-x : auto; +.rich-combobox-list-scroll { + overflow : auto; + overflow-x : hidden; + height : 100px; } .rich-combobox-list-cord { @@ -84,6 +77,10 @@ font-size : 0px; } +.rich-combobox-list-width { + width : 248px; +} + .rich-combobox-item { padding : 2px; white-space : nowrap; @@ -92,14 +89,19 @@ .rich-combobox-item-selected { padding : 1px; - border : 1px dotted; + border : 1px dotted #4a75b5; + background-color: #4a75b5; + width : 100%; cursor:pointer; } .rich-combobox-strut { + width : 240px; position : relative; visibility : hidden; - margin : 0px; padding : 2px; + margin : 0px; + padding-left : 3px; + border : 1px solid #c0c0c0; } .rich-combobox-shell { @@ -107,13 +109,6 @@ } .rich-combobox-button { - /*position : absolute; - top : 0px; - right : 0px; //left: fullWidth - 17px; - width : 17px; - margin : 0px; - border : 1px solid;*/ - position : absolute; top : 0px; right : 0; @@ -122,27 +117,20 @@ padding-right : 0px; margin : 0px; border : 1px solid #c0c0c0; - /*border-color: #BED6F8 rgb(190, 214, 248) #BED6F8 rgb(190, 214, 248);*/ - /*panelBorderColor*/ } .rich-combobox-button-disabled { position : absolute; top : 0px; - right : 0px; //left: fullWidth - 17px; + right : 0; width : 17px; + padding-left : 0px; + padding-right : 0px; margin : 0px; - border : 1px solid; + border : 1px solid #c0c0c0; } .rich-combobox-button-inactive { - /*position : absolute; - top : 0px; - right : 0px; //left: fullWidth - 17px; - width : 17px; - margin : 0px; - border : 1px solid;*/ - position : absolute; top : 0px; right : 0; @@ -151,29 +139,33 @@ padding-right : 0px; margin : 0px; border : 1px solid #c0c0c0; - /*border-color: #BED6F8 rgb(190, 214, 248) #BED6F8 rgb(190, 214, 248);*/ - /*panelBorderColor*/ } .rich-combobox-button-background { - background : top repeat-x; + background-color: #4a75b5; + background-repeat: repeat-x; + background-position: top; cursor : pointer; } .rich-combobox-button-background-disabled { - background : top repeat-x; + background-color: #4a75b5; + background-repeat: repeat-x; + background-position: top; cursor : pointer; } .rich-combobox-button-background-inactive { - background : top repeat-x; - cursor : pointer; + background-color: #4a75b5; + background-repeat: repeat-x; + background-position: top; } .rich-combobox-button-pressed-background { - background : top repeat-x; - cursor : pointer; + background-color: #4a75b5; + background-repeat: repeat-x; + background-position: bottom; } .rich-combobox-button-icon { @@ -189,11 +181,11 @@ } -.cb_shadow{ top:10; left:0; position : absolute;} -.cb_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} -.cb_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} -.cb_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.cb_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} +.rich-combobox-shadow{ top:10; left:0; position : absolute;} +.rich-combobox-shadow-tl{repeat-x top left;} +.rich-combobox-shadow-tr{repeat-x top right;} +.rich-combobox-shadow-bl{repeat-x bottom left;} +.rich-combobox-shadow-br{repeat-x bottom right;} ]]> </f:verbatim> @@ -244,18 +236,6 @@ </u:style> </u:selector> - <u:selector name=".rich-combobox-button"> - <u:style name="border-color" skin="panelBorderColor"/> - </u:selector> - - <u:selector name=".rich-combobox-button-disabled"> - <u:style name="border-color" skin="panelBorderColor"/> - </u:selector> - - <u:selector name=".rich-combobox-button-inactive"> - <u:style name="border-color" skin="panelBorderColor"/> - </u:selector> - <u:selector name=".rich-combobox-button-hovered"> <u:style name="border-color" skin="selectControlColor"/> </u:selector> @@ -278,27 +258,18 @@ </u:selector> <u:selector name=".rich-combobox-input"> - <u:style name="background-image"> - <f:resource f:key="org.richfaces.renderkit.images.ComboBoxInputGradient" /> - </u:style> + <u:style name="background-color" skin="controlBackgroundColor"/> <u:style name="border-color" skin="panelBorderColor"/> - <u:style name="border-bottom-color" skin="additionalBackgroundColor"/> - <u:style name="border-right-color" skin="additionalBackgroundColor"/> </u:selector> <u:selector name=".rich-combobox-input-disabled"> - <u:style name="border-color" skin="tabBackgroundColor"/> - <u:style name="border-bottom-color" skin="additionalBackgroundColor"/> - <u:style name="border-right-color" skin="additionalBackgroundColor"/> + <u:style name="background-color" skin="controlBackgroundColor"/> + <u:style name="border-color" skin="panelBorderColor"/> </u:selector> <u:selector name=".rich-combobox-input-inactive"> - <u:style name="background-image"> - <f:resource f:key="org.richfaces.renderkit.images.ComboBoxInputGradient" /> - </u:style> + <u:style name="background-color" skin="controlBackgroundColor"/> <u:style name="border-color" skin="panelBorderColor"/> - <u:style name="border-bottom-color" skin="additionalBackgroundColor"/> - <u:style name="border-right-color" skin="additionalBackgroundColor"/> </u:selector> <u:selector name=".rich-combobox-item"> @@ -308,8 +279,10 @@ </u:selector> <u:selector name=".rich-combobox-item-selected"> - <u:style name="border-color" skin="generalTextColor"/> - <u:style name="background-color" skin="additionalBackgroundColor" /> + <u:style name="color" skin="generalTextColor" /> + <u:style name="background-color" skin="headerBackgroundColor" /> + <u:style name="border-color" skin="headerBackgroundColor" /> + <u:style name="color" skin="generalTextColor" /> </u:selector> <u:selector name=".rich-combobox-list-decoration"> Modified: trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js =================================================================== --- trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js 2008-01-24 18:33:00 UTC (rev 5604) +++ trunk/sandbox/ui/combobox/src/main/resources/org/richfaces/renderkit/html/scripts/combobox.js 2008-01-24 19:03:09 UTC (rev 5605) @@ -1,6 +1,7 @@ if (!window.Richfaces) window.Richfaces = {}; Richfaces.ComboBox = Class.create(); + Richfaces.ComboBox.prototype = { initialize: function(combobox, listId, parentListId, fieldId, buttonId, buttonBGId, iframeId, classes, @@ -490,7 +491,7 @@ combobox.style.width = width; this.iframe.style.width = width; - positionElem.style.width = width; + //positionElem.style.width = width; this.list.style.width = parseInt(width) - Richfaces.getBorderWidth(positionElem.firstChild, "lr") - Richfaces.getPaddingWidth(positionElem.firstChild, "lr"); }, @@ -500,7 +501,7 @@ var comBottom = fieldTop + fieldHeight; var listHeight = this.list.style.height; - var top = -4; + var top = 0 ;//= -4; if (parseInt(listHeight) > (docHeight - comBottom)) { if (fieldTop > (docHeight - comBottom)) { top -= (parseInt(listHeight) + fieldHeight); Modified: trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx =================================================================== --- trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx 2008-01-24 18:33:00 UTC (rev 5604) +++ trunk/sandbox/ui/combobox/src/main/templates/combobox.jspx 2008-01-24 19:03:09 UTC (rev 5605) @@ -33,27 +33,41 @@ variables.setVariable("disabled", disabled); String listHeight = (String) component.getAttributes().get("listHeight"); - if (listHeight != null) { + if (listHeight == null || listHeight.length() == 0 || listHeight.trim().startsWith("0")) { + listHeight = "200px"; + } else { listHeight = HtmlUtil.qualifySize(listHeight); } variables.setVariable("listHeight", listHeight); - String listWidth = (String) component.getAttributes().get("listWidth"); - if (listWidth != null) { + + String width = (String) component.getAttributes().get("width"); + String correction = null; + if (width == null || (width.length() == 0) || (width.trim().startsWith("0")) ) { + width = "150px"; + + } else { + width = HtmlUtil.qualifySize(width); + } + + correction = width.substring(0,width.indexOf("px")); + correction = (Integer.parseInt(correction) - 10) + "px"; + + variables.setVariable("width", width); + variables.setVariable("correction", correction); + + String listWidth = (String) component.getAttributes().get("listWidth"); + + if (listWidth == null || listWidth.length() == 0 || listWidth.trim().startsWith("0")) { + String listCorrection = width.substring(0,width.indexOf("px")); + listCorrection = (Integer.parseInt(listCorrection) - 2) + "px"; + listWidth = listCorrection; + } else { listWidth = HtmlUtil.qualifySize(listWidth); } variables.setVariable("listWidth", listWidth); + - String width = (String) component.getAttributes().get("width"); - if (width != null) { - if ((width.length() == 0) || (width == "0")) { - width = "150"; - } else { - width = HtmlUtil.qualifySize(width); - } - } - variables.setVariable("width", width); - String inputSize = (String) component.getAttributes().get("inputSize"); variables.setVariable("inputSize", inputSize); @@ -152,14 +166,7 @@ } variables.setVariable("itemSelectedClass", itemSelectedClass); - String curWidth = null; - curWidth = listWidth; - if (listWidth == null) { - curWidth = width; - } - variables.setVariable("curWidth", curWidth); - - String buttonIcon = (String)component.getAttributes().get("buttonIcon"); + String buttonIcon = (String)component.getAttributes().get("buttonIcon"); if (buttonIcon != null && !buttonIcon.equals("")) { buttonIcon = "url('" + buttonIcon + "')"; } @@ -196,43 +203,44 @@ </jsp:scriptlet> <f:resource var="spacer" name="images/spacer.gif"/> -<div id="control#{clientId}" class="rich-combobox-font rich-combobox-shell #{styleClass}" style="width:#{listWidth};#{style}" +<div id="control#{clientId}" class="rich-combobox-list-width rich-combobox-font rich-combobox-shell rich-combobox= #{styleClass}" style="width:#{listWidth};#{style}" x:passThruWithExclusions="value,name,type,id,styleClass,class,style,size,autocomplete,disabled,onchange"> <div class="rich-combobox-list-cord"></div> - <div class="rich-combobox-font rich-combobox-shell" style="width:#{width};"> + <div class="rich-combobox-input-width rich-combobox-font rich-combobox-shell" style="width:#{width};"> <input id="comboboxField#{clientId}" name="comboboxField#{clientId}" disabled="#{disabled}" - class="rich-combobox-font-inactive rich-combobox-input-inactive #{inputDisabledClass}" type="text" + class="rich-combobox-input-width rich-combobox-font-inactive rich-combobox-input-inactive #{inputDisabledClass}" type="text" value="#{value}" size="#{inputSize}" onchange="#{component.attributes['onchange']}" onselect="#{component.attributes['onselect']}" onblur="#{component.attributes['onblur']}" - style="width:#{width}; #{inputStyle}" + style="width:#{correction}; #{inputStyle}" /> - <input id="comboBoxButtonBG#{clientId}" readonly="true" type="text" value="" class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive"/> - <input id="comboboxButton#{clientId}" readonly="true" disabled="#{disabled}" type="text" value="" style="#{buttonStyle}; background-image: #{buttonIconNormal};" + <input id="comboBoxButtonBG#{clientId}" readonly="true" type="text" value="" class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive"/> + <input id="comboboxButton#{clientId}" readonly="true" disabled="#{disabled}" type="text" value="" style="#{buttonStyle}; background-image: #{buttonIconNormal};" class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive #{buttonDisabledClass}"/> - <div class="rich-combobox-strut rich-combobox-fon" style="width:#{width}">Strut</div> + <div class="rich-combobox-input-width rich-combobox-strut rich-combobox-font" style="width:#{correction}">Strut</div> </div> + <div id="listParent#{clientId}" class="rich-combobox-list-cord #{listClass}" style="display:none; #{listStyle};"> - <iframe id="iframe#{clientId}" class="rich-combobox-list-scroll rich-combobox-list-position" frameborder="0" style="display:none; width:#{listWidth};"/> - <div class="cb_shadow"> + <iframe id="iframe#{clientId}" class="rich-combobox-list-width rich-combobox-list-scroll rich-combobox-list-position" frameborder="0" style="display:none; width:#{listWidth};"/> + <div class="rich-combobox-shadow"> <table cellpadding="0" cellspacing="0" border="0" width="255" height="109"> <tr> - <td class="cb_shadow_tl"> + <td class="rich-combobox-shadow-tl"> <img src="#{spacer}" width="10" height="1" alt="" border="0"></img><br></br> </td> - <td class="cb_shadow_tr"> + <td class="rich-combobox-shadow-tr"> <img src="#{spacer}" width="1" height="10" alt="" border="0"></img><br></br> </td> </tr> <tr> - <td class="cb_shadow_bl"> + <td class="rich-combobox-shadow-bl"> <img src="#{spacer}" width="1" height="10" alt="" border="0"></img><br></br> </td> - <td class="cb_shadow_br"> + <td class="rich-combobox-shadow-br"> <img src="#{spacer}" width="10" height="10" alt="" border="0"></img><br></br> </td> </tr> @@ -240,7 +248,7 @@ </div> <div id="listPosition#{clientId}" class="rich-combobox-list-position"> <div id="listDecoration#{clientId}" class="rich-combobox-list-decoration"> - <div id="list#{clientId}" class="rich-combobox-list-scroll" style="width:#{listWidth};"> + <div id="list#{clientId}" class="rich-combobox-list-scroll rich-combobox-list-width" style="width:#{listWidth};"> <f:call name="encodeItems"/> </div> </div>