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>