feat(app\components): create tree view component

package.json

@@ -35,6 +35,7 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.16",
+    "ng2-branchy": "0.0.2-2",
     "ng2-ckeditor": "^1.0.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",

src/app/app.menu.ts

@@ -33,6 +33,18 @@ export const menuItems = [
       },
     ]
   },
+  {
+    title: 'Components',
+    component: 'Components',
+    icon: 'ion-gear-a',
+    order: 250,
+    subMenu: [
+      {
+        title: 'Tree View',
+        component: 'TreeView'
+      }
+    ]
+  },
   {
     title: 'UI Features',
     component: 'Ui',

src/app/pages/components/components.component.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {RouteConfig} from '@angular/router-deprecated';
+import {TreeView} from "./components/treeView";
+
+@Component({
+  selector: 'components',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'TreeView',
+    component: TreeView,
+    path: '/tree-view',
+    useAsDefault: true
+  }
+])
+export class Components {
+
+  constructor() {
+  }
+
+}

src/app/pages/components/components.scss

@@ -0,0 +1 @@
+@import '../../theme/sass/treeView';

src/app/pages/components/components/treeView/index.ts

@@ -0,0 +1 @@
+export * from './treeView.component';

src/app/pages/components/components/treeView/treeView.component.ts

@@ -0,0 +1,37 @@
+import {Component} from '@angular/core';
+import {BranchyComponent, TreeModel} from 'ng2-branchy';
+import {BaCard} from "../../../../theme/components/baCard/baCard.component";
+
+@Component({
+  selector: 'tree-view',
+  directives: [BranchyComponent, BaCard],
+  template: require('./treeView.html'),
+})
+
+export class TreeView {
+
+  constructor() {
+  }
+  private tree: TreeModel = {
+    value: 'Programming languages by programming paradigm',
+    children: [
+      {
+        value: 'Object-oriented programming',
+        children: [
+          {value: 'Java'},
+          {value: 'C++'},
+          {value: 'C#'},
+        ]
+      },
+      {
+        value: 'Prototype-based programming',
+        children: [
+          {value: 'JavaScript'},
+          {value: 'CoffeeScript'},
+          {value: 'Lua'},
+        ]
+      }
+    ]
+  };
+
+}

src/app/pages/components/components/treeView/treeView.html

@@ -0,0 +1,5 @@
+<div class="col-md-6">
+  <ba-card title="basic">
+    <branchy id="tree-view" [tree]="tree"></branchy>
+  </ba-card>
+</div>

src/app/pages/components/index.ts

@@ -0,0 +1 @@
+export * from './components.component';

src/app/pages/pages.component.ts

@@ -10,6 +10,7 @@ import {Charts} from './charts';
 import {Forms} from './forms';
 import {Tables} from './tables';
 import {Editors} from "./editors";
+import {Components} from "./components/components.component";
 
 @Component({
   selector: 'pages',
@@ -52,6 +53,11 @@ import {Editors} from "./editors";
     path: '/dashboard',
     useAsDefault: true,
   },
+  {
+    name: 'Components',
+    component: Components,
+    path: '/components/...'
+  },
   {
     name: 'Ui',
     component: Ui,

src/app/theme/sass/_treeView.scss

@@ -0,0 +1,27 @@
+#tree-view .tree {
+  & .node-value {
+    color: white;
+  }
+  & .folding {
+    &.node-expanded::before {
+      color: white;
+    }
+    &.node-collapsed::before  {
+      color: white;
+    }
+    &.node-leaf::before {
+      color: white;
+    }
+  }
+  & .over-drop-target {
+    border: 4px solid ghostwhite;
+  }
+  & .node-value{
+    & .node-selected::after {
+      background-color: white;
+    }
+    &:after {
+      background-color: white;
+    }
+  }
+}

src/app/theme/theme.scss

@@ -8,3 +8,4 @@
 @import "sass/socicon";
 @import "sass/table";
 @import "sass/form";
+@import "sass/treeView";