diff --git a/package-lock.json b/package-lock.json index 2531d4c0..9010d44c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,9 +46,17 @@ } }, "@angular/animations": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.3.3.tgz", - "integrity": "sha1-tx3dRTZzkp9VCxccypmVKzqqgxw=", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.6.tgz", + "integrity": "sha1-+mYYmaik44y3xYPHpcl85l1ZKjU=", + "requires": { + "tslib": "1.7.1" + } + }, + "@angular/cdk": { + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz", + "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=", "requires": { "tslib": "1.7.1" } @@ -180,6 +188,14 @@ "integrity": "sha1-Y4z8oTQsOU9xP4wPo5jCYDLhVvQ=", "dev": true }, + "@angular/material": { + "version": "2.0.0-beta.12", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.12.tgz", + "integrity": "sha1-cbbQt7AhiR5dDjaIwdS9eMdFf1g=", + "requires": { + "tslib": "1.7.1" + } + }, "@angular/platform-browser": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.3.tgz", diff --git a/package.json b/package.json index aee1dade..744b45fd 100644 --- a/package.json +++ b/package.json @@ -12,12 +12,14 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.0.0", + "@angular/animations": "^4.4.6", + "@angular/cdk": "^2.0.0-beta.12", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", + "@angular/material": "^2.0.0-beta.12", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f84e1ffd..e74ced1b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,7 @@ import { Component, OnInit } from '@angular/core'; +import {Http} from "@angular/http"; +import {MatIconRegistry} from "@angular/material"; +import {DomSanitizer} from "@angular/platform-browser"; @Component({ selector: 'app-root', @@ -6,6 +9,10 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { + constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer) { + iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg')); + } + ngOnInit(): void { } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 93e47692..69113c1c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MapComponent } from './map/map.component'; import { ProjectMapComponent } from './project-map/project-map.component'; -import { ServerCreateModalComponent, ServersComponent } from './servers/servers.component'; +import { ServersComponent, AddServerDialogComponent } from './servers/servers.component'; import { ProjectsComponent } from './projects/projects.component'; import { VersionService } from './services/version.service'; @@ -23,13 +23,28 @@ import { HttpServer } from "./services/http-server.service"; import { DefaultLayoutComponent } from './default-layout/default-layout.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { + MatButtonModule, + MatCardModule, + MatMenuModule, + MatToolbarModule, + MatIconModule, + MatFormFieldModule, + MatInputModule, + MatTableModule, + MatDialogModule +} from '@angular/material'; + +import {CdkTableModule} from "@angular/cdk/table"; + @NgModule({ declarations: [ AppComponent, MapComponent, ProjectMapComponent, ServersComponent, - ServerCreateModalComponent, + AddServerDialogComponent, ProjectsComponent, DefaultLayoutComponent, ], @@ -38,7 +53,18 @@ import { DefaultLayoutComponent } from './default-layout/default-layout.componen BrowserModule, HttpModule, AppRoutingModule, - FormsModule + FormsModule, + BrowserAnimationsModule, + MatButtonModule, + MatMenuModule, + MatCardModule, + MatToolbarModule, + MatIconModule, + MatFormFieldModule, + MatInputModule, + MatTableModule, + MatDialogModule, + CdkTableModule ], providers: [ D3Service, @@ -50,7 +76,7 @@ import { DefaultLayoutComponent } from './default-layout/default-layout.componen HttpServer, ], entryComponents: [ - ServerCreateModalComponent, + AddServerDialogComponent ], bootstrap: [ AppComponent ] }) diff --git a/src/app/default-layout/default-layout.component.css b/src/app/default-layout/default-layout.component.css index e69de29b..3d6acf14 100644 --- a/src/app/default-layout/default-layout.component.css +++ b/src/app/default-layout/default-layout.component.css @@ -0,0 +1,53 @@ +html, body { + height: 100%; +} + +app-root, app-default-layout { + height: 100%; +} + +app-default-layout { + display: flex; + flex-direction: column; + height: 100vh; +} + +.content { + flex: 1 0 auto; +} + +.footer { + flex-shrink: 0; + padding: 20px; + background-color: #e91e63; + color: white; +} + +.default-content { + margin: 0 auto; + max-width: 940px; + padding-top: 20px; + padding-bottom: 20px; +} + +main { + height: 100%; +} + +.default-header h1 { + font-weight: 300; + margin: 0; + font-size: 20px; + padding: 28px 8px; + color: white; +} + +.default-header { + padding-left: 20px; + background-color: #e91e63; +} + +.buttons-bar { + padding-top: 10px; + text-align: right; +} diff --git a/src/app/default-layout/default-layout.component.html b/src/app/default-layout/default-layout.component.html index 76bc0610..69a01884 100644 --- a/src/app/default-layout/default-layout.component.html +++ b/src/app/default-layout/default-layout.component.html @@ -1,19 +1,18 @@ - +
+ + - + Servers + +
-