feat(themes): Adding a new paper theme to the customizer tool and more features to that grid.

Author: Portugal, Marcelo

misc/site/customizer/index.html

@@ -140,7 +140,7 @@ <h1 class="text-center">Grid Customizer</h2>
               {{ css }}
             </style>
 
-            <div class="grid" ui-grid="gridOptions"></div>
+            <div class="grid" ui-grid="gridOptions" ui-grid-cellNav ui-grid-selection></div>
           </div>
         </div>
         <div class="col-xs-6 col-md-8">

misc/site/customizer/themes/paper.json

@@ -0,0 +1,14 @@
+{
+  "variables": {
+    "@borderColor": "#ddd",
+    "@headerBackgroundColor": "#fff",
+    "@headerGradientStart": "#fff",
+    "@headerGradientStop": "#fff",
+    "@headerVerticalBarColor": "#fff",
+    "@rowColorEven": "#f9f9f9",
+    "@rowColorOdd": "#fff",
+    "@rowSelected": "#f5f5f5",
+    "@selectedColor": "#eee"
+  },
+  "customLess": ".ui-grid { color: #333; }\n\n.ui-grid-header { border-bottom-width: 2px; }\n\n.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child) > button {border:none;}\n\n.ui-grid-menu .ui-grid-menu-inner ul li button.ui-grid-menu-item-active {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}\n\n.ui-grid-menu .ui-grid-menu-inner ul li button:hover, .ui-grid-menu .ui-grid-menu-inner ul li button:focus {-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;background-color: #ddd;}"
+}

misc/site/customizer/themes/themes.json

@@ -1,4 +1,5 @@
 [
   "autumn",
+  "paper",
   "sky"
-]
+]

misc/site/js/customizer.js

@@ -1,6 +1,6 @@
 (function() {
 
-var app = angular.module('customizer', ['ui.grid']);
+var app = angular.module('customizer', ['ui.grid', 'ui.grid.cellNav', 'ui.grid.selection']);
 
 app.run(function($log, $rootScope, $http) {
 });
@@ -39,7 +39,10 @@ app.controller('Main', function($log, $http, $scope, less, Theme, FILES) {
       );
   }
 
-  $scope.gridOptions = {};
+  $scope.gridOptions = {
+    enableFiltering: true,
+    enableGridMenu: true
+  };
   $http.get(FILES.DATA_100)
     .success(function(data) {
       $scope.gridOptions.data = data;