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");