[Tree] Begin using mct-tree for tree representation

platform/commonUI/general/bundle.js

@@ -49,6 +49,7 @@ define([
     "./src/directives/MCTScroll",
     "./src/directives/MCTSplitPane",
     "./src/directives/MCTSplitter",
+    "./src/directives/MCTTree",
     "text!./res/templates/bottombar.html",
     "text!./res/templates/controls/action-button.html",
     "text!./res/templates/controls/input-filter.html",
@@ -97,6 +98,7 @@ define([
     MCTScroll,
     MCTSplitPane,
     MCTSplitter,
+    MCTTree,
     bottombarTemplate,
     actionButtonTemplate,
     inputFilterTemplate,
@@ -389,6 +391,10 @@ define([
                 {
                     "key": "mctSplitter",
                     "implementation": MCTSplitter
+                },
+                {
+                    "key": "mctTree",
+                    "implementation": MCTTree
                 }
             ],
             "constants": [

platform/commonUI/general/res/templates/subtree.html

@@ -19,18 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
+<mct-tree mct-object="domainObject">
-    <li ng-if="!composition">
+</mct-tree>
-        <span class="tree-item">
+
-            <span class="icon wait-spinner"></span>
-            <span class="title-label">Loading...</span>
-        </span>
-    </li>
-    <li ng-repeat="child in composition">
-        <mct-representation key="'tree-node'"
-                            mct-object="child"
-                            parameters="parameters"
-                            ng-model="ngModel">
-        </mct-representation>
-    </li>
-</ul>

platform/commonUI/general/src/directives/MCTTree.js

@@ -37,9 +37,7 @@ define([
         return {
             restrict: "E",
             link: link,
-            require: [ "mctTree" ],
+            scope: { mctObject: "=" }
-            scope: { mctObject: "=" },
-            template: ""
         };
     }
 

platform/commonUI/general/src/ui/ToggleView.js

@@ -23,7 +23,7 @@
 
 define([
     'angular',
-    'text!../../res/templates/ui/toggle.html'
+    'text!../../res/templates/tree/toggle.html'
 ], function (angular, toggleTemplate) {
     function ToggleView(state) {
         this.expanded = !!state;

platform/commonUI/general/src/ui/TreeLabelView.js

@@ -23,7 +23,7 @@
 
 define([
     'zepto',
-    'text!../../res/templates/ui/tree-label.html'
+    'text!../../res/templates/tree/tree-label.html'
 ], function ($, labelTemplate) {
     'use strict';
 

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -23,7 +23,7 @@
 
 define([
     'angular',
-    'text!../../res/templates/ui/node.html',
+    'text!../../res/templates/tree/node.html',
     './ToggleView'
 ], function (angular, nodeTemplate, ToggleView) {
     'use strict';

platform/commonUI/general/src/ui/TreeView.js

@@ -30,8 +30,7 @@ define([
     var $ = angular.element.bind(angular);
 
     function TreeView() {
-        this.ul = $('<ul>');
+        this.ul = $('<ul class="tree"></ul>');
-        this.ul.addClass('tree');
         this.nodeViews = [];
     }