This commit is contained in:
crusader 2018-01-29 20:58:21 +09:00
commit 7bbe40877e
24 changed files with 741 additions and 12 deletions

View File

@ -19,7 +19,9 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "of",
"styles": [
"styles.scss"
"theme.scss",
"styles.scss",
"../node_modules/@covalent/core/common/platform.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",

View File

@ -22,6 +22,11 @@
"@angular/platform-browser": "^5.2.1",
"@angular/platform-browser-dynamic": "^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/effects": "^5.0.1",
"@ngrx/router-store": "^5.0.1",

View File

@ -6,6 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppReducerModule } from './app-reducer.module';
import { MaterialModule } from './commons/ui/material/material.module';
import { CovalentModule } from './commons/ui/covalent/covalent.module';
import { AppComponent } from './app.component';
@ -19,6 +20,7 @@ import { AppComponent } from './app.component';
AppRoutingModule,
AppReducerModule,
MaterialModule,
CovalentModule,
],
bootstrap: [AppComponent]
})

View File

@ -0,0 +1,5 @@
<td-layout-footer>
<div layout="row" layout-align="start center">
<span class="mat-caption">Copyright &copy; 2017 Loafle. All rights reserved</span>
</div>
</td-layout-footer>

View 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();
});
});

View 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() {
}
}

View 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>

View 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();
});
});

View 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() {
}
}

View File

@ -1,10 +1,13 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SidebarComponent } from './sidebar/sidebar.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({
imports: [
CommonModule
],
declarations: []
declarations: [SidebarComponent, HeaderComponent, FooterComponent]
})
export class LayoutsModule { }

View 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,
}
]
}
];

View 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>

View 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();
});
});

View 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() {
}
}

View 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 { }

View File

@ -1,3 +1,3 @@
<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>

View File

@ -1,4 +1,12 @@
<div>header</div>
<div>sidebar</div>
<router-outlet></router-outlet>
<div>footer</div>
<td-layout>
<td-layout-nav>
<of-header></of-header>
<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>

View File

@ -2,14 +2,24 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PagesComponent } from './pages.component';
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({
imports: [
CommonModule,
PagesRoutingModule,
CovalentModule,
MaterialModule
],
declarations: [
PagesComponent
PagesComponent,
SidebarComponent,
HeaderComponent,
FooterComponent,
]
})
export class PagesModule { }

View File

@ -1,3 +1,35 @@
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
// 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;
}
}
}

78
src/theme.scss Normal file
View 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;
}
}

View File

@ -164,6 +164,38 @@
dependencies:
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":
version "1.2.0"
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"
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:
version "1.1.0"
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"
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:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -7377,7 +7419,7 @@ yargs-parser@^7.0.0:
dependencies:
camelcase "^4.1.0"
yargs@6.6.0:
yargs@6.6.0, yargs@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
dependencies: