From 070cec726ea6d810e583d612a33c26f1ca60e36d Mon Sep 17 00:00:00 2001 From: tibing Date: Mon, 4 Jul 2016 17:07:51 +0300 Subject: [PATCH 1/2] feat(app\components): create tree view component --- package.json | 1 + src/app/app.menu.ts | 12 ++++++ .../pages/components/components.component.ts | 25 +++++++++++++ src/app/pages/components/components.scss | 1 + .../components/components/treeView/index.ts | 1 + .../components/treeView/treeView.component.ts | 37 +++++++++++++++++++ .../components/treeView/treeView.html | 5 +++ src/app/pages/components/index.ts | 1 + src/app/pages/pages.component.ts | 6 +++ src/app/theme/sass/_treeView.scss | 27 ++++++++++++++ src/app/theme/theme.scss | 1 + 11 files changed, 117 insertions(+) create mode 100644 src/app/pages/components/components.component.ts create mode 100644 src/app/pages/components/components.scss create mode 100644 src/app/pages/components/components/treeView/index.ts create mode 100644 src/app/pages/components/components/treeView/treeView.component.ts create mode 100644 src/app/pages/components/components/treeView/treeView.html create mode 100644 src/app/pages/components/index.ts create mode 100644 src/app/theme/sass/_treeView.scss diff --git a/package.json b/package.json index 1f653a6a..5def99c5 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.menu.ts b/src/app/app.menu.ts index 97d4a385..66061d77 100644 --- a/src/app/app.menu.ts +++ b/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', diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts new file mode 100644 index 00000000..ef02cdac --- /dev/null +++ b/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: `` +}) +@RouteConfig([ + { + name: 'TreeView', + component: TreeView, + path: '/tree-view', + useAsDefault: true + } +]) +export class Components { + + constructor() { + } + +} diff --git a/src/app/pages/components/components.scss b/src/app/pages/components/components.scss new file mode 100644 index 00000000..1999f610 --- /dev/null +++ b/src/app/pages/components/components.scss @@ -0,0 +1 @@ +@import '../../theme/sass/treeView'; diff --git a/src/app/pages/components/components/treeView/index.ts b/src/app/pages/components/components/treeView/index.ts new file mode 100644 index 00000000..15f949fe --- /dev/null +++ b/src/app/pages/components/components/treeView/index.ts @@ -0,0 +1 @@ +export * from './treeView.component'; diff --git a/src/app/pages/components/components/treeView/treeView.component.ts b/src/app/pages/components/components/treeView/treeView.component.ts new file mode 100644 index 00000000..1f7fbb96 --- /dev/null +++ b/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'}, + ] + } + ] + }; + +} diff --git a/src/app/pages/components/components/treeView/treeView.html b/src/app/pages/components/components/treeView/treeView.html new file mode 100644 index 00000000..df018c41 --- /dev/null +++ b/src/app/pages/components/components/treeView/treeView.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/src/app/pages/components/index.ts b/src/app/pages/components/index.ts new file mode 100644 index 00000000..86211eac --- /dev/null +++ b/src/app/pages/components/index.ts @@ -0,0 +1 @@ +export * from './components.component'; diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 33f9c4a1..cfb2bb60 100644 --- a/src/app/pages/pages.component.ts +++ b/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, diff --git a/src/app/theme/sass/_treeView.scss b/src/app/theme/sass/_treeView.scss new file mode 100644 index 00000000..fd03a679 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss index 4f38c1d0..f1f411b2 100644 --- a/src/app/theme/theme.scss +++ b/src/app/theme/theme.scss @@ -8,3 +8,4 @@ @import "sass/socicon"; @import "sass/table"; @import "sass/form"; +@import "sass/treeView"; From b280a8b0122f612e8ed2c15f54b289c086de57ce Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Fri, 8 Jul 2016 10:39:25 +0300 Subject: [PATCH 2/2] refactor(treeview): get rid of strange ts compilation error --- src/app/theme/components/baCard/baCard.component.ts | 3 +-- src/app/theme/components/baCard/index.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/theme/components/baCard/baCard.component.ts b/src/app/theme/components/baCard/baCard.component.ts index 8c700c08..f49807b0 100644 --- a/src/app/theme/components/baCard/baCard.component.ts +++ b/src/app/theme/components/baCard/baCard.component.ts @@ -1,5 +1,4 @@ -import {Component, ViewEncapsulation, Input} from '@angular/core'; - +import {Component, ViewEncapsulation, ViewChild, Input} from '@angular/core'; import {BaCardBlur} from './baCardBlur.directive'; @Component({ diff --git a/src/app/theme/components/baCard/index.ts b/src/app/theme/components/baCard/index.ts index b04caf13..8a8fa6c2 100644 --- a/src/app/theme/components/baCard/index.ts +++ b/src/app/theme/components/baCard/index.ts @@ -1,2 +1 @@ -export * from './baCard.component.ts'; -export * from './baCardBlur.directive'; +export * from './baCard.component';