fix(customizer): Fixes less customizer in docs

The less customizer was broken when bootstrap was added for less mixins. The less customizer now uses the newest version of less.js and compiles all of the less files using imports instead of a concatinated file. Feature less files are still not included in the customizer unfortunately. Closes #4079 Closes #3918 Related #4173
angular-ui · Aug 25, 2015 · f739d9f · f739d9f
1 parent 7643a9e
commit f739d9f
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 107 deletions.
diff --git a/grunt/aliases.js b/grunt/aliases.js
@@ -10,7 +10,7 @@ module.exports = function (grunt, options) {
     'default': ['before-test', 'test:single', 'after-test'],
 
     // Build with no testing
-    'build': ['ngtemplates', 'concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy:site'],
+    'build': ['ngtemplates', 'concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy:site', 'copy:less_customizer',],
 
     // Auto-test tasks for development
     'autotest:unit': ['karmangular:start'],

diff --git a/grunt/concat.js b/grunt/concat.js
@@ -7,16 +7,4 @@ module.exports = {
     src: ['src/js/core/bootstrap.js', 'src/js/**/*.js', 'src/features/*/js/**/*.js', '.tmp/template.js'],
     dest: '<%= dist %>/release/<%= pkg.name %>.js'
   },
-
-  // Concat all the less files together for the customizer
-  customizer_less: {
-    options: {
-      process: function(src, filepath) {
-        // Strip import statements since we're concatting
-        return src.replace(/\@import\s*.+?;/g, '');
-      }
-    },
-    src: 'src/less/**/*.less',
-    dest: '<%= dist %>/less/<%= pkg.name %>.less'
-  }
 };
diff --git a/grunt/copy.js b/grunt/copy.js
@@ -18,6 +18,28 @@ module.exports = function ( grunt ) {
         }
       ]
     },
+    less_customizer: {
+      files: [
+        {
+          expand: true,
+          cwd: 'src/less',
+          src: '**/*.less',
+          dest: '<%= dist %>/less'
+        },
+        {
+          expand: true,
+          cwd: 'src/features',
+          src: '**/*.less',
+          dest: '<%= dist %>/less'
+        },
+        {
+          expand: true,
+          cwd: 'node_modules/bootstrap',
+          src: '**/*.less',
+          dest: '<%= dist %>/bootstrap'
+        }
+      ]
+    },
     less_dist: {
       files: [
         {

diff --git a/misc/site/customizer/index.html b/misc/site/customizer/index.html
@@ -70,15 +70,22 @@
       </p>
     </div>
   </div>
-  
+
   <div ng-cloak class="container-fluid" id="customizerApp" ng-controller='Main'>
     <br>
 
-    <h2 class="text-center">Grid Customizer</h2>
-
+    <h1 class="text-center">Grid Customizer</h2>
     <br>
 
     <div class="row">
+      <div class="col-md-12">
+        <span class="col-xs-12 alert alert-warning text-center">
+          NOTE: The customizer currently only works with LESS defined for the core.
+          Less for the features are not currently compiled into the included download.
+          <br>
+          We are open to Pull Requests that fix this problem.
+        </span>
+      </div>
       <div class="col-md-12">
         <button type="button" class="btn btn-success" ng-click="resetVariables()">Reset Variables</button>
         &nbsp;
@@ -127,26 +134,27 @@ <h2 class="text-center">Grid Customizer</h2>
                 height: 300px;
               }
             </style>
-            
+
             <style ui-grid-style>
               {{ css }}
             </style>
-            
+
             <div class="grid" ui-grid="gridOptions"></div>
           </div>
         </div>
+        <div class="col-xs-6 col-md-8">
+          <form>
+            <label for="customLess">Custom Less</label>
+            <textarea class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>
+          </form>
+        </div>
       </div>
-  
+
       <div class="text-error">{{ cssErr }}</div>
-
-      <br>
-
-      <label for="customLess">Custom Less</label>
-      <textarea class="col-xs-12" class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>
-
+
       <br>
       <br>
-    </div>    
+    </div>
 
     <div ng-cloak ng-show="showDownload" class="modal">
       <div class="modal-dialog">
@@ -162,7 +170,7 @@ <h3>Download CSS</h3>
             <p class="modal-message">
               <strong>Size:</strong> {{ cssSize() }}
             </p>
-    
+
             <textarea hover-select row="20" class="compiled-css col-xs-12" readonly>{{ css }}</textarea>
             <p class="modal-message">
               Hover then copy and paste the CSS.
@@ -183,8 +191,20 @@ <h3>Download CSS</h3>
     <!-- <div style="min-height: 4000px"></div> -->
   </div>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.0/less.min.js"></script>
+  <script>
+  less = {
+    env: "development",
+    logLevel: 2,
+    async: false,
+    fileAsync: false,
+    poll: 1000,
+    functions: {},
+    dumpLineNumbers: "comments",
+    relativeUrls: false,
+  }
+  </script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
 
   <!--
@@ -197,7 +217,7 @@ <h3>Download CSS</h3>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <!--  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
 
   <script>
     var s = document.createElement('script');
@@ -227,4 +247,4 @@ <h3>Download CSS</h3>
 
   <!--<script src="/js/customizer.js"></script>-->
 </body>
-</html>
+</html>
diff --git a/misc/site/index.html b/misc/site/index.html
@@ -34,6 +34,7 @@
         <ul class="nav navbar-nav">
           <li><a href="/docs/#/api"><i class="fa fa-book fa-fw"></i> API</a></li>
           <li><a href="/docs/#/tutorial"><i class="fa fa-book fa-fw"></i> Tutorial</a></li>
+          <li><a href="/customizer/"><i class="fa fa-wrench fa-fw"></i> Customizer</a></li>
         </ul>
         <div class="navbar-header navbar-right">
           <p class="navbar-text hidden-phone">