Author: abelevich Date: 2008-02-12 10:23:25 -0500 (Tue, 12 Feb 2008) New Revision: 6029 Modified: trunk/sandbox/ui/inplaceInput/src/main/config/resources/resource-config.xml trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx Log: add generated icons, backgrounds. Modified: trunk/sandbox/ui/inplaceInput/src/main/config/resources/resource-config.xml =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/config/resources/resource-config.xml 2008-02-12 15:10:31 UTC (rev 6028) +++ trunk/sandbox/ui/inplaceInput/src/main/config/resources/resource-config.xml 2008-02-12 15:23:25 UTC (rev 6029) @@ -1,16 +1,21 @@ <?xml version="1.0" encoding="UTF-8"?> <resource-config> - <resource class="org.richfaces.renderkit.images.OkControlIcon"> <name>org.richfaces.renderkit.images.OkControlIcon</name> </resource> - <resource class="org.richfaces.renderkit.images.EditIcon"> <name>org.richfaces.renderkit.images.EditIcon</name> </resource> - <resource class="org.richfaces.renderkit.images.CancelControlIcon"> <name>org.richfaces.renderkit.images.CancelControlIcon</name> </resource> - -</resource-config> + <resource class="org.richfaces.renderkit.html.images.SpinnerButtonGradient"> + <name>org.richfaces.renderkit.html.images.SpinnerButtonGradient</name> + </resource> + <resource class="org.richfaces.renderkit.html.images.ComboBoxButtonPressGradient"> + <name>org.richfaces.renderkit.html.images.ComboBoxButtonPressGradient</name> + </resource> + <resource class="org.richfaces.renderkit.html.images.ComboBoxListShadow"> + <name>org.richfaces.renderkit.html.images.ComboBoxListShadow</name> + </resource> +</resource-config> \ No newline at end of file Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-12 15:10:31 UTC (rev 6028) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-12 15:23:25 UTC (rev 6029) @@ -4,79 +4,146 @@ xmlns="http://www.w3.org/1999/xhtml" > <f:verbatim> -<![CDATA[ -.rich-inplace { -} - -.rich-inplace-changed { - background-color:#F1F1F1; - border-bottom:1px dashed #000000; - padding-left:3px; - padding-right:3px; - white-space:nowrap; + <![CDATA[ + .rich-inplace { + } - background-image:url(/inplaceInput-sample/images/mark_open.gif); - background-position:left top; - background-repeat:no-repeat; -} + .rich-inplace-changed { + background-color:#F1F1F1; + border-bottom:1px dashed #000000; + padding-left:3px; + padding-right:3px; + white-space:nowrap; + background-position:left top; + background-repeat:no-repeat; + } + + .rich-inplace-view { + background-color:#F1F1F1; + border-bottom:1px dashed #000000; + padding-left:3px; + padding-right:3px; + white-space:nowrap; + } + + .rich-inplace-edit { + position:relative; + width:100px; + } + + .rich-inplace-field { + background:#FFF281 none repeat scroll 0%; + border:0px none; + /*left:0px; + top:0px; + position:absolute;*/ + margin:0px; + padding:0px 0px 0px 3px; + width:100px; + } + + .rich-inplace-control { + background-color : #FFFFFF; + border : 1px outset #BED6F8; + padding : 0px; + margin : 0px; + } + + .rich-inplace-control-press { + background-color: #FFFFFF; + border : 1px inset #BED6F8; + padding : 0px; + margin : 0px; + } + + .rich-inplace-shadow { + top:-7; left:-5; position : absolute; + } + + .rich-inplace-shadow-size { + width : 36px; height : 26px; + } + + .rich-inplace-shadow-tl { + background-repeat: repeat-x; + background-position: top left; + } + + .rich-inplace-shadow-tr { + background-repeat: repeat-x; + background-position: top right; + } + + .rich-inplace-shadow-bl { + background-repeat: repeat-x; + background-position: bottom left; + } + + .rich-inplace-shadow-br { + background-repeat: repeat-x; + background-position: bottom right; + } + -.rich-inplace-view { - background-color:#F1F1F1; - border-bottom:1px dashed #000000; - padding-left:3px; - padding-right:3px; - white-space:nowrap; -} -.rich-inplace-edit { - position:relative; - width:100px; -} + /* mock-up styles */ + + *{font-family : verdana; font-size:11px;} + body{padding : 30px;} + fieldset{padding : 30px; border : 1px solid #c0c0c0;} + legend{font-weight : bold} + + .is_default_state{white-space : nowrap; background-color : #f1f1f1; border-bottom : 1px dashed #000000; padding-left : 3px; padding-right : 3px;} + .is_changed_state{background-image:url(images/mark_open.gif); background-position : top left; background-repeat : no-repeat;} + .is_edit_state{position : relative; width : 100px;} + .is_field{background : #FFF281; padding : 0px 0px 0px 3px; border : 0px; margin : 0px; width : 100px; position : absolute; top:0px; left : 0px;} + + .is_btn_set{ /*position : absolute; top:0px; left : 100px;*/ white-space : nowrap} -.rich-inplace-field { - background:#FFF281 none repeat scroll 0%; - border:0px none; - /*left:0px; - top:0px; - position:absolute;*/ - margin:0px; - padding:0px 0px 0px 3px; - width:100px; -} - -/* mock-up styles */ - -*{font-family : verdana; font-size:11px;} -body{padding : 30px;} -fieldset{padding : 30px; border : 1px solid #c0c0c0;} -legend{font-weight : bold} - - - -.is_default_state{white-space : nowrap; background-color : #f1f1f1; border-bottom : 1px dashed #000000; padding-left : 3px; padding-right : 3px;} -.is_changed_state{background-image:url(images/mark_open.gif); background-position : top left; background-repeat : no-repeat;} -.is_edit_state{position : relative; width : 100px;} -.is_field{background : #FFF281; padding : 0px 0px 0px 3px; border : 0px; margin : 0px; width : 100px; position : absolute; top:0px; left : 0px;} -.is_btn{ - background : url(images/bg_btn.png) #FFFFFF; - border : 1px outset #BED6F8; - padding : 0px; - margin : 0px;} -.is_btn_press{ - background : url(images/bg_press.png) #FFFFFF; - border : 1px inset #BED6F8; - padding : 0px; - margin : 0px;} -.is_btn_set{ /*position : absolute; top:0px; left : 100px;*/ white-space : nowrap} -.is_shadow{ top:-7; left:-5; position : absolute;} -.is_shadow_size{ width : 36px; height : 26px;} -.is_shadow_tl{ background : url(images/bg_shadow.png) repeat-x top left;} -.is_shadow_tr{ background : url(images/bg_shadow.png) repeat-x top right;} -.is_shadow_bl{ background : url(images/bg_shadow.png) repeat-x bottom left;} -.is_shadow_br{ background : url(images/bg_shadow.png) repeat-x bottom right;} ]]> - </f:verbatim> - + <u:selector name=".rich-inplace-changed"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.images.EditIcon"/> + </u:style> + </u:selector> + + <u:selector name=".rich-inplace-control"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SpinnerButtonGradient"/> + </u:style> + </u:selector> + + + <u:selector name=".rich-inplace-control-press"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxButtonPressGradient"/> + </u:style> + </u:selector> + + <u:selector name=".rich-inplace-shadow-tl"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxListShadow"/> + </u:style> + </u:selector> + + <u:selector name=".rich-inplace-shadow-tr"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxListShadow"/> + </u:style> + </u:selector> + + <u:selector name=".rich-inplace-shadow-bl"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxListShadow"/> + </u:style> + </u:selector> + + <u:selector name=".rich-inplace-shadow-br"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.ComboBoxListShadow"/> + </u:style> + </u:selector> + </f:template> Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 15:10:31 UTC (rev 6028) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 15:23:25 UTC (rev 6029) @@ -16,6 +16,10 @@ new org.ajax4jsf.javascript.PrototypeScript(), scripts/inplaceinput.js </h:scripts> + <f:resource var="ok_icon" name="org.richfaces.renderkit.images.OkControlIcon"/> + <f:resource var="cancel_icon" name="org.richfaces.renderkit.images.CancelControlIcon"/> + <f:resource var="spacer" name="images/spacer.gif"/> + <f:clientid var="clientId" /> <jsp:scriptlet> @@ -34,6 +38,7 @@ variables.setVariable("fieldValue", fieldValue); ]]> </jsp:scriptlet> + <span id="#{clientId}" class="rich-inplace rich-inplace-view"> <input id='#{clientId}tempValue' class='rich-inplace-field' @@ -47,15 +52,15 @@ <input id='#{clientId}value' type='hidden' value='#{fieldValue}'/> <div id="#{clientId}bar" class="is_btn_set" style="display:none;"> - <div class="is_shadow"> - <table class="is_shadow_size" cellspacing="0" cellpadding="0" border="0"> + <div class="rich-inplace-shadow"> + <table class="rich-inplace-shadow-size" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> - <td class="is_shadow_tl"> - <img width="10" height="1" border="0" alt="" src="/inplaceInput-sample/images/spacer.gif"/> + <td class="rich-inplace-shadow-tl"> + <img width="10" height="1" border="0" alt="" src="#{spacer}"/> <br/> </td> - <td class="is_shadow_tr"> + <td class="rich-inplace-shadow-tr"> </td> </tr> <tr> @@ -64,12 +69,12 @@ </table> </div> <div id="#{clientId}buttons"> - <input id="#{clientId}ok" class="is_btn" type="image" onmouseup="this.className='is_btn'" - onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" - src="/inplaceInput-sample/images/ico_ok.gif"/> - <input id="#{clientId}cancel" class="is_btn" type="image" onmouseup="this.className='is_btn'" - onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" - src="/inplaceInput-sample/images/ico_cancel.gif"/> + <input id="#{clientId}ok" class="rich-inplace-control" type="image" onmouseup="this.className='rich-inplace-control'" + onmouseout="this.className='rich-inplace-control'" onmousedown="this.className='rich-inplace-control-press'" + src="#{ok_icon}"/> + <input id="#{clientId}cancel" class="rich-inplace-control" type="image" onmouseup="this.className='rich-inplace-control'" + onmouseout="this.className='rich-inplace-control'" onmousedown="this.className='rich-inplace-control-press'" + src="#{cancel_icon}"/> </div> </div> #{value}