[richfaces-svn-commits] JBoss Rich Faces SVN: r3993 - in trunk/sandbox/ui/orderingList/src/main: resources/org/richfaces/renderkit/html/css and 2 other directories.

Wednesday, 14 November 2007


Author: vmolotkov
Date: 2007-11-14 12:40:37 -0500 (Wed, 14 Nov 2007)
New Revision: 3993

Modified:
  
trunk/sandbox/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java
  
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss
  
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js
  
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js
   trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx
Log:
new styles for component

Modified:
trunk/sandbox/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java
===================================================================
---
trunk/sandbox/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java	2007-11-14
16:53:29 UTC (rev 3992)
+++
trunk/sandbox/ui/orderingList/src/main/java/org/richfaces/renderkit/OrderingListRendererBase.java	2007-11-14
17:40:37 UTC (rev 3993)
@@ -265,7 +265,7 @@
 		
 		if (renderFacet || (captionAttr != null)) {
 			writer.startElement(HTML.DIV_ELEM, orderingList);
-			writer.writeAttribute(HTML.class_ATTRIBUTE, "ol_captionlabel
rich-ordering-list-caption", null);
+			writer.writeAttribute(HTML.class_ATTRIBUTE, "ol_label ol_out_label
rich-ordering-list-caption", null);
 			if (renderFacet) {
 				renderChild(context, facetEl);
 			} else {
@@ -300,11 +300,16 @@
 		String clientId = orderingList.getClientId(context);
 		ResponseWriter writer = context.getResponseWriter();
 
+		writer.startElement(HTML.DIV_ELEM, orderingList);
+		writer.writeAttribute(HTML.class_ATTRIBUTE, "ol_button_layout", null);
+		
 		for (int i = 0; i < HELPERS.length; i++) {
 			if (HELPERS[i].isRendered(context, orderingList)) {
 				encodeControlFacet(context, orderingList, HELPERS[i], clientId, writer);
 			}
 		}
+		
+		writer.endElement(HTML.DIV_ELEM);
 	}
 	
 	protected void encodeControlFacet(FacesContext context, UIOrderingList orderingList,
ControlsHelper helper, String clientId, ResponseWriter writer) 
@@ -340,6 +345,8 @@
 		
 		if (encodeDiv) {
 			writer.startElement(HTML.DIV_ELEM, orderingList);
+			writer.writeAttribute(HTML.class_ATTRIBUTE, "ol_button_border", null);
+			writer.startElement(HTML.DIV_ELEM, orderingList);
 			writer.writeAttribute(HTML.class_ATTRIBUTE, "ol_button", null);
 		}
 		
@@ -378,6 +385,7 @@
 		
 		if (encodeDiv) {
 			writer.endElement(HTML.DIV_ELEM);
+			writer.endElement(HTML.DIV_ELEM);
 		}
 	}
 	

Modified:
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss
===================================================================
---
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss	2007-11-14
16:53:29 UTC (rev 3992)
+++
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/css/orderingList.xcss	2007-11-14
17:40:37 UTC (rev 3993)
@@ -4,31 +4,30 @@
    xmlns="http://www.w3.org/1999/xhtml" >
 
 <f:verbatim><![CDATA[
+
+
+	.ol_button_light{background : url(ol_images/bg_header.png) top left  #C6D6EA repeat-x;
border : 1px solid #E79A00;cursor : pointer;  padding : 1px; font-family : Arial;
font-size :11px;}
+	.ol_button_dis{background : #bfbfc0; border : 1px solid #bfbfc0; margin-bottom : 3px; 
padding : 1px}
+	.ol_button_press{background : url(ol_images/bg_press.png) top left repeat-x #EAF0F8;
border : 1px solid #E79A00; padding : 2px 0px 0px 2px;font-family : Arial; font-size
:11px;}
+	.ol_center_button_col_valign{vertical-align : middle}
+	.ol_right_button_col_valign{vertical-align : middle}
+	.ol_button_content{font-family : Arial; font-size :11px; padding : 0px 0px 0px 0px;
text-align : center;}
+	
 .ol_caption {
 	padding : 1px;
 	height: 8px;
 }
 
-.ol_captionlabel {
-	font-family : Arial; 
-	font-size :11px; 
-	font-weight : bold; 
-	padding : 3px 3px 3px 8px;
-}
+.ol_body{border : 0px solid #bfbfc0;}
 
-.ol_body {
-	border : 1px solid #bfbfc0; 
-	background-color : #e7f2fb;
-}
+.ol_label{font-family : Arial; font-size :11px; font-weight : bold;}
 
-.ol_list {
-	/*width : 600px; 
-	height : 650px;*/ 
-	background : #FFFFFF; 
-	border : 1px solid #bfbfc0; 
-	margin : 0px 8px 8px 8px;
-}
+.ol_out_label{padding : 3px 3px 3px 8px}
 
+.ol_list{overflow : auto; width : 200px; height : 150px; background : #FFFFFF; border :
1px solid #bfbfc0;}
+
+.ol_outputlist{ margin : 0px 8px 8px 8px;}
+
 .ol_list_content {
 	overflow : auto; 
 	width: 300px;
@@ -46,14 +45,12 @@
 	vertical-align : top;
 }
 
-.ol_button {
-	background : #4A75B5; 
-	border : 1px solid #bfbfc0; 
-	margin-bottom : 3px; 
-	cursor : pointer;  
-	padding : 1px;
-}
+.ol_button_layout{padding : 15px 8px 15px 0px;}
 
+.ol_button_border{border : 1px solid #bfbfc0; margin-bottom : 3px;}
+
+.ol_button{background : url(ol_images/bg_header.png) top left  #C6D6EA repeat-x; cursor :
pointer;  padding : 2px; font-family : Arial; font-size :11px;}
+
 .ol_button_dis {
 	background : #bfbfc0; 
 	border : 1px solid #bfbfc0; 
@@ -72,18 +69,7 @@
 	width  : 100%;
 }
 
-.ol_internal_header_tab th {
-	background : #4A75B5; 
-	color : #FFFFFF; 
-	
-	font-family : Arial; 
-	font-size :11px; 
-	font-weight : normal; 
-	border-bottom : 1px solid #bfbfc0;
-	border-right : 1px solid #bfbfc0; 
-	padding : 2px;
-	white-space: nowrap;
-}
+.ol_internal_header_tab th{background : url(ol_images/bg_header.png) top left repeat-x
#C6D6EA; color : #000000; font-family : Arial; font-size :11px; font-weight : normal;
border-bottom : 1px solid #bfbfc0;border-right : 1px solid #bfbfc0;border-left : 1px solid
#EAF0F8;border-top : 1px solid #FFFFFF; padding : 2px}
 
 .ol_internal_header_tab .ol_endcol {
 	border-right : 0px;
@@ -94,28 +80,15 @@
 	width  : 100%;
 }
 
-.ol_internal_tab .ol_endcol {
-	border-right : 0px;
-	white-space: nowrap;
-}
+.ol_internal_tab .ol_endcol{border-right : 0px}
 
-.ol_internal_tab td {
-	color : #000000; 
-	font-family : Arial; 
-	font-size :11px; 
-	border-bottom : 1px solid #bfbfc0;
-	border-right : 1px solid #bfbfc0; 
-	padding : 2px;
-	white-space: nowrap;
-}
+.ol_internal_tab td{font-family : Arial; font-size :11px; border-bottom : 1px solid
#bfbfc0;border-top : 1px solid #FFFFFF; padding : 2px}
 
 
-.ol_internal_tab tr.ol_select {
-	background : #EAF0F8;
-}
+.ol_internal_tab tr.ol_select{background : #EAF0F8}
 
 .ol_internal_tab tr.ol_active {
-	background : #C6D6EA;
+	background :   #EAF0F8; color : #4A75B5;
 }
 
 .ol_internal_tab tr.ol_normal {

Modified:
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js
===================================================================
---
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js	2007-11-14
16:53:29 UTC (rev 3992)
+++
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/OrderingList.js	2007-11-14
17:40:37 UTC (rev 3993)
@@ -53,16 +53,6 @@
 Shuttle.ASC = "acs";
 Shuttle.DESC = "desc";
 
-Shuttle.SELECTED_ITEM_CLASS = "ol_select rich-ordering-list-row-selected";
-Shuttle.NORMAL_ITEM_CLASS = "ol_normal rich-ordering-list-row";
-Shuttle.ACTIVE_ITEM_CLASS = "ol_active rich-ordering-list-row-active";
-Shuttle.DISABLED_ITEM_CLASS = "rich-ordering-list-row-disabled";
-
-Shuttle.SELECTED_SUBITEM_CLASS = "rich-ordering-list-cell-selected";
-Shuttle.NORMAL_SUBITEM_CLASS = "rich-ordering-list-cell";
-Shuttle.ACTIVE_SUBITEM_CLASS = "rich-ordering-list-cell-active";
-Shuttle.DISABLED_SUBITEM_CLASS = "rich-ordering-list-cell-disabled";
-
 Shuttle.CONTROL_SET = ["A", "INPUT", "TEXTAREA",
"SELECT", "BUTTON"];
 
 Shuttle.ORDERING_LIST_CLASSES = {
@@ -140,13 +130,13 @@
 	for (var i = 0; i < rows.length; i++) {
 		var row = rows[i];
 		id = row.id.split(containerId + ":")[1];
-		this.shuttleItems[i] = new SelectItem(null, (id || i), 
-											  ((row.className == Shuttle.SELECTED_ITEM_CLASS) ? true : false), 
-											  row);
-		if (row.className == Shuttle.SELECTED_ITEM_CLASS) {
+		this.shuttleItems[i] 
+				= new Richfaces.SelectItem(null, (id || i), 
+								 		   ((Richfaces.SelectItems.isSelected(row)) ? true : false), row);
+		if (Richfaces.SelectItems.isSelected(row)) {
 			this.selectedItems.push(row);
 		}									  
-		if (row.className == Shuttle.ACTIVE_ITEM_CLASS) {
+		if (Richfaces.SelectItems.isActive(row)) {
 			this.activeItem = row;
 		}
 	}	
@@ -287,7 +277,7 @@
 			this.selectionItem(activeElem);
 			this.activeItem = activeElem;		
 		}
-		this.activeItem.className = Shuttle.ACTIVE_ITEM_CLASS;
+		Richfaces.SelectItems.doActive(this.activeItem);
 		this.saveState();
 		this.controlListManager();
 		this.setFocus();
@@ -320,7 +310,7 @@
 					this.selectAll();
 					Shuttle.stopPropogation(event);
 				  } 
-				  this.activeItem.className = Shuttle.ACTIVE_ITEM_CLASS;
+				  Richfaces.SelectItems.doActive(this.activeItem);
 				  this.saveState();
 				  break; 
 		case 32 : this.invertSelection(event); this.saveState(); break; //blank
@@ -371,7 +361,7 @@
 	
 	this.resetMarked();
 	
-	newItem.className = Shuttle.ACTIVE_ITEM_CLASS;
+	Richfaces.SelectItems.doActive(newItem);
 	newItem._selected = true;
 	this.activeItem = newItem;
 	this.selectedItems.push(newItem);
@@ -416,10 +406,10 @@
 		this.selectedItems.push(markedShuttleItem);
 	}
 	
-	this.activeItem.className = Shuttle.SELECTED_ITEM_CLASS;
+	Richfaces.SelectItems.doSelect(this.activeItem);
 	
 	if (this.activeItem && !this.getSelectItemByNode(this.activeItem)._selected) {
-		this.activeItem.className = Shuttle.NORMAL_ITEM_CLASS;
+		Richfaces.SelectItems.doNormal(this.activeItem);
 	} 
 }
 
@@ -448,7 +438,7 @@
 Shuttle.prototype.selectItemRange = function(startIndex, endIndex) {
 	var rows = this.shuttleTbody.rows;
 	for (var i = startIndex; i <= endIndex; i++) {
-		rows[i].className = Shuttle.SELECTED_ITEM_CLASS;
+		Richfaces.SelectItems.doSelect(rows[i]);
 		this.selectedItems.push(rows[i]);
 		this.getSelectItemByNode(rows[i])._selected = true;
 	}	
@@ -458,7 +448,7 @@
 	var rows = this.shuttleTbody.rows;
 	for (var i = 0; i < rows.length; i++) {
 		var shuttleItem = rows[i]; 
-		shuttleItem.className = Shuttle.NORMAL_ITEM_CLASS;
+		Richfaces.SelectItems.doNormal(shuttleItem);
 		this.getSelectItemByNode(shuttleItem)._selected = false; //FIXME
 	}	
 	this.selectedItems.length = 0;
@@ -542,10 +532,6 @@
 	selectItem._node = tr;
 }*/
 
-Shuttle.prototype.isTopControlEnabled = function() {
-	
-}
-
 Shuttle.prototype.toString = function() {
 	var result = new Array();
 	for (var i = 0; i < this.shuttleItems.length; i++) {

Modified:
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js
===================================================================
---
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js	2007-11-14
16:53:29 UTC (rev 3992)
+++
trunk/sandbox/ui/orderingList/src/main/resources/org/richfaces/renderkit/html/scripts/SelectItem.js	2007-11-14
17:40:37 UTC (rev 3993)
@@ -1,7 +1,78 @@
-SelectItem = function(label, id, selected, node) {
-	this._label = label;
-	this._node = node; 
-	this._node.item = this;
-	this._id = id;
-	this._selected = selected;
-}
\ No newline at end of file
+if(!window.Richfaces) var Richfaces = function(){};
+
+
+Richfaces.SelectItems = {
+	CLASSES : {
+		ROW : {
+			ACTIVE   : "ol_active rich-ordering-list-row-active",
+			SELECTED : "ol_select rich-ordering-list-row-selected",
+			DISABLED : "rich-ordering-list-row-disabled",
+			NORMAL   : "ol_normal rich-ordering-list-row"
+		},
+		CELL : {
+			ACTIVE   : "rich-ordering-list-cell-active",
+			SELECTED : "rich-ordering-list-cell-selected",
+			DISABLED : "rich-ordering-list-cell-disabled",
+			NORMAL   : "rich-ordering-list-cell"
+		}
+	},
+
+	doActive : function(row) {
+		Richfaces.SelectItems
+				 .doChange(row, 
+						   Richfaces.SelectItems.CLASSES.ROW.ACTIVE, 
+						   Richfaces.SelectItems.CLASSES.CELL.ACTIVE);
+	},
+	
+	doSelect : function(row) {
+		Richfaces.SelectItems
+				 .doChange(row, 
+						   Richfaces.SelectItems.CLASSES.ROW.SELECTED, 
+						   Richfaces.SelectItems.CLASSES.CELL.SELECTED);
+	},
+	
+	doNormal : function(row) {
+		Richfaces.SelectItems
+				 .doChange(row, 
+						   Richfaces.SelectItems.CLASSES.ROW.NORMAL, 
+						   Richfaces.SelectItems.CLASSES.CELL.NORMAL);
+	},
+	
+	isSelected : function(row) {
+		return Richfaces.SelectItems.compareStates(row,
Richfaces.SelectItems.CLASSES.ROW.SELECTED);
+	},
+	
+	isActive : function(row) {
+		return Richfaces.SelectItems.compareStates(row,
Richfaces.SelectItems.CLASSES.ROW.ACTIVE);
+	},
+	
+	doChange : function(row, classNameRow, classNameCell) {
+		Richfaces.SelectItems.doChangeNode(row, classNameRow);
+		var cells = row.cells;
+		for (var cell in cells) {
+			Richfaces.SelectItems.doChangeNode(cell, classNameCell);
+		}
+	},
+	
+	doChangeNode : function(node, className) {
+		node.className = className;
+	},
+	
+	compareStates : function(row, className) {
+		if (row.className == className) {
+			return true;
+		}
+		return false;
+	}
+}
+
+Richfaces.SelectItem = Class.create();
+Richfaces.SelectItem.prototype = {
+	initialize : function(label, id, selected, node) {
+		this._label = label;
+		this._node = node; 
+		this._node.item = this;
+		this._id = id;
+		this._selected = selected;
+	}
+}

Modified:
trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx
===================================================================
---
trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx	2007-11-14
16:53:29 UTC (rev 3992)
+++
trunk/sandbox/ui/orderingList/src/main/templates/org/richfaces/htmlOrderingList.jspx	2007-11-14
17:40:37 UTC (rev 3993)
@@ -34,7 +34,7 @@
 				</tr>
 				<tr>
 					<td>
-						<div id="#{clientId}headerBox" class="ol_list">
+						<div id="#{clientId}headerBox" class="ol_list
ol_outputlist">
 							<div class="ol_list_header" style="width:
#{component.attributes['listHeight']}px;">
 								<table id="#{clientId}internal_header_tab"
class="ol_internal_header_tab rich-ordering-list-items"
cellpadding="0" cellspacing="0">
 									<f:call name="encodeHeader"/>
@@ -52,7 +52,12 @@
 						</div>
 					</td>
 					<td class="ol_button_layout">
-						<f:call name="encodeControlsFacets"/>
+						<div class="ol_button_layout">
+							<div class="ol_button_border"><div class="ol_button"
onmouseover="this.className='ol_button_light'"
onmousedown="this.className='ol_button_press'"
onmouseup="this.className='ol_button'"
onmouseout="this.className='ol_button'"><div
class="ol_button_content"><img src="img/up.gif"
width="15" height="15" alt=""
border="0"/></div></div></div>
+							<div class="ol_button_border"><div class="ol_button"
onmouseover="this.className='ol_button_light'"
onmousedown="this.className='ol_button_press'"
onmouseup="this.className='ol_button'"
onmouseout="this.className='ol_button'"><div
class="ol_button_content"><img src="img/down.gif"
width="15" height="15" alt=""
border="0"/></div></div></div>
+							<div class="ol_button_border"><div class="ol_button"
onmouseover="this.className='ol_button_light'"
onmousedown="this.className='ol_button_press'"
onmouseup="this.className='ol_button'"
onmouseout="this.className='ol_button'"><div
class="ol_button_content"><img src="img/top.gif"
width="15" height="15" alt=""
border="0"/></div></div></div>
+							<div class="ol_button_border"><div class="ol_button"
onmouseover="this.className='ol_button_light'"
onmousedown="this.className='ol_button_press'"
onmouseup="this.className='ol_button'"
onmouseout="this.className='ol_button'"><div
class="ol_button_content"><img src="img/bottom.gif"
width="15" height="15" alt=""
border="0"/></div></div></div>
+						</div>
 						<f:clientId var="clientId"/>
 					</td>
 				</tr>


    

2026

2025

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

2009

2008

2007

[richfaces-svn-commits] JBoss Rich Faces SVN: r3993 - in trunk/sandbox/ui/orderingList/src/main: resources/org/richfaces/renderkit/html/css and 2 other directories.