#671: Improve chart editor UI/UX

rd_ui/app/index.html

@@ -182,6 +182,7 @@
 <script src="/bower_components/leaflet/dist/leaflet.js"></script>
 <script src="/bower_components/angular-bootstrap-show-errors/src/showErrors.js"></script>
 <script src="/bower_components/d3/d3.min.js"></script>
+<script src="/bower_components/angular-ui-sortable/sortable.js"></script>
 <!-- endbuild -->
 
 <!-- build:js({.tmp,app}) /scripts/scripts.js -->

rd_ui/app/scripts/app.js

@@ -10,6 +10,7 @@ angular.module('redash', [
     'angular-growl',
     'angularMoment',
     'ui.bootstrap',
+    'ui.sortable',
     'smartTable.table',
     'ngResource',
     'ngRoute',

rd_ui/app/scripts/directives/directives.js

@@ -281,4 +281,34 @@
       }
     };
   });
+
+  directives.directive('onDestroy', function () {
+    /* This directive can be used to invoke a callback when an element is destroyed,
+    A useful example is the following:
+    <div ng-if="includeText" on-destroy="form.text = null;">
+      <input type="text" ng-model="form.text">
+    </div>
+    */
+    return {
+      restrict: "A",
+      scope: {
+        onDestroy: "&",
+      },
+      link: function(scope, elem, attrs) {
+        console.log(scope.onDestroy);
+        scope.$on('$destroy', function() {
+          scope.onDestroy();
+        });
+      }
+    };
+  });
+
+  directives.directive('colorBox', function () {
+    return {
+      restrict: "E",
+      scope: {color: "="},
+      template: "<span style='width: 12px; height: 12px; background-color: {{color}}; display: inline-block; margin-right: 5px;'></span>"
+    };
+  });
+
 })();

rd_ui/app/scripts/filters.js

@@ -97,4 +97,21 @@ angular.module('redash.filters', []).
       }
       return $sce.trustAsHtml(text);
     }
-  }]);
+  }])
+
+  .filter('remove', function() {
+    return function(items, item) {
+      if (items == undefined)
+        return items;
+      if (item instanceof Array) {
+        var notEquals = function(other) { return item.indexOf(other) == -1; }
+      } else {
+        var notEquals = function(other) { return item != other;  }
+      }
+      var filtered = [];
+      for (var i = 0; i < items.length; i++)
+        if (notEquals(items[i]))
+          filtered.push(items[i])
+      return filtered;
+    };
+  });