From 354a82962132a739c022332057974c42d7ff806f Mon Sep 17 00:00:00 2001 From: alexzuza Date: Sat, 18 Mar 2017 20:51:03 +0400 Subject: [PATCH 01/10] Initial --- app/app.module.ts | 11 ---- index.html | 11 +++- loader.svg | 27 +++++++++ package.json | 16 +++--- src/app-routing.module.ts | 18 ++++++ src/app.component.html | 13 +++++ {app => src}/app.component.ts | 4 +- src/app.module.ts | 31 ++++++++++ {app => src}/main.ts | 2 +- src/page-not-found.component.ts | 8 +++ src/table/column.component.ts | 19 +++++++ src/table/datatable.component.ts | 42 ++++++++++++++ src/table/models/photo.model.ts | 5 ++ src/table/table-routing.module.ts | 18 ++++++ src/table/table.component.ts | 39 +++++++++++++ src/table/table.module.ts | 22 ++++++++ src/tree/leafs/comp1.component.ts | 10 ++++ src/tree/leafs/comp2.component.ts | 8 +++ src/tree/leafs/comp3.component.ts | 8 +++ src/tree/leafs/comp4.component.ts | 8 +++ src/tree/tree-routing.module.ts | 18 ++++++ src/tree/tree.component.ts | 13 +++++ src/tree/tree.module.ts | 27 +++++++++ style.css | 94 +++++++++++++++++++++++++++++++ systemjs.config.js | 8 +-- 25 files changed, 451 insertions(+), 29 deletions(-) delete mode 100644 app/app.module.ts create mode 100644 loader.svg create mode 100644 src/app-routing.module.ts create mode 100644 src/app.component.html rename {app => src}/app.component.ts (63%) create mode 100644 src/app.module.ts rename {app => src}/main.ts (65%) create mode 100644 src/page-not-found.component.ts create mode 100644 src/table/column.component.ts create mode 100644 src/table/datatable.component.ts create mode 100644 src/table/models/photo.model.ts create mode 100644 src/table/table-routing.module.ts create mode 100644 src/table/table.component.ts create mode 100644 src/table/table.module.ts create mode 100644 src/tree/leafs/comp1.component.ts create mode 100644 src/tree/leafs/comp2.component.ts create mode 100644 src/tree/leafs/comp3.component.ts create mode 100644 src/tree/leafs/comp4.component.ts create mode 100644 src/tree/tree-routing.module.ts create mode 100644 src/tree/tree.component.ts create mode 100644 src/tree/tree.module.ts diff --git a/app/app.module.ts b/app/app.module.ts deleted file mode 100644 index e096758..0000000 --- a/app/app.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; - -@NgModule({ - imports: [ BrowserModule ], - declarations: [ AppComponent ], - bootstrap: [ AppComponent ] -}) -export class AppModule { } \ No newline at end of file diff --git a/index.html b/index.html index 3769dc7..740034d 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,20 @@ - Loading... + +
+ +
+ + \ No newline at end of file diff --git a/loader.svg b/loader.svg new file mode 100644 index 0000000..91ad1a0 --- /dev/null +++ b/loader.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 1ea5873..178ca96 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,14 @@ }, "license": "ISC", "dependencies": { - "@angular/common": "4.0.0-rc.3", - "@angular/compiler": "4.0.0-rc.3", - "@angular/core": "4.0.0-rc.3", - "@angular/forms": "4.0.0-rc.3", - "@angular/http": "4.0.0-rc.3", - "@angular/platform-browser": "4.0.0-rc.3", - "@angular/platform-browser-dynamic": "4.0.0-rc.3", - "@angular/router": "4.0.0-rc.3", + "@angular/common": "next", + "@angular/compiler": "next", + "@angular/core": "next", + "@angular/forms": "next", + "@angular/http": "next", + "@angular/platform-browser": "next", + "@angular/platform-browser-dynamic": "next", + "@angular/router": "next", "core-js": "^2.4.1", "rxjs": "^5.0.1", diff --git a/src/app-routing.module.ts b/src/app-routing.module.ts new file mode 100644 index 0000000..71f21ed --- /dev/null +++ b/src/app-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { PageNotFoundComponent } from "./page-not-found.component"; + + +export const routes: Routes = [ + { path: '', redirectTo: '/tree', pathMatch: 'full' } +]; + +@NgModule({ + imports: [ + RouterModule.forRoot(routes) + ], + exports: [ + RouterModule + ] +}) +export class AppRoutingModule { } \ No newline at end of file diff --git a/src/app.component.html b/src/app.component.html new file mode 100644 index 0000000..26affa6 --- /dev/null +++ b/src/app.component.html @@ -0,0 +1,13 @@ +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/app/app.component.ts b/src/app.component.ts similarity index 63% rename from app/app.component.ts rename to src/app.component.ts index 00fd09b..48437fb 100644 --- a/app/app.component.ts +++ b/src/app.component.ts @@ -2,8 +2,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-app', - template: ` -

Angular 2 Systemjs start

- ` + templateUrl: `src/app.component.html` }) export class AppComponent { } \ No newline at end of file diff --git a/src/app.module.ts b/src/app.module.ts new file mode 100644 index 0000000..c49181a --- /dev/null +++ b/src/app.module.ts @@ -0,0 +1,31 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { LocationStrategy, HashLocationStrategy } from '@angular/common'; + +import { AppRoutingModule } from './app-routing.module'; +import { TreeModule } from './tree/tree.module'; +import { TableModule } from './table/table.module'; + +import { AppComponent } from './app.component'; +import { PageNotFoundComponent } from './page-not-found.component'; + + +@NgModule({ + imports: [ + BrowserModule, + AppRoutingModule, + TreeModule, + TableModule + ], + declarations: [ + AppComponent, + PageNotFoundComponent + ], + providers: [ + { + provide: LocationStrategy, useClass: HashLocationStrategy + } + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } \ No newline at end of file diff --git a/app/main.ts b/src/main.ts similarity index 65% rename from app/main.ts rename to src/main.ts index 3d4db6d..bbb697a 100644 --- a/app/main.ts +++ b/src/main.ts @@ -2,4 +2,4 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; -platformBrowserDynamic().bootstrapModule(AppModule); \ No newline at end of file +platformBrowserDynamic().bootstrapModule(AppModule).then(); \ No newline at end of file diff --git a/src/page-not-found.component.ts b/src/page-not-found.component.ts new file mode 100644 index 0000000..37ec218 --- /dev/null +++ b/src/page-not-found.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'my-page-not-found', + template: 'my-page-not-found' +}) +export class PageNotFoundComponent {} \ No newline at end of file diff --git a/src/table/column.component.ts b/src/table/column.component.ts new file mode 100644 index 0000000..dc90ab9 --- /dev/null +++ b/src/table/column.component.ts @@ -0,0 +1,19 @@ +import { Component, TemplateRef, ContentChild, Input } from '@angular/core'; +import { DataTableComponent } from './datatable.component'; + +@Component({ + selector: 'column', + template: `` +}) +export class ColumnComponent { + @Input() value: string; + @Input() header: string; + + @ContentChild('tableHeaderTemplate') headerTemplate: TemplateRef; + @ContentChild('tableBodyTemplate') bodyTemplate: TemplateRef; + + constructor(public table: DataTableComponent) { + table.addColumn(this); + } + +} \ No newline at end of file diff --git a/src/table/datatable.component.ts b/src/table/datatable.component.ts new file mode 100644 index 0000000..f3c5ab9 --- /dev/null +++ b/src/table/datatable.component.ts @@ -0,0 +1,42 @@ +import { Component, Input } from '@angular/core'; +import { ColumnComponent } from './column.component'; + +@Component({ + selector: 'datatable', + template: ` + + + + + + + + + + + +
+ {{column.header}} + +
+ {{row[column.value]}} + +
+ + ` +}) +export class DataTableComponent { + + @Input() dataset; + + columns: ColumnComponent[] = []; + + addColumn(column) { + this.columns.push(column); + } + +} \ No newline at end of file diff --git a/src/table/models/photo.model.ts b/src/table/models/photo.model.ts new file mode 100644 index 0000000..01a791a --- /dev/null +++ b/src/table/models/photo.model.ts @@ -0,0 +1,5 @@ + +export class Photo { + constructor(public id: string, public title: string) { + } +} \ No newline at end of file diff --git a/src/table/table-routing.module.ts b/src/table/table-routing.module.ts new file mode 100644 index 0000000..7482f4c --- /dev/null +++ b/src/table/table-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { TableComponent } from './table.component'; + + +export const routes: Routes = [ + { path: 'table', component: TableComponent } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(routes) + ], + exports: [ + RouterModule + ] +}) +export class TableRoutingModule { } \ No newline at end of file diff --git a/src/table/table.component.ts b/src/table/table.component.ts new file mode 100644 index 0000000..3a26110 --- /dev/null +++ b/src/table/table.component.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; +import { Photo } from './models/photo.model'; + + +@Component({ + selector: 'my-table', + template: ` +

A Table of Data

+ + + + + {{ column.header }} + + + + + + + + + ` +}) +export class TableComponent { + photoData: Photo[]; + + constructor() { + + this.photoData = [ + new Photo("1", "My title"), + new Photo("2", "Another Title"), + new Photo("3", "Best Title") + ]; + } + + remove(id) { + this.photoData = this.photoData.filter(x => x.id != id); + } +} \ No newline at end of file diff --git a/src/table/table.module.ts b/src/table/table.module.ts new file mode 100644 index 0000000..65c6a2f --- /dev/null +++ b/src/table/table.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TableRoutingModule } from './table-routing.module'; + +import { TableComponent } from './table.component'; +import { DataTableComponent } from './datatable.component'; +import { ColumnComponent } from "./column.component"; + + +@NgModule({ + imports: [ + CommonModule, + TableRoutingModule + ], + declarations: [ + TableComponent, + DataTableComponent, + ColumnComponent + ] +}) +export class TableModule { } \ No newline at end of file diff --git a/src/tree/leafs/comp1.component.ts b/src/tree/leafs/comp1.component.ts new file mode 100644 index 0000000..94f17b2 --- /dev/null +++ b/src/tree/leafs/comp1.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'comp1', + template: `{{i}}1` +}) +export class Comp1Component { + +} \ No newline at end of file diff --git a/src/tree/leafs/comp2.component.ts b/src/tree/leafs/comp2.component.ts new file mode 100644 index 0000000..e28c2ba --- /dev/null +++ b/src/tree/leafs/comp2.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'comp2', + template: `2` +}) +export class Comp2Component {} \ No newline at end of file diff --git a/src/tree/leafs/comp3.component.ts b/src/tree/leafs/comp3.component.ts new file mode 100644 index 0000000..177cd57 --- /dev/null +++ b/src/tree/leafs/comp3.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'comp3', + template: `3` +}) +export class Comp3Component {} \ No newline at end of file diff --git a/src/tree/leafs/comp4.component.ts b/src/tree/leafs/comp4.component.ts new file mode 100644 index 0000000..b5045e5 --- /dev/null +++ b/src/tree/leafs/comp4.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'comp4', + template: `4` +}) +export class Comp4Component {} \ No newline at end of file diff --git a/src/tree/tree-routing.module.ts b/src/tree/tree-routing.module.ts new file mode 100644 index 0000000..24713df --- /dev/null +++ b/src/tree/tree-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { TreeComponent } from "./tree.component"; + + +export const routes: Routes = [ + { path: 'tree', component: TreeComponent } +]; + +@NgModule({ + imports: [ + RouterModule.forChild(routes) + ], + exports: [ + RouterModule + ] +}) +export class TreeRoutingModule { } \ No newline at end of file diff --git a/src/tree/tree.component.ts b/src/tree/tree.component.ts new file mode 100644 index 0000000..b0554a8 --- /dev/null +++ b/src/tree/tree.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; + + +@Component({ + selector: 'my-tree', + template: ` + my-tree +
+ + + ` +}) +export class TreeComponent {} \ No newline at end of file diff --git a/src/tree/tree.module.ts b/src/tree/tree.module.ts new file mode 100644 index 0000000..0a1e63b --- /dev/null +++ b/src/tree/tree.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { TreeRoutingModule } from './tree-routing.module'; + +import { TreeComponent } from './tree.component'; +import { Comp1Component } from "./leafs/comp1.component"; +import { Comp2Component } from "./leafs/comp2.component"; +import { Comp3Component } from "./leafs/comp3.component"; +import { Comp4Component } from "./leafs/comp4.component"; + + +@NgModule({ + imports: [ + CommonModule, + TreeRoutingModule + ], + declarations: [ + TreeComponent, + Comp1Component, + Comp2Component, + Comp3Component, + + Comp4Component + ] +}) +export class TreeModule { } \ No newline at end of file diff --git a/style.css b/style.css index e69de29..dd1c904 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,94 @@ +body { + margin: 0; + background: #dedede; +} + +.page { + position: absolute; + top: 20px; + right: 80px; + left: 80px; + bottom: 20px; + background: #fff; + display: flex; + flex-direction: column; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + +} + +.body { + flex: 1; + padding: 20px 30px; +} + +.scroll { + overflow-y: scroll; + transform: translateZ(0); +} + +.scroll:hover::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,.2); +} + +.scroll::-webkit-scrollbar-thumb:hover { + background-color: rgba(0,0,0,.3); + +} + +.scroll::-webkit-scrollbar{ + width: 10px; +} + +.scroll::-webkit-scrollbar-thumb { + transition: background-color 2s ease-out; + border-radius:6px; +} + + +nav { + display: flex; + background: #f6f6f9; +} + +nav a { + line-height: 57px; + text-decoration: none; + padding: 0 30px; + color: #0C0D0E; + border-bottom: 2px solid #fafafb; +} + +nav a.active { + border-bottom: 2px solid #F48024; +} + +nav a:hover, nav a:focus { + background: #eff0f1; + color: #242729; +} +my-page-not-found { + display: block; + height: 1000px; +} + +comp1, comp2, comp3, comp4 { + float: left; + width: 50%; + padding: 15px; + box-sizing: border-box; + border: 1px solid; + text-align: center; +} + + +my-tree { + display: block; + padding: 10px; + border: 1px solid; +} + +my-tree:after { + content: ""; + display: table; + clear: both; +} diff --git a/systemjs.config.js b/systemjs.config.js index 52127a8..1af5692 100644 --- a/systemjs.config.js +++ b/systemjs.config.js @@ -23,7 +23,7 @@ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries - 'rxjs': 'npm:rxjs' + // 'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: { @@ -31,9 +31,9 @@ main: './main.js', defaultExtension: 'js' }, - rxjs: { - defaultExtension: 'js' - } + // rxjs: { + // defaultExtension: 'js' + // } } }); })(this); \ No newline at end of file From 2a2d448650b2f69c254778249963cf64f7453aa3 Mon Sep 17 00:00:00 2001 From: alexzuza Date: Sun, 19 Mar 2017 12:35:01 +0400 Subject: [PATCH 02/10] Implement tree --- index.html | 5 +- package.json | 2 +- src/app.module.ts | 2 + src/core/core.module.ts | 17 ++ src/core/logger.ts | 14 ++ src/table/datatable.component.ts | 6 +- src/table/table.component.ts | 2 +- src/tree/components.ts | 287 ++++++++++++++++++++++++++++++ src/tree/leafs/comp1.component.ts | 10 -- src/tree/leafs/comp2.component.ts | 8 - src/tree/leafs/comp3.component.ts | 8 - src/tree/leafs/comp4.component.ts | 8 - src/tree/shared/utils.ts | 35 ++++ src/tree/tree.component.ts | 21 ++- src/tree/tree.module.ts | 11 +- style.css | 196 ++++++++++++++++++-- systemjs.config.js | 9 +- tsconfig.json | 1 + 18 files changed, 563 insertions(+), 79 deletions(-) create mode 100644 src/core/core.module.ts create mode 100644 src/core/logger.ts create mode 100644 src/tree/components.ts delete mode 100644 src/tree/leafs/comp1.component.ts delete mode 100644 src/tree/leafs/comp2.component.ts delete mode 100644 src/tree/leafs/comp3.component.ts delete mode 100644 src/tree/leafs/comp4.component.ts create mode 100644 src/tree/shared/utils.ts diff --git a/index.html b/index.html index 740034d..fb4640b 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Angular 2 QuickStart + @@ -13,9 +14,7 @@ diff --git a/package.json b/package.json index 178ca96..8c08ce3 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "core-js": "^2.4.1", "rxjs": "^5.0.1", "systemjs": "0.19.41", - "zone.js": "^0.7.8" + "zone.js": "^0.8.4" }, "devDependencies": { "concurrently": "^3.2.0", diff --git a/src/app.module.ts b/src/app.module.ts index c49181a..3a1540d 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -2,6 +2,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { LocationStrategy, HashLocationStrategy } from '@angular/common'; +import { CoreModule } from './core/core.module'; import { AppRoutingModule } from './app-routing.module'; import { TreeModule } from './tree/tree.module'; import { TableModule } from './table/table.module'; @@ -13,6 +14,7 @@ import { PageNotFoundComponent } from './page-not-found.component'; @NgModule({ imports: [ BrowserModule, + CoreModule, AppRoutingModule, TreeModule, TableModule diff --git a/src/core/core.module.ts b/src/core/core.module.ts new file mode 100644 index 0000000..2bebfc7 --- /dev/null +++ b/src/core/core.module.ts @@ -0,0 +1,17 @@ +import { NgModule, Optional, SkipSelf } from '@angular/core'; + +import { Logger } from './logger'; + +@NgModule({ + providers: [ + Logger + ] +}) +export class CoreModule { + constructor( @Optional() @SkipSelf() parentModule: CoreModule) { + if (parentModule) { + throw new Error( + 'CoreModule is already loaded. Import it in the AppModule only'); + } + } +} \ No newline at end of file diff --git a/src/core/logger.ts b/src/core/logger.ts new file mode 100644 index 0000000..af2a9a0 --- /dev/null +++ b/src/core/logger.ts @@ -0,0 +1,14 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class Logger { + stack: string[] = []; + + log(message: string) { + this.stack.push(message); + } + + clean() { + this.stack = []; + } +} \ No newline at end of file diff --git a/src/table/datatable.component.ts b/src/table/datatable.component.ts index f3c5ab9..6f59ab1 100644 --- a/src/table/datatable.component.ts +++ b/src/table/datatable.component.ts @@ -15,9 +15,9 @@ import { ColumnComponent } from './column.component'; - - - + + + {{row[column.value]}} - {{ column.header }} + {{ column.header }} diff --git a/src/tree/components.ts b/src/tree/components.ts new file mode 100644 index 0000000..f964483 --- /dev/null +++ b/src/tree/components.ts @@ -0,0 +1,287 @@ +import { Component, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, NgZone, AfterViewChecked } from '@angular/core'; + +import { toggleClass } from './shared/utils'; +import { Logger } from 'src/core/logger'; + +@Component({ + selector: 'comp1', + template: ` + 1 +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ ` +}) +export class Comp1Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp2', + template: ` + 2 +
    +
    • +
    • +
+ ` +}) +export class Comp2Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp3', + template: ` + 3 +
    +
  • + +
    • +
  • + +
    • +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class Comp3Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp4', + template: ` + 4 +
    +
    • +
    • +
  • + +
    • +
+ ` +}) +export class Comp4Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + + +@Component({ + selector: 'comp5', + template: `5` +}) +export class Comp5Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp6', + template: `6` +}) +export class Comp6Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + + + +@Component({ + selector: 'comp7', + template: ` + 7 +
    +
    • +
    • +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class Comp7Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp8', + template: `8` +}) +export class Comp8Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp9', + template: `9` +}) +export class Comp9Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp10', + template: `10` +}) +export class Comp10Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp11', + template: ` + 11 +
    +
    • +
    • +
+ ` +}) +export class Comp11Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp12', + template: `12` +}) +export class Comp12Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp13', + template: `13` +}) +export class Comp13Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp14', + template: `14` +}) +export class Comp14Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +@Component({ + selector: 'comp15', + template: `15` +}) +export class Comp15Component implements AfterViewChecked { + constructor( + private elRef: ElementRef, + private zone: NgZone) { } + + ngAfterViewChecked() { + toggleClass(this.elRef, this.zone); + } +} + +export const components = [ + Comp1Component, + Comp2Component, + Comp3Component, + Comp4Component, + Comp5Component, + Comp6Component, + Comp7Component, + Comp8Component, + Comp9Component, + Comp10Component, + Comp11Component, + Comp12Component, + Comp13Component, + Comp14Component, + Comp15Component +]; \ No newline at end of file diff --git a/src/tree/leafs/comp1.component.ts b/src/tree/leafs/comp1.component.ts deleted file mode 100644 index 94f17b2..0000000 --- a/src/tree/leafs/comp1.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - selector: 'comp1', - template: `{{i}}1` -}) -export class Comp1Component { - -} \ No newline at end of file diff --git a/src/tree/leafs/comp2.component.ts b/src/tree/leafs/comp2.component.ts deleted file mode 100644 index e28c2ba..0000000 --- a/src/tree/leafs/comp2.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - selector: 'comp2', - template: `2` -}) -export class Comp2Component {} \ No newline at end of file diff --git a/src/tree/leafs/comp3.component.ts b/src/tree/leafs/comp3.component.ts deleted file mode 100644 index 177cd57..0000000 --- a/src/tree/leafs/comp3.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - selector: 'comp3', - template: `3` -}) -export class Comp3Component {} \ No newline at end of file diff --git a/src/tree/leafs/comp4.component.ts b/src/tree/leafs/comp4.component.ts deleted file mode 100644 index b5045e5..0000000 --- a/src/tree/leafs/comp4.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from '@angular/core'; - - -@Component({ - selector: 'comp4', - template: `4` -}) -export class Comp4Component {} \ No newline at end of file diff --git a/src/tree/shared/utils.ts b/src/tree/shared/utils.ts new file mode 100644 index 0000000..03310fc --- /dev/null +++ b/src/tree/shared/utils.ts @@ -0,0 +1,35 @@ +import { NgZone, ElementRef } from '@angular/core'; + +let delay = 0; +export function toggleClass(el: ElementRef, zone: NgZone, className = 'checked') { + const a = el.nativeElement.querySelector('span'); + a.classList.add(className); + + zone.runOutsideAngular(() => { + setTimeout(() => { + a.classList.remove(className); + }, 200); + }); +} + +// let delay = 0; +// export function toggleClass(el: ElementRef, zone: NgZone, className = 'checked') { +// const a = el.nativeElement.querySelector('span'); +// // a.classList.add(className); +// let t = delay; +// delay += 150; +// zone.runOutsideAngular(() => { +// setTimeout(() => { + +// a.classList.add(className); +// setTimeout(() => { + +// a.classList.remove(className); +// }, t + 150); +// }, t); +// }); + +// zone.onMicrotaskEmpty.subscribe(x => { +// delay = 0; +// }) +// } \ No newline at end of file diff --git a/src/tree/tree.component.ts b/src/tree/tree.component.ts index b0554a8..464dd01 100644 --- a/src/tree/tree.component.ts +++ b/src/tree/tree.component.ts @@ -1,13 +1,22 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild, NgZone, ChangeDetectorRef } from '@angular/core'; @Component({ selector: 'my-tree', template: ` - my-tree -
- - +

Some tree

+
    +
  • + +
    • +
+ ` }) -export class TreeComponent {} \ No newline at end of file +export class TreeComponent { + + constructor() { + //document.addEventListener('mousemove', function(){}) + + } +} \ No newline at end of file diff --git a/src/tree/tree.module.ts b/src/tree/tree.module.ts index 0a1e63b..3b15e9c 100644 --- a/src/tree/tree.module.ts +++ b/src/tree/tree.module.ts @@ -4,11 +4,8 @@ import { CommonModule } from '@angular/common'; import { TreeRoutingModule } from './tree-routing.module'; import { TreeComponent } from './tree.component'; -import { Comp1Component } from "./leafs/comp1.component"; -import { Comp2Component } from "./leafs/comp2.component"; -import { Comp3Component } from "./leafs/comp3.component"; -import { Comp4Component } from "./leafs/comp4.component"; +import { components } from './components'; @NgModule({ imports: [ @@ -17,11 +14,7 @@ import { Comp4Component } from "./leafs/comp4.component"; ], declarations: [ TreeComponent, - Comp1Component, - Comp2Component, - Comp3Component, - - Comp4Component + ...components ] }) export class TreeModule { } \ No newline at end of file diff --git a/style.css b/style.css index dd1c904..0807bc9 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,7 @@ body { margin: 0; background: #dedede; + font-family: 'Roboto', sans-serif; } .page { @@ -13,7 +14,6 @@ body { display: flex; flex-direction: column; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); - } .body { @@ -21,9 +21,12 @@ body { padding: 20px 30px; } +h2 { + margin: 0; +} + .scroll { overflow-y: scroll; - transform: translateZ(0); } .scroll:hover::-webkit-scrollbar-thumb { @@ -47,7 +50,7 @@ body { nav { display: flex; - background: #f6f6f9; + background: #2a2d33; } nav a { @@ -55,40 +58,197 @@ nav a { text-decoration: none; padding: 0 30px; color: #0C0D0E; - border-bottom: 2px solid #fafafb; + border-top: 3px solid #2a2d33; + color: #fff; } nav a.active { - border-bottom: 2px solid #F48024; + border-top: 3px solid #F48024; + background: #eff0f1; + color: #242729; } nav a:hover, nav a:focus { background: #eff0f1; color: #242729; + border-top: 3px solid #F48024; } my-page-not-found { display: block; height: 1000px; } -comp1, comp2, comp3, comp4 { - float: left; - width: 50%; - padding: 15px; - box-sizing: border-box; - border: 1px solid; - text-align: center; -} +/* Tree */ + my-tree { display: block; + position: relative; +} + +my-tree ul { + padding-top: 20px; + position: relative; + margin: 0 -5px; +} + +my-tree * { + margin: 0; + padding: 0; +} + +my-tree li { + float: left; + text-align: center; + list-style-type: none; + position: relative; + padding: 20px 5px 0 5px; +} + +my-tree li:only-child { + padding-top: 0; +} + +my-tree span { + display: inline-block; padding: 10px; - border: 1px solid; + background: #4f515a; + color: #fff; + width: 50px; + border-radius: 50%; + line-height: 50px; + cursor: pointer; + z-index: 1; + position: relative; + box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3); +} + +my-tree span.checked { + background: #FF6700; +} + +my-tree span.on-push:before { + content: "onPush"; + position: absolute; + top: 0; + left: 100%; + transform: translateX(-30px); + background: #4caf50; + border-radius: 5px; + line-height: 26px; + padding: 0 5px; +} + + +my-tree li::before, my-tree li::after{ + content: ''; + position: absolute; top: 0; right: 50%; + border-top: 2px solid #c3c1c1; + width: 50%; height: 20px; +} +my-tree li::after{ + right: auto; left: 50%; + border-left: 2px solid #c3c1c1; +} + + +my-tree li:first-child::before, my-tree li:last-child::after{ + border: 0 none; +} + +my-tree li:last-child::before{ + border-right: 2px solid #c3c1c1; + border-radius: 0 5px 0 0; +} +my-tree li:first-child::after{ + border-radius: 5px 0 0 0; } -my-tree:after { - content: ""; - display: table; - clear: both; +my-tree ul::before{ + content: ''; + position: absolute; top: 0; + left: 50%; + border-left: 2px solid #c3c1c1; + width: 0; + height: 20px; +} + +my-tree > ul:before, +my-tree > ul > li:before { + display: none; +} + +/* Tree end */ + +.log { + position: fixed; + top: 0; + right: 0; +} + +.log-item { + padding: 0 10px; + line-height: 20px; + text-align: center; +} + + +.btn-run { + position: absolute; + top: 0; + right: 0; + color: #FFF; + line-height: 40px; + padding: 0 10px; + background-color: #369; + border: none; + cursor: pointer; +} + +/* Table */ + +table { + background: #fff none repeat scroll 0 0; + border-collapse: separate; + border-radius: 5px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + margin: 20px auto; + width: 100%; +} +thead { + border-radius: 5px; +} +thead th { + background-image: linear-gradient(#636569, #2a2d33); + background-size: 100% auto; + border-top: 1px solid #858d99; + color: #fff; + font-size: 16px; + font-weight: 400; + padding: 20px; + text-align: left; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); +} +thead th:first-child { + border-top-left-radius: 5px; +} +thead th:last-child { + border-top-right-radius: 5px; +} +tbody tr td { + border-bottom: 1px solid #e0e0e0; + padding: 20px; +} +tbody tr:nth-child(2n) { + background: #f0f3f5 none repeat scroll 0 0; +} +tbody tr:last-child td { + border-bottom: medium none; +} +tbody tr:last-child td:first-child { + border-bottom-left-radius: 5px; +} +tbody tr:last-child td:last-child { + border-bottom-right-radius: 5px; } diff --git a/systemjs.config.js b/systemjs.config.js index 1af5692..5e9ea00 100644 --- a/systemjs.config.js +++ b/systemjs.config.js @@ -11,6 +11,7 @@ // map tells the System loader where to look for things map: { // our app is within the app folder + src: 'dist', app: 'dist', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', @@ -23,7 +24,7 @@ '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries - // 'rxjs': 'npm:rxjs' + 'rxjs': 'npm:rxjs' }, // packages tells the System loader how to load when no filename and/or no extension packages: { @@ -31,9 +32,9 @@ main: './main.js', defaultExtension: 'js' }, - // rxjs: { - // defaultExtension: 'js' - // } + rxjs: { + defaultExtension: 'js' + } } }); })(this); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index d8d61b2..dbdf841 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "baseUrl": ".", "target": "es5", "module": "commonjs", "moduleResolution": "node", From 75163b6d67938cb9ed27a8194ba215996cd5527e Mon Sep 17 00:00:00 2001 From: alexzuza Date: Sun, 19 Mar 2017 15:21:57 +0400 Subject: [PATCH 03/10] Pagination --- src/app-routing.module.ts | 4 +- src/app.component.html | 1 + src/app.module.ts | 6 + src/sandbox/sandbox.component.ts | 31 +++++ src/shared/pipes/pager.pipe.ts | 14 ++ src/shared/share.module.ts | 13 ++ .../{ => components}/column.component.ts | 3 + .../{ => components}/datatable.component.ts | 0 src/table/components/pagination.component.ts | 128 ++++++++++++++++++ .../components/table-layout.component.ts | 57 ++++++++ src/table/models/photo.model.ts | 5 - src/table/models/photo.ts | 8 ++ src/table/models/photos.json | 21 +++ src/table/services/photos.service.ts | 21 +++ src/table/table-routing.module.ts | 4 +- src/table/table.component.ts | 39 ------ src/table/table.module.ts | 14 +- style.css | 34 +++++ 18 files changed, 351 insertions(+), 52 deletions(-) create mode 100644 src/sandbox/sandbox.component.ts create mode 100644 src/shared/pipes/pager.pipe.ts create mode 100644 src/shared/share.module.ts rename src/table/{ => components}/column.component.ts (95%) rename src/table/{ => components}/datatable.component.ts (100%) create mode 100644 src/table/components/pagination.component.ts create mode 100644 src/table/components/table-layout.component.ts delete mode 100644 src/table/models/photo.model.ts create mode 100644 src/table/models/photo.ts create mode 100644 src/table/models/photos.json create mode 100644 src/table/services/photos.service.ts delete mode 100644 src/table/table.component.ts diff --git a/src/app-routing.module.ts b/src/app-routing.module.ts index 71f21ed..fc679cf 100644 --- a/src/app-routing.module.ts +++ b/src/app-routing.module.ts @@ -2,9 +2,11 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PageNotFoundComponent } from "./page-not-found.component"; +import { SandBoxComponent } from './sandbox/sandbox.component'; export const routes: Routes = [ - { path: '', redirectTo: '/tree', pathMatch: 'full' } + { path: 'sandbox', component: SandBoxComponent }, + { path: '', redirectTo: '/sandbox', pathMatch: 'full' } ]; @NgModule({ diff --git a/src/app.component.html b/src/app.component.html index 26affa6..08d53eb 100644 --- a/src/app.component.html +++ b/src/app.component.html @@ -1,6 +1,7 @@