src/examples/forms_toolbar/.sencha/app/slice-impl.xml

   1 <project name="slice-impl">
   2     <!--
   3     Uses the compiler to generate a special theme-only scss file containing
   4     rules for all framework / package / app components.  This is then used
   5     by the slicer example page to capture theme sprites
   6     -->
   7     <target name="-compile-slicer-sass" depends="-init-compiler">
   8         <x-normalize-path
   9             path="${build.dir}/resources"
  10             property="image.search.path"/>
  11
  12         <x-compile refid="${compiler.ref.id}">
  13             <![CDATA[
  14                 restore
  15                     page
  16                 and
  17                 include
  18                     -all
  19                 and
  20                 sass
  21                     +class-name-vars
  22                     +etc
  23                     +vars
  24                     +rules
  25                     -variable=$image-search-path:'${image.search.path}'
  26                     -variable=$theme-name: '${app.theme}' !default
  27                     -output=${app.example.scss}
  28                 and
  29                 restore
  30                     page
  31                 and
  32                 sass
  33                     +ruby
  34                     -output=${app.example.out.ruby}
  35             ]]>
  36         </x-compile>
  37
  38         <x-get-relative-path from="${app.example.dir}"
  39                              to="${app.example.css}"
  40                              property="app.example.css.path"/>
  41
  42 <!--update the app's example to point to the build output-->
  43 <echo file="${app.example.css.file}">
  44 <![CDATA[
  45 /*
  46  * This file is generated by Sencha Cmd and should NOT be edited. It redirects
  47  * to the most recently built CSS file for the application to allow theme.html
  48  * to load properly for image slicing (required to support non-CSS3 browsers
  49  * such as IE9 and below).
  50  */
  51 @import '${app.example.css.path}';
  52 ]]>
  53 </echo>
  54     </target>
  55
  56     <!--
  57     Compiles the scss file for the theme slicer page
  58     -->
  59     <target name="-compass-compile-slicer-css" depends="-compile-slicer-sass">
  60         <x-compass-compile
  61             dir="${app.example.build.dir}"
  62             trace="${compass.compile.trace}"
  63             boring="${compass.compile.boring}"
  64             force="${compass.compile.force}"
  65             sassdir="${app.example.build.dir}"
  66             cssdir="${app.example.build.dir}"
  67             config="${app.example.compass.config}"/>
  68     </target>
  69
  70     <!--
  71     Generates theme images for Ext JS 4.2+ apps using theme packages
  72     '-detect-app-build-properties' is defined in js-impl.xml
  73     -->
  74     <target name="-slice-app-theme" depends="-detect-app-build-properties">
  75         <x-ant-call target="-compass-compile-slicer-css"/>
  76         <x-run-bootstrap file="${bootstrap.example.js}"
  77                          basedir="${bootstrap.base.path}"/>
  78
  79         <echo>Capture theme image to ${build.capture.png}</echo>
  80         <x-sencha-command>
  81             <![CDATA[
  82                 theme
  83                     capture
  84                         -page=${app.example.theme.html}
  85                         -image=${build.capture.png}
  86                         -manifest=${build.capture.json}
  87             ]]>
  88         </x-sencha-command>
  89
  90         <echo>Slicing theme images to ${build.resources.dir}</echo>
  91         <x-sencha-command>
  92             <![CDATA[
  93                 fs
  94                     slice
  95                         ${build.slice.options}
  96                         -image=${build.capture.png}
  97                         -manifest=${build.capture.json}
  98                         -out=${build.resources.dir}
  99             ]]>
 100         </x-sencha-command>
 101     </target>
 102
 103     <macrodef name="x-build-theme">
 104         <attribute name="theme" description="the path of the theme folder"/>
 105         <attribute name="buildsass" default="false"/>
 106         <attribute name="basetheme" default="default"/>
 107         <sequential>
 108             <local name="theme.name"/>
 109
 110             <local name="framework.theme.dir"/>
 111             <local name="tmp.theme.dir"/>
 112             <local name="tmp.img.dir"/>
 113
 114             <basename property="theme.name" file="@{theme}"/>
 115             <local name="theme.base.name"/>
 116             <property name="theme.base.name" value="${theme.name}"/>
 117             <property name="theme.images.dir" location="@{theme}/images"/>
 118             <property name="theme.page.dir" location="@{theme}/${theme.page.name}"/>
 119
 120             <property name="tmp.res.dir" value="${app.resources.dir}"/>
 121             <property name="tmp.theme.dir" value="${tmp.res.dir}/${theme.base.name}"/>
 122             <property name="tmp.img.dir" value="${tmp.theme.dir}/images"/>
 123
 124             <property name="app.res.dir" location="${app.dir}/packages"/>
 125             <property name="app.img.dir" location="${app.res.dir}/images"/>
 126
 127             <property name="framework.res.dir" location="${framework.dir}/resources"/>
 128             <property name="framework.img.dir" location="${framework.res.dir}/themes/images"/>
 129             <property name="framework.theme.dir" location="${framework.img.dir}/@{basetheme}"/>
 130
 131             <echo>Copying base framework images from ${framework.theme.dir} to ${tmp.img.dir}</echo>
 132             <copy todir="${tmp.img.dir}">
 133                 <fileset dir="${framework.theme.dir}" includes="**/*"/>
 134             </copy>
 135
 136             <if>
 137                 <equals arg1="@{buildsass}" arg2="true"/>
 138                 <then>
 139                     <echo>Building sass for theme ${theme.name}</echo>
 140                     <!--x-build-sass is defined in sass-impl.xml-->
 141                     <x-build-sass theme="@{theme}"/>
 142                 </then>
 143             </if>
 144
 145             <echo>Slicing images for theme ${theme.name} to ${tmp.img.dir}</echo>
 146             <x-sencha-command>
 147                 <![CDATA[
 148                 theme
 149                     build
 150                         -data-file=${build.capture.json}
 151                         -image-file=${build.capture.png}
 152                         -page=${theme.page.dir}
 153                         -out=${tmp.img.dir}
 154                 ]]>
 155             </x-sencha-command>
 156
 157             <if>
 158                 <available file="${theme.images.dir}"/>
 159                 <then>
 160                     <echo>Copying user defined images from @{theme}/images to ${tmp.img.dir}</echo>
 161                     <copy todir="${tmp.img.dir}">
 162                         <fileset dir="${theme.images.dir}" includes="**/*"/>
 163                     </copy>
 164                 </then>
 165             </if>
 166
 167         </sequential>
 168     </macrodef>
 169
 170     <!--
 171     This is a legacy macrodef for copying resources in theme-directory based themes.
 172     It is provided to support building Ext JS 4.1 app themes
 173     -->
 174     <macrodef name="x-copy-resources">
 175         <sequential>
 176             <copy todir="${build.resources.dir}" includeEmptyDirs="false">
 177                 <fileset dir="${app.resources.dir}"
 178                          includes="**/*"/>
 179             </copy>
 180
 181             <x-get-relative-path from="${app.dir}"
 182                                  to="${framework.dir}"
 183                                  property="framework.rel.path"/>
 184
 185             <copy toDir="${build.dir}/${framework.rel.path}">
 186                 <fileset dir="${framework.dir}"
 187                          includes="src/ux/**/css/**/*"/>
 188             </copy>
 189         </sequential>
 190     </macrodef>
 191
 192     <!--
 193     Generates theme images for Ext JS 4.1 apps that use directory based
 194     themes.  These have been deprecated in favor of ExtJS 4.2 theme packages
 195     -->
 196     <target name="-slice-theme-directories">
 197         <echo>Processing theme directories from ${app.theme.dir}</echo>
 198         <for param="theme">
 199             <dirset dir="${app.theme.dir}" includes="*"/>
 200             <sequential>
 201                 <x-build-theme theme="@{theme}"/>
 202             </sequential>
 203         </for>
 204         <x-copy-resources/>
 205     </target>
 206
 207     <target name="-slice-images">
 208         <x-run-if-true value="${enable.ext42.themes}">
 209             <x-ant-call target="-slice-app-theme"/>
 210         </x-run-if-true>
 211         <x-run-if-true value="${enable.ext41.themes}">
 212             <x-ant-call target="-slice-theme-directories"/>
 213         </x-run-if-true>
 214     </target>
 215
 216     <target name="-before-slice"/>
 217     <target name="-slice" depends="-slice-images"/>
 218     <target name="-after-slice"/>
 219
 220     <!--
 221     Refresh Individual Theme
 222     -->
 223     <target name="-before-refresh-theme"/>
 224     <target name="-refresh-theme">
 225         <if>
 226             <x-is-true value="${enable.ext41.themes}"/>
 227             <then>
 228                 <local name="theme.dir"/>
 229                 <property name="theme.dir" location="${app.theme.dir}/${args.themeName}"/>
 230                 <x-build-theme theme="${theme.dir}" buildsass="true"/>
 231                 <x-copy-resources/>
 232             </then>
 233         </if>
 234     </target>
 235     <target name="-after-refresh-theme"/>
 236 </project>