From a4145f153db6d1364891f828137c758b364f32e0 Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Tue, 3 Nov 2020 00:52:33 +1100 Subject: [PATCH] dashboard component added to menu item. --- src/app/app-routing.module.ts | 8 +++--- src/app/app.component.html | 8 ++++-- src/app/app.component.scss | 13 +++++++++- src/app/app.module.ts | 4 ++- src/app/dashboard/dashboard.component.html | 1 + src/app/dashboard/dashboard.component.scss | 0 src/app/dashboard/dashboard.component.spec.ts | 25 +++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 15 +++++++++++ src/app/dist/app-routing.module.js | 6 ++++- src/app/dist/app.component.css | 12 ++++++++- src/app/dist/main-menu-items.js | 4 +-- src/app/main-menu-items.ts | 4 +-- 12 files changed, 87 insertions(+), 13 deletions(-) create mode 100644 src/app/dashboard/dashboard.component.html create mode 100644 src/app/dashboard/dashboard.component.scss create mode 100644 src/app/dashboard/dashboard.component.spec.ts create mode 100644 src/app/dashboard/dashboard.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index cb2f6c6..81fb884 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,10 +1,12 @@ import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Routes, RouterModule } from '@angular/router'; +import { DashboardComponent } from './dashboard/dashboard.component'; -const routes: Routes = []; +const routes: Routes = [ + {path : '', component: DashboardComponent}, + {path : 'dashboard', component: DashboardComponent} +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/app.component.html b/src/app/app.component.html index dc34861..1053107 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1,9 @@ + +
+ +
+ +

Right-click to open Context menu

- - \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 4a7d00b..66e21de 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,7 +3,7 @@ border-radius: 5px; height: 100px; width: 400px; - background-color: #f6f6f6; + background-color: yellowgreen; display: flex; justify-content: center; align-items: center; @@ -13,4 +13,15 @@ font-size: 20px; color: #656565; margin: 0; +} + +.topMenuBar { + left: 0px; + top: 0px; + // position: absolute; + margin : 0px; + width : 100%; + display: block; + background-color: rgb(229, 230, 218); + box-shadow : 0px 0px 2px 0px #d6d2d2 } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9e5adbe..c0096a6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,11 +8,13 @@ import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu'; //App import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; +import { DashboardComponent } from './dashboard/dashboard.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DashboardComponent ], imports: [ BrowserModule, diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..9c5fce9 --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1 @@ +

dashboard works!

diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..5ec4ff8 --- /dev/null +++ b/src/app/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..843c80f --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'] +}) +export class DashboardComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/dist/app-routing.module.js b/src/app/dist/app-routing.module.js index 44f051a..620b5a3 100644 --- a/src/app/dist/app-routing.module.js +++ b/src/app/dist/app-routing.module.js @@ -9,7 +9,11 @@ exports.__esModule = true; exports.AppRoutingModule = void 0; var core_1 = require("@angular/core"); var router_1 = require("@angular/router"); -var routes = []; +var dashboard_component_1 = require("./dashboard/dashboard.component"); +var routes = [ + { path: '', component: dashboard_component_1.DashboardComponent }, + { path: 'dashboard', component: dashboard_component_1.DashboardComponent } +]; var AppRoutingModule = /** @class */ (function () { function AppRoutingModule() { } diff --git a/src/app/dist/app.component.css b/src/app/dist/app.component.css index 6441fa4..d775929 100644 --- a/src/app/dist/app.component.css +++ b/src/app/dist/app.component.css @@ -2,7 +2,7 @@ border-radius: 5px; height: 100px; width: 400px; - background-color: #f6f6f6; + background-color: yellowgreen; display: flex; justify-content: center; align-items: center; @@ -13,4 +13,14 @@ font-size: 20px; color: #656565; margin: 0; +} + +.topMenuBar { + left: 0px; + top: 0px; + margin: 0px; + width: 100%; + display: block; + background-color: #e5e6da; + box-shadow: 0px 0px 2px 0px #d6d2d2; } \ No newline at end of file diff --git a/src/app/dist/main-menu-items.js b/src/app/dist/main-menu-items.js index 7f331a8..64258c9 100644 --- a/src/app/dist/main-menu-items.js +++ b/src/app/dist/main-menu-items.js @@ -4,11 +4,11 @@ exports.mainMenuItems = void 0; exports.mainMenuItems = [ { text: 'Item1a中文', - items: [{ text: 'Item1.1' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }] + items: [{ text: 'Item1.1', url: '/dashboard' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }] }, { text: 'Item2', - items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }] + items: [{ text: 'Item2.1', url: 'https://google.com.au' }, { text: 'Item2.2' }, { text: 'Item2.3' }] }, { text: 'Item3' diff --git a/src/app/main-menu-items.ts b/src/app/main-menu-items.ts index 08542c4..bdb5746 100644 --- a/src/app/main-menu-items.ts +++ b/src/app/main-menu-items.ts @@ -1,11 +1,11 @@ export const mainMenuItems: any[] = [ { text: 'Item1a中文', - items: [{ text: 'Item1.1' }, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }] + items: [{ text: 'Item1.1', url: '/dashboard'}, { text: 'Item1.2', items: [{ text: 'Item1.2.1' }, { text: 'Item1.2.2' }] }] }, { text: 'Item2', - items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }] + items: [{ text: 'Item2.1', url: 'https://google.com.au' }, { text: 'Item2.2' }, { text: 'Item2.3' }] }, { text: 'Item3'