layout
This commit is contained in:
insanity
parent
7bbe40877e
commit
3f7b4a7322
|
|
@ -19,9 +19,8 @@
|
|||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "of",
|
||||
"styles": [
|
||||
"theme.scss",
|
||||
"styles.scss",
|
||||
"../node_modules/@covalent/core/common/platform.scss"
|
||||
"theme/theme.scss",
|
||||
"theme/typography.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"@angular/common": "^5.2.1",
|
||||
"@angular/compiler": "^5.2.1",
|
||||
"@angular/core": "^5.2.1",
|
||||
"@angular/flex-layout": "^2.0.0-beta.12",
|
||||
"@angular/forms": "^5.2.1",
|
||||
"@angular/material": "^5.1.0",
|
||||
"@angular/platform-browser": "^5.2.1",
|
||||
|
|
@ -34,6 +35,7 @@
|
|||
"@ngrx/store-devtools": "^5.0.1",
|
||||
"core-js": "^2.5.3",
|
||||
"hammerjs": "^2.0.8",
|
||||
"ngx-perfect-scrollbar": "^5.3.1",
|
||||
"rxjs": "^5.5.6",
|
||||
"zone.js": "^0.8.20"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
<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>
|
||||
<mat-toolbar class="mat-elevation-z4">
|
||||
<button mat-icon-button (click)="sidenav.toggle();drawer.toggle();" *ngIf="matDrawerShow">
|
||||
<i class="material-icons app-toolbar-menu">menu </i>
|
||||
</button>
|
||||
<button mat-icon-button (click)="sidenav.toggle();" *ngIf="!matDrawerShow">
|
||||
<i class="material-icons app-toolbar-menu">menu </i>
|
||||
</button>
|
||||
<span class="spacer"></span>
|
||||
|
||||
<of-notification [notifications]="toolbarHelpers?.notifications"></of-notification>
|
||||
|
||||
</mat-toolbar>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
:host {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.main-toolbar {
|
||||
height: 64px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
height: 100%;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.mat-icon-button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input } from '@angular/core';
|
||||
import { ToolbarHelpers } from './toolbar.helpers';
|
||||
|
||||
@Component({
|
||||
selector: 'of-header',
|
||||
|
|
@ -7,6 +8,14 @@ import { Component, OnInit } from '@angular/core';
|
|||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
||||
@Input() sidenav;
|
||||
@Input() sidebar;
|
||||
@Input() drawer;
|
||||
@Input() matDrawerShow;
|
||||
|
||||
searchOpen = false;
|
||||
toolbarHelpers = ToolbarHelpers;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
|||
22
src/app/commons/layouts/header/toolbar.helpers.ts
Normal file
22
src/app/commons/layouts/header/toolbar.helpers.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
export const ToolbarHelpers = {
|
||||
notifications: [
|
||||
{
|
||||
id: 'id',
|
||||
title: 'Mail 5',
|
||||
lastTime: '23 Minutes ago',
|
||||
state: 'state'
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
title: 'Mail 5',
|
||||
lastTime: '23 Minutes ago',
|
||||
state: 'state'
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
title: 'Mail 5',
|
||||
lastTime: '23 Minutes ago',
|
||||
state: 'state'
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
|
|||
import { SidebarComponent } from './sidebar/sidebar.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { FooterComponent } from './footer/footer.component';
|
||||
import { MenuItemComponent } from './menu-item/menu-item.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
declarations: [SidebarComponent, HeaderComponent, FooterComponent]
|
||||
declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent]
|
||||
})
|
||||
export class LayoutsModule { }
|
||||
|
|
|
|||
19
src/app/commons/layouts/menu-item/menu-item.component.html
Normal file
19
src/app/commons/layouts/menu-item/menu-item.component.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<mat-nav-list [style.height]="getHeight()" [ngClass]="{'secondaryMenu': secondaryMenu}">
|
||||
|
||||
<mat-list-item *ngIf = "menu.link==false" (click)="menu.open = !menu.open" >
|
||||
|
||||
<mat-icon matListIcon iconsmall >{{menu.icon}} </mat-icon>
|
||||
|
||||
<h3 matLine *ngIf="!iconOnly">{{ menu.name }} </h3>
|
||||
<mat-chip-list *ngIf="menu?.chip && !iconOnly">
|
||||
<mat-chip >{{menu?.chip?.value}} </mat-chip>
|
||||
</mat-chip-list>
|
||||
<mat-icon *ngIf="chechForChildMenu()" class="sidenav-dropdown-indicator rotate " [ngClass]="{'indicateOpen':menu.open}"> expand_more</mat-icon>
|
||||
|
||||
</mat-list-item>
|
||||
<mat-list-item *ngIf = "menu.link!=false" (click)="menu.open = !menu.open" [routerLink]="[menu.link]">
|
||||
<mat-icon matListIcon iconsmall >{{menu.icon}} </mat-icon>
|
||||
<h3 matLine *ngIf="!iconOnly">{{ menu.name }} </h3>
|
||||
</mat-list-item>
|
||||
<of-menu-item *ngFor="let submenu of menu?.sub" [menu]="submenu" [iconOnly]="iconOnly" [secondaryMenu]="true"> </of-menu-item>
|
||||
</mat-nav-list>
|
||||
38
src/app/commons/layouts/menu-item/menu-item.component.scss
Normal file
38
src/app/commons/layouts/menu-item/menu-item.component.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@mixin mat-list-icon($size: 24px) {
|
||||
font-size: $size;
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
@mixin mat-chip() {
|
||||
padding: 1px 7px;
|
||||
}
|
||||
|
||||
@mixin menu-item($theme,$icon-size) {
|
||||
.sidenav-dropdown-indicator {
|
||||
transition: transform .25s;
|
||||
&.indicateOpen {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
mat-nav-list {
|
||||
overflow: hidden;
|
||||
height: 48px;
|
||||
transition: height .4s cubic-bezier(.35, 0, .25, 1);
|
||||
}
|
||||
|
||||
.secondaryMenu {
|
||||
background: mat-color($primary, 500); ;
|
||||
}
|
||||
|
||||
.mat-nav-list .mat-list-item .mat-list-icon{
|
||||
@include mat-list-icon($icon-size);
|
||||
}
|
||||
.mat-chip:not(.mat-basic-chip){
|
||||
@include mat-chip()
|
||||
}
|
||||
.mat-nav-list .mat-list-item {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MenuItemComponent } from './menu-item.component';
|
||||
|
||||
describe('MenuItemComponent', () => {
|
||||
let component: MenuItemComponent;
|
||||
let fixture: ComponentFixture<MenuItemComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MenuItemComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MenuItemComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
37
src/app/commons/layouts/menu-item/menu-item.component.ts
Normal file
37
src/app/commons/layouts/menu-item/menu-item.component.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'of-menu-item',
|
||||
templateUrl: './menu-item.component.html',
|
||||
styleUrls: ['./menu-item.component.scss']
|
||||
})
|
||||
export class MenuItemComponent implements OnInit {
|
||||
|
||||
@Input() menu;
|
||||
@Input() iconOnly: boolean;
|
||||
@Input() secondaryMenu = false;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
openLink() {
|
||||
this.menu.open = this.menu.open;
|
||||
}
|
||||
getHeight() {
|
||||
|
||||
if (this.menu.open === false) {
|
||||
return '48px';
|
||||
} else {
|
||||
if (this.menu && this.menu.sub) {
|
||||
const height = (this.menu.sub.length * 56) + 56 + 'px';
|
||||
return height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
chechForChildMenu() {
|
||||
return (this.menu && this.menu.sub) ? true : false;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,312 +1,83 @@
|
|||
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': 'Home',
|
||||
'icon': 'home',
|
||||
'link': '/home',
|
||||
'open': true,
|
||||
},
|
||||
{
|
||||
'name': 'Material Widget',
|
||||
'name': 'Infra',
|
||||
'icon': 'widgets',
|
||||
'link': false,
|
||||
'open': false,
|
||||
'sub': [
|
||||
{
|
||||
'name': 'Buttons',
|
||||
'link': 'material-widgets/buttons',
|
||||
'name': 'Map',
|
||||
'link': '/auth/signin',
|
||||
'icon': 'indeterminate_check_box',
|
||||
'chip': false,
|
||||
'open': false,
|
||||
},
|
||||
{
|
||||
'name': 'List',
|
||||
'link': 'material-widgets/list',
|
||||
'icon': 'list',
|
||||
'name': 'Sensors',
|
||||
'link': '',
|
||||
'icon': 'indeterminate_check_box',
|
||||
'chip': false,
|
||||
'open': false,
|
||||
},
|
||||
{
|
||||
|
||||
'name': 'Stepper',
|
||||
'link': 'material-widgets/stepper',
|
||||
'icon': 'view_week',
|
||||
'name': 'Probes',
|
||||
'link': '',
|
||||
'icon': 'indeterminate_check_box',
|
||||
'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',
|
||||
'name': 'Monitor',
|
||||
'icon': 'widgets',
|
||||
'link': false,
|
||||
'open': false,
|
||||
'chip': { 'value': 2, 'color': 'accent' },
|
||||
'sub': [
|
||||
{
|
||||
'name': 'Fixed',
|
||||
'icon': 'filter_list',
|
||||
'link': 'tables/fixed',
|
||||
'name': 'Overview',
|
||||
'link': '',
|
||||
'icon': 'indeterminate_check_box',
|
||||
'chip': false,
|
||||
'open': false,
|
||||
},
|
||||
{
|
||||
'name': 'Feature',
|
||||
'icon': 'done_all',
|
||||
'link': 'tables/featured',
|
||||
'name': 'Dashboards',
|
||||
'link': '',
|
||||
'icon': 'indeterminate_check_box',
|
||||
'chip': false,
|
||||
'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,
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
'name': 'Alert',
|
||||
'icon': 'warning',
|
||||
'link': '',
|
||||
'open': true,
|
||||
},
|
||||
{
|
||||
'name': 'Report',
|
||||
'icon': '',
|
||||
'link': '',
|
||||
'open': true,
|
||||
},
|
||||
{
|
||||
'name': 'Log',
|
||||
'icon': '',
|
||||
'link': '',
|
||||
'open': true,
|
||||
},
|
||||
{
|
||||
'name': 'Setting',
|
||||
'icon': '',
|
||||
'link': '',
|
||||
'open': true,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,57 +1,13 @@
|
|||
<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">
|
||||
<perfect-scrollbar style="height: calc(100% - 33px);">
|
||||
|
||||
<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 fxLayout="column" >
|
||||
<!-- <div *ngIf="!iconOnly" fxLayoutAlign="space-around center" [style.margin]="'10px 0px'" >
|
||||
<img width="100" [style.borderRadius]="'50%'" src="./assets/images/user-image.jpg">
|
||||
</div>
|
||||
<div *ngIf="iconOnly" style="height: 100px;" fxLayoutAlign="space-around center" >
|
||||
<img width="50" [style.borderRadius]="'50%'" src="./assets/images/user-image.jpg">
|
||||
</div> -->
|
||||
<of-menu-item *ngFor="let menu of menus" [menu]="menu" [iconOnly]="iconOnly"> </of-menu-item>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
|
||||
</perfect-scrollbar>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@mixin sidemenu($theme) {
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -8,6 +8,9 @@ import { menus } from './menu-element';
|
|||
})
|
||||
export class SidebarComponent implements OnInit {
|
||||
|
||||
@Input() iconOnly = false;
|
||||
public menus = menus;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
MatSlideToggleModule, MatInputModule, MatCheckboxModule,
|
||||
MatToolbarModule, MatSnackBarModule, MatSidenavModule,
|
||||
MatTabsModule, MatSelectModule, MatRadioModule,
|
||||
MatAutocompleteModule, MatFormFieldModule
|
||||
MatAutocompleteModule, MatFormFieldModule, MatChipsModule
|
||||
} from '@angular/material';
|
||||
|
||||
const MATERIAL_MODULES: any[] = [
|
||||
|
|
@ -15,7 +15,7 @@ const MATERIAL_MODULES: any[] = [
|
|||
MatSlideToggleModule, MatInputModule, MatCheckboxModule,
|
||||
MatToolbarModule, MatSnackBarModule, MatSidenavModule,
|
||||
MatTabsModule, MatSelectModule, MatRadioModule,
|
||||
MatAutocompleteModule, MatFormFieldModule
|
||||
MatAutocompleteModule, MatFormFieldModule, MatChipsModule
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
52
src/app/packages/notification/notification.component.html
Normal file
52
src/app/packages/notification/notification.component.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
|
||||
<div class="toolbar-notification-container">
|
||||
<button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
|
||||
<mat-icon>notifications_none</mat-icon>
|
||||
<span class="badge" *ngIf="notifications && notifications?.length !== 0">{{ notifications?.length }}</span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown mat-elevation-z4" [class.open]="isOpen">
|
||||
|
||||
<div class="card">
|
||||
<div class="header" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="title">
|
||||
<div class="name">Notifications</div>
|
||||
<div class="extra">
|
||||
You have {{ notifications?.length }} new notifications</div>
|
||||
</div>
|
||||
<button type="button" mat-icon-button>
|
||||
<mat-icon class="icon">settings</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="notifications?.length !== 0; then thenBlock else elseBlock;"></div>
|
||||
<div class="footer" fxLayout="row" fxLayoutAlign="center center">
|
||||
<div class="action">Mark all as read</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<ng-template #thenBlock>
|
||||
<perfect-scrollbar class="content">
|
||||
<div *ngFor="let notification of notifications; last as isLast">
|
||||
<div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
|
||||
<mat-icon class="icon">notifications</mat-icon>
|
||||
<div class="title" fxLayout="column">
|
||||
<div class="name">{{ notification.title }}</div>
|
||||
<div class="time">{{ notification.lastTime }}</div>
|
||||
</div>
|
||||
<span fxFlex></span>
|
||||
<button type="button" mat-icon-button (click)="delete(notification)">
|
||||
<mat-icon class="close">close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="divider" *ngIf="!isLast"></div>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #elseBlock>
|
||||
<div class="no" fxLayout="row" fxLayoutAlign="center center">????</div>
|
||||
</ng-template>
|
||||
165
src/app/packages/notification/notification.component.scss
Normal file
165
src/app/packages/notification/notification.component.scss
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
$prefix: 'notification';
|
||||
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
font-weight: 700;
|
||||
line-height: 13px;
|
||||
height: 13px;
|
||||
padding: 5px;
|
||||
border-radius: 26%;
|
||||
width: 30%;
|
||||
background-color: #f44336;
|
||||
color: #fff;
|
||||
border-color:#f44336
|
||||
}
|
||||
|
||||
.#{$prefix} {
|
||||
&-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 42px;
|
||||
right: 28px;
|
||||
min-width: 350px;
|
||||
z-index: 2;
|
||||
transform: translateY(0) scale(0);
|
||||
transform-origin: top right;
|
||||
visibility: hidden;
|
||||
transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
min-width: 50vw;
|
||||
right: 5px;
|
||||
transform: translateY(0);
|
||||
visibility: hidden;
|
||||
transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: translateY(0) scale(1);
|
||||
visibility: visible;
|
||||
}
|
||||
.card {
|
||||
|
||||
.header {
|
||||
background: #EEEEEE;
|
||||
min-height: 54px;
|
||||
padding-left: 16px;
|
||||
padding-right: 8px;
|
||||
color: #555;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
||||
.extra {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
overflow: hidden;
|
||||
max-height: 256px;
|
||||
|
||||
.notification {
|
||||
min-height: 64px;
|
||||
padding: 0 16px 0 14px;
|
||||
position: relative;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 18px;
|
||||
margin-right: 13px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #FFF;
|
||||
color: #888;
|
||||
border: 1px solid #EEE;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
.icon {
|
||||
background: #ccc;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.accent {
|
||||
.icon {
|
||||
background: #aaa;
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
&.warn {
|
||||
.icon {
|
||||
background: #eee;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
&.read {
|
||||
color: #999;
|
||||
|
||||
.name {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
min-height: 42px;
|
||||
border-top: 1px solid #EEE;
|
||||
|
||||
.action {
|
||||
cursor: pointer;
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: calc(100% - 30px);
|
||||
height: 1px;
|
||||
background: #EEE;
|
||||
margin: 0 16px 0 14px;
|
||||
}
|
||||
}
|
||||
25
src/app/packages/notification/notification.component.spec.ts
Normal file
25
src/app/packages/notification/notification.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NotificationComponent } from './notification.component';
|
||||
|
||||
describe('NotificationComponent', () => {
|
||||
let component: NotificationComponent;
|
||||
let fixture: ComponentFixture<NotificationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NotificationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NotificationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
27
src/app/packages/notification/notification.component.ts
Normal file
27
src/app/packages/notification/notification.component.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'of-notification',
|
||||
templateUrl: './notification.component.html',
|
||||
styleUrls: ['./notification.component.scss']
|
||||
})
|
||||
export class NotificationComponent implements OnInit {
|
||||
|
||||
cssPrefix = 'toolbar-notification';
|
||||
isOpen = false;
|
||||
@Input() notifications = [];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
select() {
|
||||
|
||||
}
|
||||
|
||||
delete(notification) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,12 +1,37 @@
|
|||
<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>
|
||||
<mat-sidenav-container class="container" fullscreen>
|
||||
|
||||
<mat-sidenav [mode]="sideNavMode" class="sidenav" #sidenav [opened]="sideNavOpened" style="overflow: hidden;">
|
||||
<mat-toolbar color="primary" class="mat-elevation-z4">
|
||||
<img src="./assets/images/logo.codetok.png" width="36px">
|
||||
<h1 style="font-size: 26px;font-family: Roboto;color:white;margin-top: 8px">
|
||||
overFlow
|
||||
<span style="font-size: 12px;">.com</span>
|
||||
</h1>
|
||||
</mat-toolbar>
|
||||
|
||||
<of-sidebar></of-sidebar>
|
||||
|
||||
</mat-sidenav>
|
||||
|
||||
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
|
||||
<mat-drawer-container fullscreen>
|
||||
<mat-drawer mode="side" #drawer class="drawer" [opened]="matDrawerOpened" style="overflow: hidden;">
|
||||
<mat-toolbar color="primary" class="mat-elevation-z4">
|
||||
<img src="./assets/images/logo.codetok.png" width="36px">
|
||||
</mat-toolbar>
|
||||
<of-sidebar [iconOnly]="true"></of-sidebar>
|
||||
</mat-drawer>
|
||||
<mat-drawer-content style="overflow: hidden;">
|
||||
|
||||
<of-header [sidenav]="sidenav" [drawer]="drawer" [sidebar]="sidenav2" [matDrawerShow]="matDrawerShow" style="z-index: 500"></of-header>
|
||||
|
||||
<perfect-scrollbar style="height: calc(100% - 33px);">
|
||||
<div style="height: 100%;">
|
||||
<router-outlet #route="outlet"></router-outlet>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
</mat-sidenav-content>
|
||||
|
||||
</mat-sidenav-container>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
@mixin auth($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
|
||||
.sidenav,.drawer{
|
||||
background: mat-color($primary,400);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
[no-over-flow] {
|
||||
overflow: hidden;
|
||||
}
|
||||
.router-outlet{
|
||||
position: relative;padding: 0px 5px;
|
||||
}
|
||||
.spacer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Input, OnChanges } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'of-pages',
|
||||
|
|
@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
|
|||
})
|
||||
export class PagesComponent implements OnInit {
|
||||
|
||||
@Input() isVisible = true;
|
||||
visibility = 'shown';
|
||||
|
||||
sideNavOpened = true;
|
||||
matDrawerOpened = false;
|
||||
matDrawerShow = true;
|
||||
sideNavMode = 'side';
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
getRouteAnimation(outlet) {
|
||||
return outlet.activatedRouteData.animation;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,19 +7,40 @@ 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';
|
||||
import { MenuItemComponent } from 'app/commons/layouts/menu-item/menu-item.component';
|
||||
import {
|
||||
PerfectScrollbarModule,
|
||||
PERFECT_SCROLLBAR_CONFIG,
|
||||
PerfectScrollbarConfigInterface
|
||||
} from 'ngx-perfect-scrollbar';
|
||||
import { NotificationComponent } from 'app/packages/notification/notification.component';
|
||||
|
||||
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
suppressScrollX: true
|
||||
};
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
PagesRoutingModule,
|
||||
CovalentModule,
|
||||
MaterialModule
|
||||
MaterialModule,
|
||||
PerfectScrollbarModule,
|
||||
],
|
||||
declarations: [
|
||||
PagesComponent,
|
||||
SidebarComponent,
|
||||
HeaderComponent,
|
||||
FooterComponent,
|
||||
MenuItemComponent,
|
||||
NotificationComponent
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: PERFECT_SCROLLBAR_CONFIG,
|
||||
useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
|
||||
}
|
||||
]
|
||||
})
|
||||
export class PagesModule { }
|
||||
|
|
|
|||
BIN
src/assets/images/logo.codetok.png
Normal file
BIN
src/assets/images/logo.codetok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
18
src/assets/images/typography.scss
Normal file
18
src/assets/images/typography.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import '~@angular/material/theming';
|
||||
|
||||
$custom-typography: mat-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat-typography-level(112px, 112px, 300),
|
||||
$display-3: mat-typography-level(56px, 56px, 300),
|
||||
$display-2: mat-typography-level(45px, 48px, 300),
|
||||
$display-1: mat-typography-level(34px, 40px, 300),
|
||||
$headline: mat-typography-level(14px, 32px, 300),
|
||||
$title: mat-typography-level(20px, 32px, 300),
|
||||
$subheading-2: mat-typography-level(22px, 28px, 300),
|
||||
$subheading-1: mat-typography-level(15px, 24px, 300),
|
||||
$body-2: mat-typography-level(14px, 24px, 300),
|
||||
$body-1: mat-typography-level(14px, 20px, 300),
|
||||
$caption: mat-typography-level(12px, 20px, 300),
|
||||
$button: mat-typography-level(14px, 14px, 300),
|
||||
$input: mat-typography-level(16px, 1.125, 300)
|
||||
);
|
||||
BIN
src/assets/images/user-image.jpg
Normal file
BIN
src/assets/images/user-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
|
|
@ -6,3 +6,17 @@
|
|||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
export const palete = {
|
||||
primary: '#D32F2F',
|
||||
accent: '#E65100',
|
||||
warm: '#C2185B',
|
||||
name: '#D50000',
|
||||
secondary: '#D81B60',
|
||||
tertiary: '#8E24AA',
|
||||
quaternary: '#5E35B1',
|
||||
quinary: '#3949AB',
|
||||
secondaryLight: '#E91E63',
|
||||
tertiaryLight: '#9C27B0',
|
||||
quaternaryLight: '#673AB7',
|
||||
quinaryLight: '#3F51B5'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +1,32 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OverflowWebapp</title>
|
||||
<title>overFlow</title>
|
||||
<base href="/">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
||||
crossorigin="" />
|
||||
<link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<of-root></of-root>
|
||||
|
||||
<div class="loader-container">
|
||||
<div class="spinner">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
||||
crossorigin=""></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,35 +1 @@
|
|||
// 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/deeppurple-amber.css';
|
||||
158
src/theme/theme.scss
Normal file
158
src/theme/theme.scss
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
@import '~@angular/material/theming';
|
||||
@import '~app/pages/pages.component.scss';
|
||||
@import '~app/commons/layouts/sidebar/sidebar.component.scss';
|
||||
@import '~app/commons/layouts/menu-item/menu-item.component.scss';
|
||||
|
||||
$mat-light-theme-background: (
|
||||
status-bar: map_get($mat-grey, 300),
|
||||
app-bar: map_get($mat-grey, 100),
|
||||
background: map_get($mat-indigo, 50),
|
||||
hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: $black-12-opacity,
|
||||
raised-button: white,
|
||||
focused-button: $black-6-opacity,
|
||||
selected-button: map_get($mat-grey, 300),
|
||||
selected-disabled-button: map_get($mat-grey, 400),
|
||||
disabled-button-toggle: map_get($mat-grey, 200),
|
||||
unselected-chip: map_get($mat-grey, 300),
|
||||
disabled-list-option: map_get($mat-grey, 200),
|
||||
);
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$primary : $mat-indigo;
|
||||
$accent : $mat-orange;
|
||||
$warn : $mat-red;
|
||||
|
||||
|
||||
|
||||
$primary-app-primary: mat-palette($primary , 400);
|
||||
$primary-app-accent: mat-palette($accent , 900);
|
||||
$primary-app-warn: mat-palette($warn );
|
||||
$cdk-theme: mat-light-theme($primary-app-primary, $primary-app-accent,$primary-app-warn);
|
||||
|
||||
of-sidebar{
|
||||
$sidebar-app-primary: mat-palette($primary , 400);
|
||||
$sidebar-app-accent: mat-palette($accent , 900);
|
||||
$sidebar-app-warn: mat-palette($warn );
|
||||
$cdk-sidebar-theme: mat-dark-theme($sidebar-app-primary, $sidebar-app-accent,$sidebar-app-warn);
|
||||
@include mat-list-theme($cdk-sidebar-theme);
|
||||
}
|
||||
|
||||
|
||||
of-menu-item{
|
||||
@include menu-item($cdk-theme,20px)
|
||||
}
|
||||
|
||||
@include angular-material-theme($cdk-theme);
|
||||
@include auth($cdk-theme);
|
||||
|
||||
html {
|
||||
height:100%;
|
||||
}
|
||||
body{
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
height:100%;
|
||||
}
|
||||
.components-container-gt-xs {
|
||||
padding: 20px;
|
||||
// background-color: #fdfdfd;
|
||||
}
|
||||
.components-container-xs {
|
||||
padding: 5px !important;
|
||||
// background-color: #fdfdfd;
|
||||
}
|
||||
.component-preview {
|
||||
padding: 20px;
|
||||
}
|
||||
.ps-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
background-color: white;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2000;
|
||||
position: absolute;
|
||||
|
||||
-moz-animation: cssAnimation 1s ease-in 3s forwards;
|
||||
/* Firefox */
|
||||
animation: cssAnimation 1s ease-in 3s forwards;
|
||||
/* Safari and Chrome */
|
||||
-o-animation: cssAnimation 1s ease-in 3s forwards;
|
||||
/* Opera */
|
||||
animation: cssAnimation 1s ease-in 3s forwards;
|
||||
animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@keyframes cssAnimation {
|
||||
to {
|
||||
opacity:0;
|
||||
display: none;
|
||||
visibility:hidden;
|
||||
}
|
||||
}
|
||||
@keyframes cssAnimation {
|
||||
to {
|
||||
visibility:hidden;
|
||||
opacity:0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.spinner {
|
||||
margin: 50vh auto 0;
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.spinner > div {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.bounce3 {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.spinner .bounce1 {
|
||||
background-color: blue;
|
||||
animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.spinner .bounce2 {
|
||||
background-color: red;
|
||||
animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { transform: scale(0) }
|
||||
40% { transform: scale(1.0) }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
18
src/theme/typography.scss
Normal file
18
src/theme/typography.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import '~@angular/material/theming';
|
||||
|
||||
$custom-typography: mat-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
|
||||
$display-4: mat-typography-level(112px, 112px, 300),
|
||||
$display-3: mat-typography-level(56px, 56px, 300),
|
||||
$display-2: mat-typography-level(45px, 48px, 300),
|
||||
$display-1: mat-typography-level(34px, 40px, 300),
|
||||
$headline: mat-typography-level(14px, 32px, 300),
|
||||
$title: mat-typography-level(20px, 32px, 300),
|
||||
$subheading-2: mat-typography-level(22px, 28px, 300),
|
||||
$subheading-1: mat-typography-level(15px, 24px, 300),
|
||||
$body-2: mat-typography-level(14px, 24px, 300),
|
||||
$body-1: mat-typography-level(14px, 20px, 300),
|
||||
$caption: mat-typography-level(12px, 20px, 300),
|
||||
$button: mat-typography-level(14px, 14px, 300),
|
||||
$input: mat-typography-level(16px, 1.125, 300)
|
||||
);
|
||||
21
yarn.lock
21
yarn.lock
|
|
@ -130,6 +130,12 @@
|
|||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@angular/flex-layout@^2.0.0-beta.12":
|
||||
version "2.0.0-beta.12"
|
||||
resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-2.0.0-beta.12.tgz#80970dc1d60f27fa41537659926f3238f759f343"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@angular/forms@^5.2.1":
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.1.tgz#530f1249bc71d9560297be642d55a5a6c439d920"
|
||||
|
|
@ -4434,6 +4440,13 @@ netmask@~1.0.4:
|
|||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
|
||||
|
||||
ngx-perfect-scrollbar@^5.3.1:
|
||||
version "5.3.1"
|
||||
resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc"
|
||||
dependencies:
|
||||
perfect-scrollbar "^1.3.0"
|
||||
resize-observer-polyfill "^1.4.0"
|
||||
|
||||
no-case@^2.2.0:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
|
||||
|
|
@ -4990,6 +5003,10 @@ pbkdf2@^3.0.3:
|
|||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
perfect-scrollbar@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
|
||||
|
||||
performance-now@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
|
||||
|
|
@ -5855,6 +5872,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
|
|||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
|
||||
|
||||
resize-observer-polyfill@^1.4.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
|
||||
|
||||
resolve-cwd@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user