[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