Author: konstantin.mishin Date: 2010-11-15 13:54:38 -0500 (Mon, 15 Nov 2010) New Revision: 20053 Modified: sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml Log: RF-9496 Modified: sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss =================================================================== --- sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss 2010-11-15 17:15:43 UTC (rev 20052) +++ sandbox/trunk/ui/fileupload/ui/src/main/resources/META-INF/resources/org.richfaces/fileupload.ecss 2010-11-15 18:54:38 UTC (rev 20053) @@ -1,22 +1,19 @@ .rf-fu { - background: '#{richSkin.tableBackgroundColor}'; - border-color: '#{richSkin.tableBorderColor}'; + background: '#{richSkin.generalBackgroundColor}'; + border-color: '#{richSkin.panelBorderColor}'; border-style: solid; border-width: 1px; width: 400px; /*TODO Remove it*/ } .rf-fu-hdr { - background-color: '#{richSkin.additionalBackgroundColor}'; - border-bottom-color: '#{richSkin.tableBorderColor}'; - border-bottom-style: solid; - border-bottom-width: 1px; - border-left-color: '#{richSkin.tableBackgroundColor}'; - border-left-style: solid; - border-left-width: 1px; - border-top-color: '#{richSkin.tableBackgroundColor}'; - border-top-style: solid; - border-top-width: 1px; + background-color: '#{richSkin.headerBackgroundColor}'; + background-image: url("#{resource['org.richfaces.renderkit.html.GradientA']}"); + border-color: '#{richSkin.headerBackgroundColor}'; + border-style: solid; + border-width: 1px; + margin-left: 1px; + margin-top: 1px; white-space: nowrap; } @@ -40,19 +37,28 @@ width: 34%; } -.rf-fu-btn { +.rf-fu-btn-add, .rf-fu-btn { background-color: '#{richSkin.trimColor}'; background-image: url("#{resource['org.richfaces.images:fuBtnGrad.png']}"); background-position:left top; background-repeat:repeat-x; - border-color: '#{richSkin.tableBorderColor}'; + border-color: '#{richSkin.panelBorderColor}'; border-style: solid; border-width: 1px; + display: inline-block; margin: 4px; - padding: 0px; + padding: 1px 3px 1px 3px; + vertical-align: top; } -.rf-fu-btn-add, .rf-fu-btn-uld, .rf-fu-btn-clr { +/*TODO Add disabled state for buttons*/ + +.rf-fu-btn-add { + position: relative; + overflow: hidden; +} + +.rf-fu-btn-cnt-add, .rf-fu-btn-cnt-uld, .rf-fu-btn-cnt-clr { background-repeat: no-repeat; color: '#{richSkin.generalTextColor}'; display: inline-block; @@ -61,15 +67,33 @@ padding: 2px 2px 2px 19px; } -.rf-fu-btn-add { +.rf-fu-btn-cnt-add { background-image: url("#{resource['org.richfaces:fu-add.gif']}"); } -.rf-fu-btn-uld { +.rf-fu-btn-cnt-uld { background-image: url("#{resource['org.richfaces:fu-uld.gif']}"); font-weight: bold; } -.rf-fu-btn-clr { +.rf-fu-btn-cnt-clr { background-image: url("#{resource['org.richfaces:fu-clr.gif']}"); -} \ No newline at end of file +} + +.rf-fu-inp-cntr { + display: block; + height: 1px; + position: absolute; + right: 0; + top: 0; +} + +.rf-fu-inp { + filter: "alpha(opacity=0)"; + font-size: 10em; + opacity: 0; + position: absolute; + right: 0; + top: 0; +} + Modified: sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml =================================================================== --- sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml 2010-11-15 17:15:43 UTC (rev 20052) +++ sandbox/trunk/ui/fileupload/ui/src/main/templates/fileupload.template.xml 2010-11-15 18:54:38 UTC (rev 20053) @@ -35,20 +35,23 @@ <cdk:resource-dependency library="org.richfaces" name="base-component.reslib" /> </cc:interface> <cc:implementation> - <div class="rf-fu"> + <div id="#{clientId}" class="rf-fu"> <div class="rf-fu-hdr"> <span class="rf-fu-btns-lft"> - <button class="rf-fu-btn"> - <span class="rf-fu-btn-add">Add...</span> - </button> - <button class="rf-fu-btn"> - <span class="rf-fu-btn-uld">Upload</span> - </button> + <span class="rf-fu-btn-add"> + <span class="rf-fu-inp-cntr"> <!-- This span is needed for IE7 only. --> + <input type="file" class="rf-fu-inp" /> + </span> + <span class="rf-fu-btn-cnt-add">Add...</span> + </span> + <span class="rf-fu-btn"> + <span class="rf-fu-btn-cnt-uld">Upload</span> + </span> </span> <span class="rf-fu-btns-rgh"> - <button class="rf-fu-btn"> - <span class="rf-fu-btn-clr">Clear All</span> - </button> + <span class="rf-fu-btn"> + <span class="rf-fu-btn-cnt-clr">Clear All</span> + </span> </span> </div> <div class="rf-fu-lst" />