Author: pyaschenko
Date: 2009-04-14 10:09:46 -0400 (Tue, 14 Apr 2009)
New Revision: 13565
Modified:
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/css/colorPicker.xcss
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js
trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx
Log:
https://jira.jboss.org/jira/browse/RF-6752
Modified:
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/css/colorPicker.xcss
===================================================================
---
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/css/colorPicker.xcss 2009-04-14
13:44:09 UTC (rev 13564)
+++
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/css/colorPicker.xcss 2009-04-14
14:09:46 UTC (rev 13565)
@@ -4,14 +4,14 @@
xmlns="http://www.w3.org/1999/xhtml" >
<f:verbatim>
<![CDATA[
-.rich-colorPicker-wrapper{
+.rich-color-picker-wrapper{
display:none;
overflow:hidden;
position:absolute;
width:350px;
z-index: 3;
}
-.rich-colorPicker-ext{
+.rich-color-picker-ext{
border: 1px solid;
position: relative;
height: 170px;
@@ -19,10 +19,10 @@
margin: 0px;
}
-.rich-colorPicker-rainbow div{
+.rich-color-picker-rainbow div{
background: transparent no-repeat scroll left top;
}
-.rich-colorPicker-color {
+.rich-color-picker-color {
background:#FF0000 none repeat scroll 0 0;
cursor:crosshair;
left:7px;
@@ -34,7 +34,7 @@
border: 1px solid;
}
-.rich-colorPicker-color div {
+.rich-color-picker-color div {
left:0;
position:absolute;
top:0;
@@ -42,7 +42,7 @@
width:150px;
}
-.rich-colorPicker-color div div {
+.rich-color-picker-color div div {
left:0;
top:0;
position:absolute;
@@ -52,7 +52,7 @@
height:11px;
}
-.rich-colorPicker-rainbow{
+.rich-color-picker-rainbow{
cursor:n-resize;
height:150px;
left:160px;
@@ -61,7 +61,7 @@
width:35px;
text-align: center;
}
-.rich-colorPicker-rainbow div{
+.rich-color-picker-rainbow div{
height:9px;
left:1px;
margin:-4px 0 0;
@@ -70,7 +70,7 @@
width:35px;
}
-.rich-colorPicker-new-color, .rich-colorPicker-current-color{
+.rich-color-picker-new-color, .rich-color-picker-current-color{
position:absolute;
top:7px;
width: 60px;
@@ -78,22 +78,22 @@
border: 1px solid;
}
-.rich-colorPicker-current-color{
+.rich-color-picker-current-color{
right:7px;
top:7px;
}
-.rich-colorPicker-new-color{
+.rich-color-picker-new-color{
left:198px;
}
-.rich-colorPicker-hex-wrapper {
+.rich-color-picker-hex-wrapper {
height:22px;
left:202px;
position:absolute;
top:119px;
}
-.rich-colorPicker-rgb-wrapper{
+.rich-color-picker-rgb-wrapper{
left:184px;
position:absolute;
top:55px;
@@ -103,7 +103,7 @@
margin-bottom: 2px
}
-.rich-colorPicker-hsb-wrapper{
+.rich-color-picker-hsb-wrapper{
right:7px;
position:absolute;
top:55px;
@@ -112,46 +112,46 @@
text-align: right;
margin-bottom: 2px
}
-.rich-colorPicker-hsb-h, .rich-colorPicker-rgb-r{
+.rich-color-picker-hsb-h, .rich-color-picker-rgb-r{
top:45px;
}
-.rich-colorPicker-hsb-s, .rich-colorPicker-rgb-g{
+.rich-color-picker-hsb-s, .rich-color-picker-rgb-g{
top:70px;
}
-.rich-colorPicker-hsb-b, .rich-colorPicker-rgb-b{
+.rich-color-picker-hsb-b, .rich-color-picker-rgb-b{
top:95px;
}
-.rich-colorPicker-rgb-wrapper label {
+.rich-color-picker-rgb-wrapper label {
padding-top: 2px;
font-size: 16px;
}
-.rich-colorPicker-colors-input{
+.rich-color-picker-colors-input{
width: 35px;
border: 1px solid;
}
-.rich-colorPicker-hex-wrapper input{
+.rich-color-picker-hex-wrapper input{
width:60px;
font-size: 13px;
}
-.rich-colorPicker-submit, .rich-colorPicker-cancel{
+.rich-color-picker-submit, .rich-color-picker-cancel{
position:absolute;
right:75px;
top:144px;
}
-.rich-colorPicker-cancel{
+.rich-color-picker-cancel{
right:7px;
}
-.rich-colorPicker-span input{
+.rich-color-picker-span input{
border: 1px solid;
width:130px;
vertical-align:middle;
}
-.rich-colorPicker-icon {
+.rich-color-picker-icon {
display:inline;
cursor:pointer;
height:16px;
@@ -159,7 +159,7 @@
vertical-align:middle;
border: 1px solid;
}
-.rich-colorPicker-icon-disabled{
+.rich-color-picker-icon-disabled{
background-color: #cccccc;
height:16px;
width:16px;
@@ -167,12 +167,12 @@
]]>
</f:verbatim>
- <u:selector name=".rich-colorPicker-ext">
+ <u:selector name=".rich-color-picker-ext">
<u:style name="border-color" skin="panelBorderColor"/>
<u:style name="background-color"
skin="generalBackgroundColor"/>
<u:style name="font-family" skin="generalFamilyFont"/>
</u:selector>
- <u:selector name=".rich-colorPicker-span input">
+ <u:selector name=".rich-color-picker-span input">
<u:style name="background-repeat" value="repeat-x" />
<u:style name="background-image">
<f:resource
f:key="org.richfaces.renderkit.html.images.InputBackgroundImage" />
@@ -181,45 +181,45 @@
<u:style name="font-size" skin="generalSizeFont"/>
<u:style name="font-family" skin="generalFamilyFont"/>
</u:selector>
- <u:selector name=".rich-colorPicker-ext input">
+ <u:selector name=".rich-color-picker-ext input">
<u:style name="color" skin="controlTextColor"/>
<u:style name="background-color"
skin="controlBackgroundColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-ext label">
+ <u:selector name=".rich-color-picker-ext label">
<u:style name="color" skin="generalSizeFont"/>
<u:style name="font-size" skin="generalSizeFont"/>
<u:style name="font-family" skin="generalFamilyFont"/>
</u:selector>
- <u:selector name=".rich-colorPicker-icon">
+ <u:selector name=".rich-color-picker-icon">
<u:style name="border-color" skin="panelBorderColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-color">
+ <u:selector name=".rich-color-picker-color">
<u:style name="border-color" skin="panelBorderColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-new-color">
+ <u:selector name=".rich-color-picker-new-color">
<u:style name="border-color" skin="panelBorderColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-current-color">
+ <u:selector name=".rich-color-picker-current-color">
<u:style name="border-color" skin="panelBorderColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-cancel">
+ <u:selector name=".rich-color-picker-cancel">
<u:style name="font-size" skin="buttonFontSize"/>
<u:style name="font-family" skin="buttonFamilyFont"/>
<u:style name="color" skin="headerTextColor"/>
<u:style name="border-color" skin="headerBackgroundColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-submit">
+ <u:selector name=".rich-color-picker-submit">
<u:style name="font-size" skin="buttonFontSize"/>
<u:style name="font-family" skin="buttonFamilyFont"/>
<u:style name="color" skin="headerTextColor"/>
<u:style name="border-color" skin="headerBackgroundColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-color div">
+ <u:selector name=".rich-color-picker-color div">
<u:style name="background-image">
<f:resource
f:key="/org/richfaces/renderkit/html/images/colorpicker_overlay.png" />
</u:style>
</u:selector>
- <u:selector name=".rich-colorPicker-colors-input">
+ <u:selector name=".rich-color-picker-colors-input">
<u:style name="font-size" skin="generalSizeFont"/>
<u:style name="font-family" skin="generalFamilyFont"/>
<u:style name="color" skin="generalTextColor"/>
@@ -227,17 +227,17 @@
<u:style name="background-color"
skin="controlBackgroundColor"/>
</u:selector>
- <u:selector name=".rich-colorPicker-color div div">
+ <u:selector name=".rich-color-picker-color div div">
<u:style name="background-image">
<f:resource
f:key="/org/richfaces/renderkit/html/images/colorpicker_select.gif" />
</u:style>
</u:selector>
- <u:selector name=".rich-colorPicker-rainbow div">
+ <u:selector name=".rich-color-picker-rainbow div">
<u:style name="background-image">
<f:resource f:key="/org/richfaces/renderkit/html/images/rangearrows.gif"
/>
</u:style>
</u:selector>
- <u:selector name=".rich-colorPicker-submit, .rich-colorPicker-cancel">
+ <u:selector name=".rich-color-picker-submit,
.rich-color-picker-cancel">
<u:style name="color" skin="headerTextColor" />
<u:style name="border-color" skin="panelBorderColor" />
<u:style name="font-size" skin="generalSizeFont" />
Modified:
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js
===================================================================
---
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js 2009-04-14
13:44:09 UTC (rev 13564)
+++
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js 2009-04-14
14:09:46 UTC (rev 13565)
@@ -146,21 +146,21 @@
- this.selector =
this.picker.find('div.rich-colorPicker-color').bind('mousedown',
function(e) { return self._downSelector.call(self, e); });
+ this.selector =
this.picker.find('div.rich-color-picker-color').bind('mousedown',
function(e) { return self._downSelector.call(self, e); });
this.selectorIndic = this.selector.find('div div');
- this.hue = this.picker.find('div.rich-colorPicker-rainbow div');
- this.picker.find('div.rich-colorPicker-rainbow').bind('mousedown',
function(e) { return self._downHue.call(self, e); });
+ this.hue = this.picker.find('div.rich-color-picker-rainbow div');
+ this.picker.find('div.rich-color-picker-rainbow').bind('mousedown',
function(e) { return self._downHue.call(self, e); });
- this.newColor = this.picker.find('div.rich-colorPicker-new-color');
- this.currentColor = this.picker.find('div.rich-colorPicker-current-color');
- this.iconColor = $(o.clientId.toString()+' .rich-colorPicker-icon');
+ this.newColor = this.picker.find('div.rich-color-picker-new-color');
+ this.currentColor = this.picker.find('div.rich-color-picker-current-color');
+ this.iconColor = $(o.clientId.toString()+' .rich-color-picker-icon');
- this.picker.find('.rich-colorPicker-submit')
+ this.picker.find('.rich-color-picker-submit')
.bind('mouseenter', function(e) { return self._enterSubmit.call(self, e); })
.bind('mouseleave', function(e) { return self._leaveSubmit.call(self, e); })
.bind('click', function(e) { return self._clickSubmit.call(self, e); });
- this.picker.find('.rich-colorPicker-cancel')
+ this.picker.find('.rich-color-picker-cancel')
.bind('mouseenter', function(e) { return self._enterCancel.call(self, e); })
.bind('mouseleave', function(e) { return self._leaveCancel.call(self, e); })
.bind('click', function(e) { return self._clickCancel.call(self, e); });
@@ -310,20 +310,20 @@
this._trigger('change', e, this._createEventArgument(col));
},
_blur: function(e) {
- this.fields.parent().removeClass('rich-colorPicker-focus');
+ this.fields.parent().removeClass('rich-color-picker-focus');
},
_focus: function(e) {
this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65;
- this.fields.parent().removeClass('rich-colorPicker-focus');
- $(e.target.parentNode).addClass('rich-colorPicker-focus');
+ this.fields.parent().removeClass('rich-color-picker-focus');
+ $(e.target.parentNode).addClass('rich-color-picker-focus');
},
_downHue: function(e) {
this.currentHue = {
- y: this.picker.find('div.rich-colorPicker-rainbow').offset().top
+ y: this.picker.find('div.rich-color-picker-rainbow').offset().top
};
this._change.apply(this, [e, this
@@ -358,7 +358,7 @@
var self = this;
this.currentSelector = {
- pos: this.picker.find('div.rich-colorPicker-color').offset()
+ pos: this.picker.find('div.rich-color-picker-color').offset()
};
this._change.apply(this, [e, this
@@ -395,16 +395,16 @@
return false;
},
_enterSubmit: function(e) {
- this.picker.find('.rich-colorPicker-submit').addClass('rich-colorPicker-focus');
+ this.picker.find('.rich-color-picker-submit').addClass('rich-color-picker-focus');
},
_leaveSubmit: function(e) {
- this.picker.find('.rich-colorPicker-submit').removeClass('rich-colorPicker-focus');
+ this.picker.find('.rich-color-picker-submit').removeClass('rich-color-picker-focus');
},
_enterCancel: function(e) {
- this.picker.find('.rich-colorPicker-cancel').addClass('rich-colorPicker-focus');
+ this.picker.find('.rich-color-picker-cancel').addClass('rich-color-picker-focus');
},
_leaveCancel: function(e) {
- this.picker.find('.rich-colorPicker-cancel').removeClass('rich-colorPicker-focus');
+ this.picker.find('.rich-color-picker-cancel').removeClass('rich-color-picker-focus');
},
_clickSubmit: function(e) {
Modified: trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx
===================================================================
--- trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx 2009-04-14
13:44:09 UTC (rev 13564)
+++ trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx 2009-04-14
14:09:46 UTC (rev 13565)
@@ -23,7 +23,7 @@
<f:call name="addPopupToAjaxRendered" />
- <span id="#{clientId}"
class="rich-colorPicker-span" x:passThruWithExclusions="value,name,type,id,styleClass,class,style">
+ <span id="#{clientId}"
class="rich-color-picker-span" x:passThruWithExclusions="value,name,type,id,styleClass,class,style">
<input readonly="readonly" type="text"
name="#{clientId}" value="#{value}"/>
<jsp:scriptlet><![CDATA[
if(component.getFacet("icon")!=null &&
component.getFacet("icon").isRendered()) {
@@ -32,20 +32,20 @@
<jsp:scriptlet><![CDATA[
}else{
]]></jsp:scriptlet>
- <img src="#{arrow}" class="rich-colorPicker-icon
#{component.attributes['iconClass']}"
style="#{component.attributes['iconStyle']}"
vertical-align="middle"/>
+ <img src="#{arrow}" class="rich-color-picker-icon
#{component.attributes['iconClass']}"
style="#{component.attributes['iconStyle']}"
vertical-align="middle"/>
<jsp:scriptlet><![CDATA[
}
]]></jsp:scriptlet>
</span>
-<div id="#{clientId}-colorPicker-popup"
class="rich-colorPicker-wrapper">
- <div class="rich-colorPicker-ext">
- <div class="rich-colorPicker-color">
+<div id="#{clientId}-colorPicker-popup"
class="rich-color-picker-wrapper">
+ <div class="rich-color-picker-ext">
+ <div class="rich-color-picker-color">
<div>
<div></div>
</div>
</div>
- <div class="rich-colorPicker-rainbow">
+ <div class="rich-color-picker-rainbow">
<img src="#{rainbow}" alt="rainbow" />
<jsp:scriptlet>
<![CDATA[if(component.getFacet("arrows")!=null &&
component.getFacet("arrows").isRendered()) {]]>
@@ -65,43 +65,43 @@
</div>
- <div class="rich-colorPicker-new-color"></div>
- <div class="rich-colorPicker-current-color"></div>
- <div class="rich-colorPicker-hex-wrapper">
- <label for="rich-colorPicker-hex-wrapper"
title="hex">#:</label>
- <input id="#{clientId}-colorPicker-hex"
class="rich-colorPicker-colors-input" type="text"
maxlength="6" size="6" />
+ <div class="rich-color-picker-new-color"></div>
+ <div class="rich-color-picker-current-color"></div>
+ <div class="rich-color-picker-hex-wrapper">
+ <label for="rich-color-picker-hex-wrapper"
title="hex">#:</label>
+ <input id="#{clientId}-colorPicker-hex"
class="rich-color-picker-colors-input" type="text"
maxlength="6" size="6" />
</div>
- <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-r">
+ <div class="rich-color-picker-rgb-wrapper rich-color-picker-rgb-r">
<label for="rgb">R:</label>
- <input id="#{clientId}-colorPicker-rgb-r"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-rgb-r"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-g">
+ <div class="rich-color-picker-rgb-wrapper rich-color-picker-rgb-g">
<label for="rgb-g">G:</label>
- <input id="#{clientId}-colorPicker-rgb-g"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-rgb-g"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-b">
+ <div class="rich-color-picker-rgb-wrapper rich-color-picker-rgb-b">
<label for="rgb-b">B:</label>
- <input id="#{clientId}-colorPicker-rgb-b"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-rgb-b"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <div class="rich-colorPicker-hsb-h rich-colorPicker-hsb-wrapper">
+ <div class="rich-color-picker-hsb-h rich-color-picker-hsb-wrapper">
<label for="hsb-h">H:</label>
- <input id="#{clientId}-colorPicker-hsb-h"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-hsb-h"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <div class="rich-colorPicker-hsb-s rich-colorPicker-hsb-wrapper">
+ <div class="rich-color-picker-hsb-s rich-color-picker-hsb-wrapper">
<label for="hsb-s">S:</label>
- <input id="#{clientId}-colorPicker-hsb-s"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-hsb-s"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <div class="rich-colorPicker-hsb-b rich-colorPicker-hsb-wrapper">
+ <div class="rich-color-picker-hsb-b rich-color-picker-hsb-wrapper">
<label for="hsb-b">B:</label>
- <input id="#{clientId}-colorPicker-hsb-b"
class="rich-colorPicker-colors-input" type="text"
maxlength="3" size="2" />
+ <input id="#{clientId}-colorPicker-hsb-b"
class="rich-color-picker-colors-input" type="text"
maxlength="3" size="2" />
</div>
- <button type="button" class="rich-colorPicker-submit"
name="submit">Apply</button>
- <button type="button" class="rich-colorPicker-cancel"
name="cancel">Cancel</button>
+ <button type="button" class="rich-color-picker-submit"
name="submit">Apply</button>
+ <button type="button" class="rich-color-picker-cancel"
name="cancel">Cancel</button>
</div>
</div>
<div style="display: none;"
id="#{clientId}-colorPicker-script">
<script type="text/javascript">
- jQuery('div.rich-colorPicker-color').pngFix();
+ jQuery('div.rich-color-picker-color').pngFix();
<jsp:scriptlet><![CDATA[
Boolean flat = (Boolean) component.getAttributes().get("flat");
colorMode = (String) component.getAttributes().get("colorMode");