Merge branch 'master' of https://git.loafle.net/overflow/overflow-webapp
This commit is contained in:
commit
7bbe40877e
|
@ -19,7 +19,9 @@
|
||||||
"testTsconfig": "tsconfig.spec.json",
|
"testTsconfig": "tsconfig.spec.json",
|
||||||
"prefix": "of",
|
"prefix": "of",
|
||||||
"styles": [
|
"styles": [
|
||||||
"styles.scss"
|
"theme.scss",
|
||||||
|
"styles.scss",
|
||||||
|
"../node_modules/@covalent/core/common/platform.scss"
|
||||||
],
|
],
|
||||||
"scripts": [],
|
"scripts": [],
|
||||||
"environmentSource": "environments/environment.ts",
|
"environmentSource": "environments/environment.ts",
|
||||||
|
|
|
@ -22,6 +22,11 @@
|
||||||
"@angular/platform-browser": "^5.2.1",
|
"@angular/platform-browser": "^5.2.1",
|
||||||
"@angular/platform-browser-dynamic": "^5.2.1",
|
"@angular/platform-browser-dynamic": "^5.2.1",
|
||||||
"@angular/router": "^5.2.1",
|
"@angular/router": "^5.2.1",
|
||||||
|
"@covalent/core": "^1.0.0-rc.4",
|
||||||
|
"@covalent/dynamic-forms": "^1.0.0-rc.4",
|
||||||
|
"@covalent/highlight": "^1.0.0-rc.4",
|
||||||
|
"@covalent/http": "^1.0.0-rc.4",
|
||||||
|
"@covalent/markdown": "^1.0.0-rc.4",
|
||||||
"@ngrx/core": "^1.2.0",
|
"@ngrx/core": "^1.2.0",
|
||||||
"@ngrx/effects": "^5.0.1",
|
"@ngrx/effects": "^5.0.1",
|
||||||
"@ngrx/router-store": "^5.0.1",
|
"@ngrx/router-store": "^5.0.1",
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppReducerModule } from './app-reducer.module';
|
import { AppReducerModule } from './app-reducer.module';
|
||||||
import { MaterialModule } from './commons/ui/material/material.module';
|
import { MaterialModule } from './commons/ui/material/material.module';
|
||||||
|
import { CovalentModule } from './commons/ui/covalent/covalent.module';
|
||||||
|
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
@ -19,6 +20,7 @@ import { AppComponent } from './app.component';
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
AppReducerModule,
|
AppReducerModule,
|
||||||
MaterialModule,
|
MaterialModule,
|
||||||
|
CovalentModule,
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
|
5
src/app/commons/layouts/footer/footer.component.html
Normal file
5
src/app/commons/layouts/footer/footer.component.html
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
<td-layout-footer>
|
||||||
|
<div layout="row" layout-align="start center">
|
||||||
|
<span class="mat-caption">Copyright © 2017 Loafle. All rights reserved</span>
|
||||||
|
</div>
|
||||||
|
</td-layout-footer>
|
25
src/app/commons/layouts/footer/footer.component.spec.ts
Normal file
25
src/app/commons/layouts/footer/footer.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FooterComponent } from './footer.component';
|
||||||
|
|
||||||
|
describe('FooterComponent', () => {
|
||||||
|
let component: FooterComponent;
|
||||||
|
let fixture: ComponentFixture<FooterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FooterComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FooterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
src/app/commons/layouts/footer/footer.component.ts
Normal file
15
src/app/commons/layouts/footer/footer.component.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'of-footer',
|
||||||
|
templateUrl: './footer.component.html',
|
||||||
|
styleUrls: ['./footer.component.scss']
|
||||||
|
})
|
||||||
|
export class FooterComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
11
src/app/commons/layouts/header/header.component.html
Normal file
11
src/app/commons/layouts/header/header.component.html
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<div td-toolbar-content layout="row" layout-align="start center" flex>
|
||||||
|
<button mat-icon-button class="td-menu-button" (click)="sidenav.toggle()" mdTooltip="Main menu">
|
||||||
|
<mat-icon>menu</mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-icon class="mat-icon-logo"></mat-icon>
|
||||||
|
<span>overFlow</span>
|
||||||
|
<span flex></span>
|
||||||
|
<button mat-icon-button>
|
||||||
|
<mat-icon>notifications</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
25
src/app/commons/layouts/header/header.component.spec.ts
Normal file
25
src/app/commons/layouts/header/header.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { HeaderComponent } from './header.component';
|
||||||
|
|
||||||
|
describe('HeaderComponent', () => {
|
||||||
|
let component: HeaderComponent;
|
||||||
|
let fixture: ComponentFixture<HeaderComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ HeaderComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(HeaderComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
15
src/app/commons/layouts/header/header.component.ts
Normal file
15
src/app/commons/layouts/header/header.component.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'of-header',
|
||||||
|
templateUrl: './header.component.html',
|
||||||
|
styleUrls: ['./header.component.scss']
|
||||||
|
})
|
||||||
|
export class HeaderComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,10 +1,13 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { SidebarComponent } from './sidebar/sidebar.component';
|
||||||
|
import { HeaderComponent } from './header/header.component';
|
||||||
|
import { FooterComponent } from './footer/footer.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule
|
CommonModule
|
||||||
],
|
],
|
||||||
declarations: []
|
declarations: [SidebarComponent, HeaderComponent, FooterComponent]
|
||||||
})
|
})
|
||||||
export class LayoutsModule { }
|
export class LayoutsModule { }
|
||||||
|
|
312
src/app/commons/layouts/sidebar/menu-element.ts
Normal file
312
src/app/commons/layouts/sidebar/menu-element.ts
Normal file
|
@ -0,0 +1,312 @@
|
||||||
|
export const menus = [
|
||||||
|
{
|
||||||
|
'name': 'Dashboard',
|
||||||
|
'icon': 'dashboard',
|
||||||
|
'link': false,
|
||||||
|
'open': false,
|
||||||
|
'chip': { 'value': 1, 'color': 'accent' },
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'Dashboard',
|
||||||
|
'link': '/auth/dashboard',
|
||||||
|
'icon': 'dashboard',
|
||||||
|
'chip': false,
|
||||||
|
'open': true,
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Material Widget',
|
||||||
|
'icon': 'widgets',
|
||||||
|
'link': false,
|
||||||
|
'open': false,
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'Buttons',
|
||||||
|
'link': 'material-widgets/buttons',
|
||||||
|
'icon': 'indeterminate_check_box',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'List',
|
||||||
|
'link': 'material-widgets/list',
|
||||||
|
'icon': 'list',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
'name': 'Stepper',
|
||||||
|
'link': 'material-widgets/stepper',
|
||||||
|
'icon': 'view_week',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Expansion',
|
||||||
|
'link': 'material-widgets/expansion',
|
||||||
|
'icon': 'web_aaset',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Progress Spinner',
|
||||||
|
'link': 'material-widgets/spinner',
|
||||||
|
'icon': 'cached',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Cards',
|
||||||
|
'link': 'material-widgets/cards',
|
||||||
|
'icon': 'crop_16_9',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Icons',
|
||||||
|
'link': 'material-widgets/icons',
|
||||||
|
'icon': 'gif',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
|
||||||
|
'name': 'AutoComplete',
|
||||||
|
'link': 'material-widgets/autocomplete',
|
||||||
|
'icon': 'get_app',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'CheckBox',
|
||||||
|
'link': 'material-widgets/checkbox',
|
||||||
|
'icon': 'check_box',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'DatePicker',
|
||||||
|
'link': 'material-widgets/datepicker',
|
||||||
|
'icon': 'date_range',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
'name': 'Slider',
|
||||||
|
'link': 'material-widgets/slider',
|
||||||
|
'icon': 'keyboard_tab',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Slide Toggle',
|
||||||
|
'link': 'material-widgets/slide-toggle',
|
||||||
|
'icon': 'album',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Menu',
|
||||||
|
'icon': 'menu',
|
||||||
|
'link': 'material-widgets/menu',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Progress Bar',
|
||||||
|
'link': 'material-widgets/progress-bar',
|
||||||
|
'icon': 'trending_flat',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Input',
|
||||||
|
'icon': 'input',
|
||||||
|
'link': 'material-widgets/input',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Radio',
|
||||||
|
'icon': 'radio_button_checked',
|
||||||
|
'link': 'material-widgets/radio',
|
||||||
|
'chip': false,
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Select',
|
||||||
|
'icon': 'select_all',
|
||||||
|
'link': 'material-widgets/select',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// 'name' : 'Forms',
|
||||||
|
// 'icon' : 'mode_edit',
|
||||||
|
// 'open' : false,
|
||||||
|
// 'link' : false,
|
||||||
|
// 'sub' : [
|
||||||
|
// {
|
||||||
|
// 'name': 'Template Driven',
|
||||||
|
// 'icon': 'mode_edit',
|
||||||
|
// 'open' : false,
|
||||||
|
// 'link':'forms/template_forms'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// 'name': 'Reactive Forms',
|
||||||
|
// 'icon': 'text_fields',
|
||||||
|
// 'open' : false,
|
||||||
|
// 'link':'forms/reactive_forms'
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
'name': 'Tables',
|
||||||
|
'icon': 'list',
|
||||||
|
'link': false,
|
||||||
|
'open': false,
|
||||||
|
'chip': { 'value': 2, 'color': 'accent' },
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'Fixed',
|
||||||
|
'icon': 'filter_list',
|
||||||
|
'link': 'tables/fixed',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Feature',
|
||||||
|
'icon': 'done_all',
|
||||||
|
'link': 'tables/featured',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Responsive Tables',
|
||||||
|
'icon': 'filter_center_focus',
|
||||||
|
'link': 'tables/responsive',
|
||||||
|
'open': false,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Guarded Routes',
|
||||||
|
'icon': 'mode_edit',
|
||||||
|
'link': '/auth/guarded-routes',
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
|
||||||
|
}, {
|
||||||
|
'name': 'Scrumboard',
|
||||||
|
'open': false,
|
||||||
|
'link': '/auth/scrumboard',
|
||||||
|
'icon': 'grade',
|
||||||
|
}, {
|
||||||
|
'name': 'Applications',
|
||||||
|
'icon': 'view_module',
|
||||||
|
'open': false,
|
||||||
|
'link': false,
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'chat',
|
||||||
|
'icon': 'chat',
|
||||||
|
'link': 'chats/chat',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'mail',
|
||||||
|
'icon': 'mail',
|
||||||
|
'link': 'mail/mail',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'Editor',
|
||||||
|
'icon': 'editor',
|
||||||
|
'link': 'editor/editor',
|
||||||
|
'open': false,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
'name': 'Pages',
|
||||||
|
'icon': 'content_copy',
|
||||||
|
'open': false,
|
||||||
|
'link': false,
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'Login',
|
||||||
|
'icon': 'work',
|
||||||
|
'open': false,
|
||||||
|
'link': '../login',
|
||||||
|
}, {
|
||||||
|
'name': 'Services',
|
||||||
|
'icon': 'local_laundry_service',
|
||||||
|
'open': false,
|
||||||
|
'link': 'pages/services',
|
||||||
|
}, {
|
||||||
|
'name': 'Contact',
|
||||||
|
'icon': 'directions',
|
||||||
|
'open': false,
|
||||||
|
'link': 'pages/contact'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
, {
|
||||||
|
|
||||||
|
'name': 'Charts',
|
||||||
|
'icon': 'pie_chart_outlined',
|
||||||
|
'open': false,
|
||||||
|
'link': false,
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'chartjs',
|
||||||
|
'icon': 'view_list',
|
||||||
|
'link': 'charts/chartjs',
|
||||||
|
'open': false,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'ngx-chart',
|
||||||
|
'icon': 'show_chart',
|
||||||
|
'open': false,
|
||||||
|
'link': 'charts/ngx-charts',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'nvd3',
|
||||||
|
'icon': 'pie_chart',
|
||||||
|
'open': false,
|
||||||
|
'link': 'charts/nvd3-charts',
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
'name': 'maps',
|
||||||
|
'icon': 'map',
|
||||||
|
'open': false,
|
||||||
|
'link': false,
|
||||||
|
'sub': [
|
||||||
|
{
|
||||||
|
'name': 'google-map',
|
||||||
|
'icon': 'directions',
|
||||||
|
'link': 'maps/googlemap',
|
||||||
|
'open': false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'leaflet-map',
|
||||||
|
'icon': 'directions',
|
||||||
|
'link': 'maps/leafletmap',
|
||||||
|
'open': false,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
];
|
57
src/app/commons/layouts/sidebar/sidebar.component.html
Normal file
57
src/app/commons/layouts/sidebar/sidebar.component.html
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
<mat-sidenav #sidenav mode="side" opened="true" style="width:257px;border-right:1px solid #ccc">
|
||||||
|
<div flex class="mat-content bgc-grey-50">
|
||||||
|
<mat-nav-list td-sidenav-content class="bgc-purple-900">
|
||||||
|
|
||||||
|
<h3 mat-header class="tc-white">
|
||||||
|
User profile area
|
||||||
|
</h3>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<a mat-list-item class="tc-white" routerLink="">
|
||||||
|
<mat-icon class="tc-white" matListIcon>home</mat-icon> Home
|
||||||
|
</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<h3 mat-subheader class="tc-white">
|
||||||
|
INFRA
|
||||||
|
</h3>
|
||||||
|
<a mat-list-item class="tc-white" routerLink="map">
|
||||||
|
<mat-icon class="tc-white" matListIcon>forum</mat-icon>Map</a>
|
||||||
|
<a mat-list-item class="tc-white" routerLink="sensors">
|
||||||
|
<mat-icon class="tc-white" matListIcon>forum</mat-icon>Sensors</a>
|
||||||
|
<a mat-list-item class="tc-white" routerLink="probes">
|
||||||
|
<mat-icon class="tc-white" matListIcon>forum</mat-icon>Probes</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<h3 mat-subheader class="tc-white">
|
||||||
|
MONITOR
|
||||||
|
</h3>
|
||||||
|
<a mat-list-item class="tc-white" routerLink="overview">
|
||||||
|
<mat-icon class="tc-white" matListIcon>forum</mat-icon>Overview</a>
|
||||||
|
<a mat-list-item class="tc-white" routerLink="dashboards">
|
||||||
|
<mat-icon class="tc-white" matListIcon>forum</mat-icon>Dashboards</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<a mat-list-item class="tc-white" routerLink="alert">
|
||||||
|
<mat-icon class="tc-white" matListIcon>warning</mat-icon> Alert
|
||||||
|
</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<a mat-list-item class="tc-white" routerLink="report">
|
||||||
|
<mat-icon class="tc-white" matListIcon>announcement</mat-icon> Report
|
||||||
|
</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<a mat-list-item class="tc-white" routerLink="log">
|
||||||
|
<mat-icon class="tc-white" matListIcon>history</mat-icon> Log
|
||||||
|
</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
<a mat-list-item class="tc-white" routerLink="setting">
|
||||||
|
<mat-icon class="tc-white" matListIcon>settings</mat-icon> Setting
|
||||||
|
</a>
|
||||||
|
<mat-divider></mat-divider>
|
||||||
|
|
||||||
|
</mat-nav-list>
|
||||||
|
</div>
|
||||||
|
</mat-sidenav>
|
25
src/app/commons/layouts/sidebar/sidebar.component.spec.ts
Normal file
25
src/app/commons/layouts/sidebar/sidebar.component.spec.ts
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { SidebarComponent } from './sidebar.component';
|
||||||
|
|
||||||
|
describe('SidebarComponent', () => {
|
||||||
|
let component: SidebarComponent;
|
||||||
|
let fixture: ComponentFixture<SidebarComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ SidebarComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(SidebarComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
16
src/app/commons/layouts/sidebar/sidebar.component.ts
Normal file
16
src/app/commons/layouts/sidebar/sidebar.component.ts
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
import { menus } from './menu-element';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'of-sidebar',
|
||||||
|
templateUrl: './sidebar.component.html',
|
||||||
|
styleUrls: ['./sidebar.component.scss']
|
||||||
|
})
|
||||||
|
export class SidebarComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
41
src/app/commons/ui/covalent/covalent.module.ts
Normal file
41
src/app/commons/ui/covalent/covalent.module.ts
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import {
|
||||||
|
CovalentCommonModule, CovalentLayoutModule, CovalentMediaModule, CovalentExpansionPanelModule,
|
||||||
|
CovalentStepsModule, CovalentLoadingModule, CovalentDialogsModule, CovalentSearchModule, CovalentPagingModule,
|
||||||
|
CovalentNotificationsModule, CovalentMenuModule, CovalentDataTableModule, CovalentMessageModule
|
||||||
|
} from '@covalent/core';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [
|
||||||
|
CovalentCommonModule,
|
||||||
|
CovalentLayoutModule,
|
||||||
|
CovalentMediaModule,
|
||||||
|
CovalentExpansionPanelModule,
|
||||||
|
CovalentStepsModule,
|
||||||
|
CovalentDialogsModule,
|
||||||
|
CovalentLoadingModule,
|
||||||
|
CovalentSearchModule,
|
||||||
|
CovalentPagingModule,
|
||||||
|
CovalentNotificationsModule,
|
||||||
|
CovalentMenuModule,
|
||||||
|
CovalentDataTableModule,
|
||||||
|
CovalentMessageModule,
|
||||||
|
],
|
||||||
|
exports : [
|
||||||
|
CovalentCommonModule,
|
||||||
|
CovalentLayoutModule,
|
||||||
|
CovalentMediaModule,
|
||||||
|
CovalentExpansionPanelModule,
|
||||||
|
CovalentStepsModule,
|
||||||
|
CovalentDialogsModule,
|
||||||
|
CovalentLoadingModule,
|
||||||
|
CovalentSearchModule,
|
||||||
|
CovalentPagingModule,
|
||||||
|
CovalentNotificationsModule,
|
||||||
|
CovalentMenuModule,
|
||||||
|
CovalentDataTableModule,
|
||||||
|
CovalentMessageModule,
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export class CovalentModule { }
|
|
@ -1,3 +1,3 @@
|
||||||
<p>
|
<p>
|
||||||
home works!
|
home works! home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!home works!
|
||||||
</p>
|
</p>
|
||||||
|
|
|
@ -1,4 +1,12 @@
|
||||||
<div>header</div>
|
<td-layout>
|
||||||
<div>sidebar</div>
|
<td-layout-nav>
|
||||||
<router-outlet></router-outlet>
|
<of-header></of-header>
|
||||||
<div>footer</div>
|
<mat-sidenav-container fullscreen>
|
||||||
|
<of-sidebar></of-sidebar>
|
||||||
|
<div tdMediaToggle="gt-xs" [mediaClasses]="['push-md']">
|
||||||
|
<router-outlet></router-outlet>
|
||||||
|
</div>
|
||||||
|
</mat-sidenav-container>
|
||||||
|
</td-layout-nav>
|
||||||
|
<of-footer></of-footer>
|
||||||
|
</td-layout>
|
|
@ -2,14 +2,24 @@ import { NgModule } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { PagesComponent } from './pages.component';
|
import { PagesComponent } from './pages.component';
|
||||||
import { PagesRoutingModule } from './pages-routing.module';
|
import { PagesRoutingModule } from './pages-routing.module';
|
||||||
|
import { SidebarComponent } from 'app/commons/layouts/sidebar/sidebar.component';
|
||||||
|
import { CovalentModule } from 'app/commons/ui/covalent/covalent.module';
|
||||||
|
import { MaterialModule } from 'app/commons/ui/material/material.module';
|
||||||
|
import { HeaderComponent } from 'app/commons/layouts/header/header.component';
|
||||||
|
import { FooterComponent } from 'app/commons/layouts/footer/footer.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
PagesRoutingModule,
|
PagesRoutingModule,
|
||||||
|
CovalentModule,
|
||||||
|
MaterialModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
PagesComponent
|
PagesComponent,
|
||||||
|
SidebarComponent,
|
||||||
|
HeaderComponent,
|
||||||
|
FooterComponent,
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class PagesModule { }
|
export class PagesModule { }
|
||||||
|
|
|
@ -1,3 +1,35 @@
|
||||||
/* You can add global styles to this file, and also import other style files */
|
// Adjust your logo position
|
||||||
|
.mat-icon {
|
||||||
|
&.mat-icon-logo {
|
||||||
|
position: relative;
|
||||||
|
top: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hack for small search box
|
||||||
|
.td-search-box {
|
||||||
|
.td-search-icon.mat-icon-button {
|
||||||
|
margin: 0;
|
||||||
|
height: 30px;
|
||||||
|
.mat-icon {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td-search-input {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
.mat-form-field {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.mat-form-field-wrapper {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.mat-input-infix {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.mat-form-field-infix {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
|
||||||
|
|
78
src/theme.scss
Normal file
78
src/theme.scss
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
/*
|
||||||
|
* Copyright (C) 2016-2017 by Teradata Corporation. All rights reserved.
|
||||||
|
* TERADATA CORPORATION CONFIDENTIAL AND TRADE SECRET
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import '~@angular/material/theming';
|
||||||
|
@import '~@covalent/core/theming/all-theme';
|
||||||
|
// Plus imports for other components in your app.
|
||||||
|
|
||||||
|
// Include the base styles for Angular Material core. We include this here so that you only
|
||||||
|
// have to load a single css file for Angular Material in your app.
|
||||||
|
@include mat-core();
|
||||||
|
|
||||||
|
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||||
|
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||||
|
// hue.
|
||||||
|
$primary: mat-palette($mat-purple, 900, 100, 900);
|
||||||
|
$accent: mat-palette($mat-teal, 600, 100, 900);
|
||||||
|
|
||||||
|
// The warn palette is optional (defaults to red).
|
||||||
|
$warn: mat-palette($mat-red, 600, 100, 900);
|
||||||
|
|
||||||
|
// Create the theme object (a Sass map containing all of the palettes).
|
||||||
|
$theme: mat-light-theme($primary, $accent, $warn);
|
||||||
|
|
||||||
|
// Include theme styles for core and each component used in your app.
|
||||||
|
// Alternatively, you can import and @include the theme mixins for each component
|
||||||
|
// that you are using.
|
||||||
|
@include angular-material-theme($theme);
|
||||||
|
@include covalent-theme($theme);
|
||||||
|
|
||||||
|
// Active icon color in list nav
|
||||||
|
mat-nav-list, mat-list {
|
||||||
|
[mat-list-item].active {
|
||||||
|
mat-icon[matListAvatar] {
|
||||||
|
background-color: mat-color($accent);
|
||||||
|
color: mat-color($accent, default-contrast);
|
||||||
|
}
|
||||||
|
mat-icon[matListIcon] {
|
||||||
|
color: mat-color($accent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------------------- */
|
||||||
|
$foreground: map-get($theme, foreground);
|
||||||
|
$background: map-get($theme, background);
|
||||||
|
|
||||||
|
// Apply theme for this app
|
||||||
|
|
||||||
|
// NGX Charts
|
||||||
|
[ngx-charts-axis-label] text {
|
||||||
|
fill: mat-color($foreground, secondary-text);
|
||||||
|
}
|
||||||
|
.tick text {
|
||||||
|
fill: mat-color($foreground, disabled);
|
||||||
|
}
|
||||||
|
.gridline-path {
|
||||||
|
&.gridline-path-horizontal,
|
||||||
|
&.gridline-path-vertical {
|
||||||
|
stroke: rgba(black, 0.06);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.legend-title-text {
|
||||||
|
color: mat-color($foreground, secondary-text);
|
||||||
|
}
|
||||||
|
mat-card-title{
|
||||||
|
&:hover {
|
||||||
|
cursor: grab;
|
||||||
|
cursor: -moz-grab;
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
cursor: -moz-grabbing;
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
}
|
||||||
|
}
|
44
yarn.lock
44
yarn.lock
|
@ -164,6 +164,38 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
tslib "^1.7.1"
|
tslib "^1.7.1"
|
||||||
|
|
||||||
|
"@covalent/core@^1.0.0-rc.4":
|
||||||
|
version "1.0.0-rc.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@covalent/core/-/core-1.0.0-rc.4.tgz#11990106c38233dc4ba8bc6d295847732cd94351"
|
||||||
|
dependencies:
|
||||||
|
tslib "^1.7.1"
|
||||||
|
|
||||||
|
"@covalent/dynamic-forms@^1.0.0-rc.4":
|
||||||
|
version "1.0.0-rc.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@covalent/dynamic-forms/-/dynamic-forms-1.0.0-rc.4.tgz#efc2b8ae059d99fabe23f27cf4f2531df2558b29"
|
||||||
|
dependencies:
|
||||||
|
"@covalent/core" "^1.0.0-rc.4"
|
||||||
|
|
||||||
|
"@covalent/highlight@^1.0.0-rc.4":
|
||||||
|
version "1.0.0-rc.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@covalent/highlight/-/highlight-1.0.0-rc.4.tgz#1d3c4c17a0aa69cbaf6ad36ae10fafc517997b45"
|
||||||
|
dependencies:
|
||||||
|
highlight.js "9.11.0"
|
||||||
|
tslib "^1.7.1"
|
||||||
|
|
||||||
|
"@covalent/http@^1.0.0-rc.4":
|
||||||
|
version "1.0.0-rc.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@covalent/http/-/http-1.0.0-rc.4.tgz#e600b2f5066cf4a5d36ebf018a3473673f2615cd"
|
||||||
|
dependencies:
|
||||||
|
tslib "^1.7.1"
|
||||||
|
|
||||||
|
"@covalent/markdown@^1.0.0-rc.4":
|
||||||
|
version "1.0.0-rc.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@covalent/markdown/-/markdown-1.0.0-rc.4.tgz#94e8efbf8ffb04907ea4e8d84f30d33592ebafea"
|
||||||
|
dependencies:
|
||||||
|
showdown "1.6.4"
|
||||||
|
tslib "^1.7.1"
|
||||||
|
|
||||||
"@ngrx/core@^1.2.0":
|
"@ngrx/core@^1.2.0":
|
||||||
version "1.2.0"
|
version "1.2.0"
|
||||||
resolved "https://registry.yarnpkg.com/@ngrx/core/-/core-1.2.0.tgz#882b46abafa2e0e6d887cb71a1b2c2fa3e6d0dc6"
|
resolved "https://registry.yarnpkg.com/@ngrx/core/-/core-1.2.0.tgz#882b46abafa2e0e6d887cb71a1b2c2fa3e6d0dc6"
|
||||||
|
@ -2985,6 +3017,10 @@ he@1.1.x:
|
||||||
version "1.1.1"
|
version "1.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
|
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
|
||||||
|
|
||||||
|
highlight.js@9.11.0:
|
||||||
|
version "9.11.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.11.0.tgz#47f98c7399918700db2caf230ded12cec41a84ae"
|
||||||
|
|
||||||
hipchat-notifier@^1.1.0:
|
hipchat-notifier@^1.1.0:
|
||||||
version "1.1.0"
|
version "1.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e"
|
resolved "https://registry.yarnpkg.com/hipchat-notifier/-/hipchat-notifier-1.1.0.tgz#b6d249755437c191082367799d3ba9a0f23b231e"
|
||||||
|
@ -6111,6 +6147,12 @@ shell-quote@^1.6.1:
|
||||||
array-reduce "~0.0.0"
|
array-reduce "~0.0.0"
|
||||||
jsonify "~0.0.0"
|
jsonify "~0.0.0"
|
||||||
|
|
||||||
|
showdown@1.6.4:
|
||||||
|
version "1.6.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/showdown/-/showdown-1.6.4.tgz#056bbb654ecdb8d8643ae12d6d597893ccaf46c6"
|
||||||
|
dependencies:
|
||||||
|
yargs "^6.6.0"
|
||||||
|
|
||||||
signal-exit@^3.0.0:
|
signal-exit@^3.0.0:
|
||||||
version "3.0.2"
|
version "3.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
|
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
|
||||||
|
@ -7377,7 +7419,7 @@ yargs-parser@^7.0.0:
|
||||||
dependencies:
|
dependencies:
|
||||||
camelcase "^4.1.0"
|
camelcase "^4.1.0"
|
||||||
|
|
||||||
yargs@6.6.0:
|
yargs@6.6.0, yargs@^6.6.0:
|
||||||
version "6.6.0"
|
version "6.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
|
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
|
||||||
dependencies:
|
dependencies:
|
||||||
|
|
Loading…
Reference in New Issue
Block a user