[richfaces-svn-commits] JBoss Rich Faces SVN: r5605 - in trunk/sandbox/ui/combobox/src/main: resources/org/richfaces/renderkit/html/css and 2 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Jan 24 14:03:09 EST 2008
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>
More information about the richfaces-svn-commits
mailing list