mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-11-04 01:03:33 +00:00
fuse2...
This commit is contained in:
Sercan Yemen
parent
829f570913
commit
a8844e8b46
@ -1,57 +1,57 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "fuse2"
|
||||
},
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json"
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"project": {
|
||||
"name": "fuse2"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json"
|
||||
"apps": [
|
||||
{
|
||||
"root": "src",
|
||||
"outDir": "dist",
|
||||
"assets": [
|
||||
"assets",
|
||||
"favicon.ico"
|
||||
],
|
||||
"index": "index.html",
|
||||
"main": "main.ts",
|
||||
"polyfills": "polyfills.ts",
|
||||
"test": "test.ts",
|
||||
"tsconfig": "tsconfig.app.json",
|
||||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"styles.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
"dev": "environments/environment.ts",
|
||||
"prod": "environments/environment.prod.ts"
|
||||
}
|
||||
}
|
||||
],
|
||||
"e2e": {
|
||||
"protractor": {
|
||||
"config": "./protractor.conf.js"
|
||||
}
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
"lint": [
|
||||
{
|
||||
"project": "src/tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"project": "src/tsconfig.spec.json"
|
||||
},
|
||||
{
|
||||
"project": "e2e/tsconfig.e2e.json"
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "scss",
|
||||
"component": {}
|
||||
}
|
||||
],
|
||||
"test": {
|
||||
"karma": {
|
||||
"config": "./karma.conf.js"
|
||||
}
|
||||
},
|
||||
"defaults": {
|
||||
"styleExt": "scss",
|
||||
"component": {}
|
||||
}
|
||||
}
|
||||
|
||||
7
.flooignore
Normal file
7
.flooignore
Normal file
@ -0,0 +1,7 @@
|
||||
extern
|
||||
node_modules
|
||||
tmp
|
||||
vendor
|
||||
.idea/workspace.xml
|
||||
.idea/misc.xml
|
||||
assets/.gitkeep
|
||||
655
package-lock.json
generated
655
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
@ -12,29 +12,30 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^4.2.5",
|
||||
"@angular/animations": "^4.2.6",
|
||||
"@angular/cdk": "^2.0.0-beta.8",
|
||||
"@angular/common": "^4.2.5",
|
||||
"@angular/compiler": "^4.2.5",
|
||||
"@angular/core": "^4.2.5",
|
||||
"@angular/flex-layout": "^2.0.0-beta.8",
|
||||
"@angular/forms": "^4.2.5",
|
||||
"@angular/http": "^4.2.5",
|
||||
"@angular/common": "^4.2.6",
|
||||
"@angular/compiler": "^4.2.6",
|
||||
"@angular/core": "^4.2.6",
|
||||
"@angular/flex-layout": "^2.0.0-rc.1",
|
||||
"@angular/forms": "^4.2.6",
|
||||
"@angular/http": "^4.2.6",
|
||||
"@angular/material": "^2.0.0-beta.8",
|
||||
"@angular/platform-browser": "^4.2.5",
|
||||
"@angular/platform-browser-dynamic": "^4.2.5",
|
||||
"@angular/router": "^4.2.5",
|
||||
"@angular/platform-browser": "^4.2.6",
|
||||
"@angular/platform-browser-dynamic": "^4.2.6",
|
||||
"@angular/router": "^4.2.6",
|
||||
"core-js": "^2.4.1",
|
||||
"hammerjs": "^2.0.8",
|
||||
"rxjs": "^5.4.2",
|
||||
"zone.js": "^0.8.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/cli": "1.1.3",
|
||||
"@angular/compiler-cli": "^4.0.0",
|
||||
"@angular/language-service": "^4.0.0",
|
||||
"@types/jasmine": "2.5.45",
|
||||
"@types/node": "^6.0.79",
|
||||
"@angular/cli": "^1.2.0",
|
||||
"@angular/compiler-cli": "^4.2.6",
|
||||
"@angular/language-service": "^4.2.6",
|
||||
"@types/jasmine": "^2.5.53",
|
||||
"@types/jasminewd2": "^2.0.2",
|
||||
"@types/node": "^6.0.80",
|
||||
"codelyzer": "~3.0.1",
|
||||
"jasmine-core": "~2.6.2",
|
||||
"jasmine-spec-reporter": "~4.1.0",
|
||||
|
||||
@ -1,76 +1 @@
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'above'">
|
||||
<fuse-toolbar></fuse-toolbar>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'left'">
|
||||
|
||||
<md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
|
||||
|
||||
<md-sidenav #sidenav mode="side" opened="true" fxFlex="256px">
|
||||
<fuse-navigation></fuse-navigation>
|
||||
</md-sidenav>
|
||||
|
||||
<fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
|
||||
|
||||
<div id="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</md-sidenav-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'right'">
|
||||
|
||||
<md-sidenav-container id="wrapper" class="example-sidenav-fab-container" fxLayout="row" fxfill>
|
||||
|
||||
<fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
|
||||
|
||||
<div id="content">
|
||||
<router-outlet></router-outlet>
|
||||
<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
|
||||
<md-icon>add</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<md-sidenav #sidenav mode="side" align="end" opened="true" fxFlex="256px">
|
||||
<fuse-navigation></fuse-navigation>
|
||||
</md-sidenav>
|
||||
|
||||
</md-sidenav-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'top'">
|
||||
|
||||
<div id="wrapper" class="">
|
||||
|
||||
<div id="nav" class="">
|
||||
<fuse-navigation></fuse-navigation>
|
||||
</div>
|
||||
|
||||
<fuse-toolbar *ngIf="layoutSettings.toolbar === 'below'" class="" [sidenav]="sidenav"></fuse-toolbar>
|
||||
|
||||
<div id="content-wrapper" class="">
|
||||
|
||||
<div id="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!--
|
||||
<pre>{{layoutSettings | json}}</pre>
|
||||
|
||||
<fuse-layout></fuse-layout>
|
||||
|
||||
|
||||
<div class="example-container">
|
||||
<h1>Fuse Component</h1>
|
||||
<fuse-fuse name="Sercan" (nameChanged)="onNameChange()"></fuse-fuse>
|
||||
<h1>Muse Component</h1>
|
||||
<input type="text" [(ngModel)]="bgValue">
|
||||
<fuse-muse [bgColor]="bgValue"></fuse-muse>
|
||||
</div>
|
||||
-->
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
}));
|
||||
|
||||
it(`should have as title 'app'`, async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('app');
|
||||
}));
|
||||
|
||||
it('should render title in a h1 tag', async(() => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!');
|
||||
}));
|
||||
});
|
||||
@ -1,33 +1,30 @@
|
||||
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||||
import {LayoutService} from './core/services/layout.service';
|
||||
import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-root',
|
||||
selector : 'body',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls : ['./app.component.scss'],
|
||||
providers : [LayoutService]
|
||||
styleUrls : ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements OnInit
|
||||
{
|
||||
layoutSettings: { toolbar: any, navigation: any };
|
||||
|
||||
constructor(private layoutService: LayoutService)
|
||||
constructor(
|
||||
private _renderer: Renderer2,
|
||||
private _elementRef: ElementRef
|
||||
)
|
||||
{
|
||||
this.layoutSettings = layoutService.getSettings();
|
||||
}
|
||||
|
||||
addClass(className: string)
|
||||
{
|
||||
this._renderer.addClass(this._elementRef.nativeElement, className);
|
||||
}
|
||||
|
||||
removeClass(className: string)
|
||||
{
|
||||
this._renderer.removeClass(this._elementRef.nativeElement, className);
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
this.layoutService.settingsChanged
|
||||
.subscribe(
|
||||
(newSettings) =>
|
||||
{
|
||||
this.layoutSettings = newSettings;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onNameChange()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
@ -4,18 +4,28 @@ import 'hammerjs';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {AppComponent} from './app.component';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {LayoutComponent} from './core/layout/layout.component';
|
||||
import {ToolbarComponent} from './toolbar/toolbar.component';
|
||||
import {LayoutComponent} from './core/components/layout/layout.component';
|
||||
import {MailModule} from './main/apps/mail/mail.module';
|
||||
import {ChatModule} from './main/apps/chat/chat.module';
|
||||
import {NavigationModule} from './navigation/navigation.module';
|
||||
import {ProjectModule} from './main/apps/dashboards/project/project.module';
|
||||
import {SharedModule} from './core/shared.module';
|
||||
import {NavigationService} from './navigation/navigation.service';
|
||||
import {CardedFullWidthModule} from './main/ui/page-layouts/carded/fullwidth/fullwidth.module';
|
||||
import {LayoutService} from './core/services/layout.service';
|
||||
import {NavbarComponent} from './core/components/layout/navbar/navbar.component';
|
||||
import {ToolbarComponent} from './core/components/layout/toolbar/toolbar.component';
|
||||
import {NavigationModule} from './core/components/navigation/navigation.module';
|
||||
import {NavigationService} from './core/components/navigation/navigation.service';
|
||||
import {SidenavComponent} from './core/components/sidenav/sidenav.component';
|
||||
import {FuseMatchMedia} from './core/services/match-media.service';
|
||||
import {NavbarToggleDirective} from './core/components/layout/navbar/navbar-toggle.directive';
|
||||
import {NavbarService} from './core/components/layout/navbar/navbar.service';
|
||||
import { ContentComponent } from './core/components/layout/content/content.component';
|
||||
import { SharedModule } from './core/modules/shared.module';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{path: '**', redirectTo: 'apps/dashboards/project'}
|
||||
{
|
||||
path : '**',
|
||||
redirectTo: 'apps/dashboards/project'
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
@ -23,22 +33,23 @@ const appRoutes: Routes = [
|
||||
AppComponent,
|
||||
LayoutComponent,
|
||||
ToolbarComponent,
|
||||
NavbarComponent,
|
||||
SidenavComponent,
|
||||
NavbarToggleDirective,
|
||||
ContentComponent
|
||||
],
|
||||
imports : [
|
||||
SharedModule,
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
RouterModule.forRoot(
|
||||
appRoutes,
|
||||
{enableTracing: true} // <-- debugging purposes only
|
||||
),
|
||||
RouterModule.forRoot(appRoutes),
|
||||
NavigationModule,
|
||||
MailModule,
|
||||
ChatModule,
|
||||
ProjectModule,
|
||||
CardedFullWidthModule
|
||||
],
|
||||
providers : [NavigationService],
|
||||
providers : [NavigationService, LayoutService, FuseMatchMedia, NavbarService],
|
||||
bootstrap : [AppComponent]
|
||||
})
|
||||
export class AppModule
|
||||
|
||||
@ -1,5 +1 @@
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<p>
|
||||
layout works!
|
||||
</p>
|
||||
@ -0,0 +1,3 @@
|
||||
:host {
|
||||
|
||||
}
|
||||
19
src/app/core/components/layout/content/content.component.ts
Normal file
19
src/app/core/components/layout/content/content.component.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-content',
|
||||
templateUrl: './content.component.html',
|
||||
styleUrls : ['./content.component.scss']
|
||||
})
|
||||
export class ContentComponent implements OnInit
|
||||
{
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
27
src/app/core/components/layout/layout.component.html
Normal file
27
src/app/core/components/layout/layout.component.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!-- TOOLBAR: Above -->
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'above'">
|
||||
<fuse-toolbar></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Above -->
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- NAVIGATION: Left -->
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'left'">
|
||||
|
||||
<fuse-navbar></fuse-navbar>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'below'">
|
||||
<fuse-toolbar></fuse-toolbar>
|
||||
</ng-container>
|
||||
|
||||
<fuse-content></fuse-content>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<!-- / NAVIGATION: Left -->
|
||||
|
||||
</div>
|
||||
23
src/app/core/components/layout/layout.component.scss
Normal file
23
src/app/core/components/layout/layout.component.scss
Normal file
@ -0,0 +1,23 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
fuse-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
src/app/core/components/layout/layout.component.ts
Normal file
30
src/app/core/components/layout/layout.component.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { LayoutService } from '../../services/layout.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-layout',
|
||||
templateUrl: './layout.component.html',
|
||||
styleUrls : ['./layout.component.scss']
|
||||
})
|
||||
export class LayoutComponent implements OnInit
|
||||
{
|
||||
layoutSettings: { toolbar: any, navigation: any };
|
||||
|
||||
constructor(private layoutService: LayoutService)
|
||||
{
|
||||
this.layoutSettings = layoutService.getSettings();
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
this.layoutService.onSettingsChanged
|
||||
.subscribe(
|
||||
(newSettings) =>
|
||||
{
|
||||
this.layoutSettings = newSettings;
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import {Directive, HostListener, Input} from '@angular/core';
|
||||
import {NavbarService} from './navbar.service';
|
||||
import {NavbarComponent} from './navbar.component';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseNavbar]',
|
||||
})
|
||||
export class NavbarToggleDirective
|
||||
{
|
||||
@Input() fuseNavbar: string;
|
||||
navbar: NavbarComponent;
|
||||
|
||||
constructor(navbar: NavbarService)
|
||||
{
|
||||
this.navbar = navbar.getNavBar();
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
onMouseEnter()
|
||||
{
|
||||
if ( !this.navbar[this.fuseNavbar] )
|
||||
{
|
||||
return;
|
||||
}
|
||||
this.navbar[this.fuseNavbar]();
|
||||
}
|
||||
}
|
||||
17
src/app/core/components/layout/navbar/navbar.component.html
Normal file
17
src/app/core/components/layout/navbar/navbar.component.html
Normal file
@ -0,0 +1,17 @@
|
||||
<div class="navbar-header">
|
||||
|
||||
<div class="logo">
|
||||
<span class="logo-icon">F</span><span class="logo-text">FUSE</span>
|
||||
</div>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.xs>
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-xs>
|
||||
<md-icon>arrow_back</md-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<fuse-navigation></fuse-navigation>
|
||||
86
src/app/core/components/layout/navbar/navbar.component.scss
Normal file
86
src/app/core/components/layout/navbar/navbar.component.scss
Normal file
@ -0,0 +1,86 @@
|
||||
@import "../../../scss/fuse";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
width: 256px;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 20;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
transition: all .3s cubic-bezier(.55, 0, .55, .2), width .1s linear, min-width .1s linear, max-width .1s linear;
|
||||
transform: translateX(0);
|
||||
|
||||
&.folded {
|
||||
position: absolute;
|
||||
|
||||
&:not(.folded-open) {
|
||||
width: 64px !important;
|
||||
min-width: 64px !important;
|
||||
max-width: 64px !important;
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
&.close {
|
||||
transform: translateX(-100%) !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0 16px 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
justify-content: space-between;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
display: block;
|
||||
background: #039BE5;
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-button-navbar {
|
||||
/* border-radius: 50%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
125
src/app/core/components/layout/navbar/navbar.component.ts
Normal file
125
src/app/core/components/layout/navbar/navbar.component.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import {AfterViewInit, Component, ElementRef, HostBinding, HostListener, OnDestroy, OnInit} from '@angular/core';
|
||||
import {AppComponent} from '../../../../app.component';
|
||||
import {Subscription} from 'rxjs/Subscription';
|
||||
import {MatchMedia, MediaChange, MediaMonitor, ObservableMedia} from '@angular/flex-layout';
|
||||
import {FuseMatchMedia} from '../../../services/match-media.service';
|
||||
import {NavbarService} from './navbar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar',
|
||||
templateUrl: './navbar.component.html',
|
||||
styleUrls : ['./navbar.component.scss']
|
||||
})
|
||||
export class NavbarComponent implements OnInit, OnDestroy
|
||||
{
|
||||
@HostBinding('class.close') isClosed: boolean;
|
||||
@HostBinding('class.open') isOpened: boolean = !this.isClosed;
|
||||
|
||||
@HostBinding('class.folded') isFoldedActive: boolean;
|
||||
@HostBinding('class.folded-open') isFoldedOpen: boolean;
|
||||
|
||||
matchMediaWatcher: Subscription;
|
||||
|
||||
constructor(private elementRef: ElementRef,
|
||||
private bodyEl: AppComponent,
|
||||
private observableMedia: ObservableMedia,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private navBarService: NavbarService)
|
||||
{
|
||||
navBarService.setNavBar(this);
|
||||
this.isClosed = false;
|
||||
this.isFoldedActive = false;
|
||||
this.isFoldedOpen = false;
|
||||
this.updateCssClasses();
|
||||
|
||||
this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) =>
|
||||
{
|
||||
console.warn('Media step changed:', mediaStep);
|
||||
if ( mediaStep === 'xs' )
|
||||
{
|
||||
this.closeBar();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.openBar();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openBar()
|
||||
{
|
||||
console.info('opened');
|
||||
this.isClosed = false;
|
||||
this.updateCssClasses();
|
||||
}
|
||||
|
||||
closeBar()
|
||||
{
|
||||
console.info('closed');
|
||||
this.isClosed = true;
|
||||
this.updateCssClasses();
|
||||
}
|
||||
|
||||
toggleBar()
|
||||
{
|
||||
if ( this.isClosed )
|
||||
{
|
||||
this.openBar();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.closeBar();
|
||||
}
|
||||
}
|
||||
|
||||
toggleFold()
|
||||
{
|
||||
if ( !this.isFoldedActive )
|
||||
{
|
||||
this.isFoldedActive = true;
|
||||
this.bodyEl.addClass('fuse-nav-bar-folded');
|
||||
}
|
||||
else
|
||||
{
|
||||
this.isFoldedActive = false;
|
||||
this.bodyEl.removeClass('fuse-nav-bar-folded');
|
||||
}
|
||||
this.isFoldedOpen = false;
|
||||
}
|
||||
|
||||
@HostListener('mouseenter')
|
||||
onMouseEnter()
|
||||
{
|
||||
this.isFoldedOpen = true;
|
||||
}
|
||||
|
||||
@HostListener('mouseleave')
|
||||
onMouseLeave()
|
||||
{
|
||||
this.isFoldedOpen = false;
|
||||
}
|
||||
|
||||
updateCssClasses()
|
||||
{
|
||||
if ( this.isClosed )
|
||||
{
|
||||
this.bodyEl.addClass('fuse-nav-bar-opened');
|
||||
this.bodyEl.removeClass('fuse-nav-bar-closed');
|
||||
}
|
||||
else
|
||||
{
|
||||
this.bodyEl.addClass('fuse-nav-bar-closed');
|
||||
this.bodyEl.removeClass('fuse-nav-bar-opened');
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
ngOnDestroy()
|
||||
{
|
||||
this.matchMediaWatcher.unsubscribe();
|
||||
}
|
||||
}
|
||||
21
src/app/core/components/layout/navbar/navbar.service.ts
Normal file
21
src/app/core/components/layout/navbar/navbar.service.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class NavbarService
|
||||
{
|
||||
navBarRef;
|
||||
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
|
||||
setNavBar(ref)
|
||||
{
|
||||
this.navBarRef = ref;
|
||||
}
|
||||
|
||||
getNavBar()
|
||||
{
|
||||
return this.navBarRef;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
<md-toolbar>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-xs>
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
<span>Toolbar</span>
|
||||
|
||||
</md-toolbar>
|
||||
@ -1,4 +1,4 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-toolbar',
|
||||
@ -16,5 +16,4 @@ export class ToolbarComponent implements OnInit
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@ -13,7 +13,8 @@
|
||||
|
||||
&.open {
|
||||
|
||||
.nav-link {
|
||||
> .nav-link {
|
||||
|
||||
.collapse-arrow {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import {Component, HostBinding, Input, OnInit} from '@angular/core';
|
||||
import {NavigationService} from '../navigation.service';
|
||||
import {NavigationEnd, Router} from '@angular/router';
|
||||
import {Animations} from '../../core/animations';
|
||||
import {Animations} from '../../../animations';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-nav-collapse',
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../theme-config';
|
||||
@import 'src/app/core/scss/fuse';
|
||||
|
||||
#main-navigation {
|
||||
margin: 0;
|
||||
@ -11,6 +11,7 @@
|
||||
color: rgba(0, 0, 0, .54);
|
||||
font-weight: 500;
|
||||
padding-left: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@ -26,9 +27,11 @@
|
||||
background-color: map-get($background, raised-button);
|
||||
color: map_get($foreground, text);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -1,5 +1,5 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {SharedModule} from '../core/shared.module';
|
||||
import {SharedModule} from '../../modules/shared.module';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {NavSubheaderComponent} from './nav-subheader/nav-subheader.component';
|
||||
import {NavigationComponent} from './navigation.component';
|
||||
16
src/app/core/components/sidenav/sidenav.component.html
Normal file
16
src/app/core/components/sidenav/sidenav.component.html
Normal file
@ -0,0 +1,16 @@
|
||||
<p>
|
||||
sidenav works!
|
||||
</p>
|
||||
|
||||
<div class.md="red-bg" class.lg="green-bg">
|
||||
sidenav works!
|
||||
<br>
|
||||
sidenav works!
|
||||
<br>
|
||||
sidenav works!
|
||||
<br>
|
||||
sidenav works!
|
||||
<br>
|
||||
sidenav works!
|
||||
|
||||
</div>
|
||||
28
src/app/core/components/sidenav/sidenav.component.scss
Normal file
28
src/app/core/components/sidenav/sidenav.component.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import "src/app/core/scss/fuse";
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 100%;
|
||||
background: grey;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow-y: auto;
|
||||
|
||||
@include media-breakpoint('sm') {
|
||||
background: white;
|
||||
}
|
||||
|
||||
@include media-breakpoint('md') {
|
||||
background: red;
|
||||
}
|
||||
|
||||
@include media-breakpoint('lg') {
|
||||
background: green;
|
||||
}
|
||||
|
||||
@include media-breakpoint('gt-lg') {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
45
src/app/core/components/sidenav/sidenav.component.ts
Normal file
45
src/app/core/components/sidenav/sidenav.component.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { Component, ElementRef, HostBinding, OnInit } from '@angular/core';
|
||||
import { style, animate, sequence, AnimationBuilder, AnimationPlayer } from '@angular/animations';
|
||||
import { AppComponent } from '../../../app.component';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-sidenav',
|
||||
templateUrl: './sidenav.component.html',
|
||||
styleUrls : ['./sidenav.component.scss']
|
||||
})
|
||||
export class SidenavComponent implements OnInit
|
||||
{
|
||||
constructor(private elementRef: ElementRef,
|
||||
private animationBuilder: AnimationBuilder,
|
||||
private bodyEl: AppComponent)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
closeBar()
|
||||
{
|
||||
this.animationBuilder
|
||||
.build([
|
||||
style({transform: 'translate3d(0,0,0)'}),
|
||||
animate('400ms ease', style({transform: 'translate3d(100%,0,0)'}))
|
||||
])
|
||||
.create(this.elementRef.nativeElement)
|
||||
.play();
|
||||
}
|
||||
|
||||
openBar()
|
||||
{
|
||||
this.animationBuilder
|
||||
.build([
|
||||
style({transform: 'translate3d(100%,0,0)'}),
|
||||
animate('400ms ease', style({transform: 'translate3d(0,0,0)'}))
|
||||
])
|
||||
.create(this.elementRef.nativeElement)
|
||||
.play();
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LayoutComponent } from './layout.component';
|
||||
|
||||
describe('LayoutComponent', () => {
|
||||
let component: LayoutComponent;
|
||||
let fixture: ComponentFixture<LayoutComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LayoutComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LayoutComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,15 +0,0 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-layout',
|
||||
templateUrl: './layout.component.html',
|
||||
styleUrls: ['./layout.component.scss']
|
||||
})
|
||||
export class LayoutComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
22
src/app/core/scss/core.scss
Normal file
22
src/app/core/scss/core.scss
Normal file
@ -0,0 +1,22 @@
|
||||
// Fuse
|
||||
@import "fuse";
|
||||
|
||||
// Theming
|
||||
@include mat-core();
|
||||
|
||||
// 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);
|
||||
|
||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
||||
@include mat-base-typography($custom-typography);
|
||||
|
||||
// Override typography for a specific Angular Material components.
|
||||
@include mat-checkbox-typography($custom-typography);
|
||||
|
||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
||||
@include angular-material-typography($custom-typography);
|
||||
|
||||
// Partials
|
||||
|
||||
5
src/app/core/scss/fuse.scss
Normal file
5
src/app/core/scss/fuse.scss
Normal file
@ -0,0 +1,5 @@
|
||||
// Variables
|
||||
@import "variables/theme-variables";
|
||||
|
||||
// Mixins
|
||||
@import "mixins/breakpoints";
|
||||
24
src/app/core/scss/mixins/_breakpoints.scss
Normal file
24
src/app/core/scss/mixins/_breakpoints.scss
Normal file
@ -0,0 +1,24 @@
|
||||
// Media step breakpoint mixin based on Angular Material lib
|
||||
$breakpoints: (
|
||||
xs: 'screen and (max-width: 599px)',
|
||||
gt-xs: 'screen and (min-width: 600px)',
|
||||
sm: 'screen and (min-width: 600px) and (max-width: 959px)',
|
||||
gt-sm: 'screen and (min-width: 960px)',
|
||||
md: 'screen and (min-width: 960px) and (max-width: 1279px)',
|
||||
gt-md: 'screen and (min-width: 1280px)',
|
||||
lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
|
||||
gt-lg: 'screen and (min-width: 1920px)',
|
||||
xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
|
||||
) !default;
|
||||
|
||||
@mixin media-breakpoint($breakpointName) {
|
||||
|
||||
$mediaQuery: map_get($breakpoints, $breakpointName);
|
||||
|
||||
@if ($mediaQuery != null) {
|
||||
|
||||
@media #{$mediaQuery} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/app/core/scss/variables/_theme-variables.scss
Normal file
17
src/app/core/scss/variables/_theme-variables.scss
Normal file
@ -0,0 +1,17 @@
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
$primary: mat-palette($mat-indigo);
|
||||
$accent: mat-palette($mat-blue, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$theme: mat-light-theme($primary, $accent, $warn);
|
||||
|
||||
$custom-typography: mat-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif'
|
||||
);
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@ -1,25 +1,26 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
import {NavigationStart, Router} from '@angular/router';
|
||||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
import { NavigationStart, Router } from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
export class LayoutService
|
||||
{
|
||||
defaultSettings: { toolbar: string, navigation: string };
|
||||
settings: { toolbar: string, navigation: string };
|
||||
|
||||
onSettingsChanged = new EventEmitter<{ toolbar: string, navigation: string }>();
|
||||
|
||||
/**
|
||||
* Default Settings
|
||||
* @type {{navigation: string; toolbar: string}}
|
||||
* @param router
|
||||
*/
|
||||
defaultSettings = {
|
||||
navigation: 'left', // 'right', 'left', 'top', false
|
||||
toolbar : 'above' // 'above', 'below', false
|
||||
}
|
||||
|
||||
settings;
|
||||
|
||||
settingsChanged = new EventEmitter<{ toolbar: any, navigation: any }>()
|
||||
|
||||
constructor(private router: Router)
|
||||
{
|
||||
// Asign default settings at the init
|
||||
// Set the default settings
|
||||
this.defaultSettings = {
|
||||
navigation: 'left', // 'right', 'left', 'top', false
|
||||
toolbar : 'above' // 'above', 'below', false
|
||||
};
|
||||
|
||||
// Assign default settings at the init
|
||||
this.settings = {...this.defaultSettings};
|
||||
|
||||
// Reset the default settings whenever navigation starts
|
||||
@ -29,9 +30,8 @@ export class LayoutService
|
||||
if ( event instanceof NavigationStart )
|
||||
{
|
||||
this.settings = {...this.defaultSettings};
|
||||
this.settingsChanged.emit(this.settings);
|
||||
this.onSettingsChanged.emit(this.settings);
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
@ -52,7 +52,6 @@ export class LayoutService
|
||||
setSettings(newSettings)
|
||||
{
|
||||
Object.assign(this.settings, newSettings);
|
||||
this.settingsChanged.emit(this.settings);
|
||||
// console.log('settings changed');
|
||||
this.onSettingsChanged.emit(this.settings);
|
||||
}
|
||||
}
|
||||
|
||||
77
src/app/core/services/match-media.service.ts
Normal file
77
src/app/core/services/match-media.service.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import { MediaChange, MediaMonitor, ObservableMedia } from '@angular/flex-layout';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Observer } from 'rxjs/Observer';
|
||||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
import 'rxjs/add/operator/filter';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
@Injectable()
|
||||
export class FuseMatchMedia
|
||||
{
|
||||
activeMediaQuery: string;
|
||||
onMediaChange: Observable<string>;
|
||||
// onMediaChange = new EventEmitter<string>();
|
||||
watcher: Subscription;
|
||||
|
||||
constructor(private observableMedia: ObservableMedia,
|
||||
private mediaMonitor: MediaMonitor)
|
||||
{
|
||||
this.activeMediaQuery = '';
|
||||
|
||||
this.onMediaChange = Observable.create((observer: Observer<string>) =>
|
||||
{
|
||||
this.observableMedia.subscribe((change: MediaChange) =>
|
||||
{
|
||||
|
||||
if ( this.activeMediaQuery !== change.mqAlias )
|
||||
{
|
||||
this.activeMediaQuery = change.mqAlias;
|
||||
observer.next(this.activeMediaQuery);
|
||||
console.warn('From observableMedia:', change.mqAlias);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
/*
|
||||
this.mediaMonitor.observe('xs').subscribe((change: MediaChange) =>
|
||||
{
|
||||
console.warn('From mediaMonitor:', change);
|
||||
|
||||
if ( this.activeMediaQuery !== change.mqAlias )
|
||||
{
|
||||
// this.activeMediaQuery = change.mqAlias;
|
||||
|
||||
|
||||
// this.onMediaChange.emit(this.activeMediaQuery);
|
||||
}
|
||||
});*/
|
||||
|
||||
/* this.observableMedia.subscribe((change: MediaChange) =>
|
||||
{
|
||||
console.warn('From observableMedia:', change.mqAlias);
|
||||
|
||||
if ( this.activeMediaQuery !== change.mqAlias )
|
||||
{
|
||||
this.activeMediaQuery = change.mqAlias;
|
||||
|
||||
|
||||
this.onMediaChange.emit(this.activeMediaQuery);
|
||||
}
|
||||
});*/
|
||||
/*this.observableMedia.asObservable()
|
||||
.filter((change: MediaChange) => change.mqAlias === 'xs')
|
||||
.subscribe(() =>
|
||||
{
|
||||
console.warn('From observableMedia:', this.activeMediaQuery);
|
||||
|
||||
this.onMediaChange.emit(this.activeMediaQuery);
|
||||
});*/
|
||||
|
||||
/* this.watcher = this.observableMedia.subscribe((change: MediaChange) =>
|
||||
{
|
||||
this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
|
||||
console.warn('From Watcher:', change.mqAlias);
|
||||
|
||||
});*/
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChatComponent } from './chat.component';
|
||||
|
||||
describe('ChatComponent', () => {
|
||||
let component: ChatComponent;
|
||||
let fixture: ComponentFixture<ChatComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ChatComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChatComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {SharedModule} from '../../../core/shared.module';
|
||||
import {SharedModule} from '../../../core/modules/shared.module';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {ChatComponent} from './chat.component';
|
||||
|
||||
@ -7,7 +7,7 @@ const routes: Routes = [
|
||||
{
|
||||
path: 'apps/chat', component: ChatComponent, children: []
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProjectComponent } from './project.component';
|
||||
|
||||
describe('ProjectComponent', () => {
|
||||
let component: ProjectComponent;
|
||||
let fixture: ComponentFixture<ProjectComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ProjectComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProjectComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {ProjectComponent} from './project.component';
|
||||
import {SharedModule} from '../../../../core/shared.module';
|
||||
import {SharedModule} from '../../../../core/modules/shared.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MailComponent } from './mail.component';
|
||||
|
||||
describe('MailComponent', () => {
|
||||
let component: MailComponent;
|
||||
let fixture: ComponentFixture<MailComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,17 +1,23 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {SharedModule} from '../../../core/shared.module';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {MailComponent} from './mail.component';
|
||||
import {MainSidenavComponent} from './sidenavs/main/main-sidenav.component';
|
||||
import {ClassicViewComponent} from './views/classic/classic-view.component';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { SharedModule } from '../../../core/modules/shared.module';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { MailComponent } from './mail.component';
|
||||
import { MainSidenavComponent } from './sidenavs/main/main-sidenav.component';
|
||||
import { ClassicViewComponent } from './views/classic/classic-view.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'apps/mail', component: MailComponent, children: [
|
||||
{path: '', component: ClassicViewComponent, outlet: 'view'}
|
||||
]
|
||||
path : 'apps/mail',
|
||||
component: MailComponent,
|
||||
children : [
|
||||
{
|
||||
path : '',
|
||||
component: ClassicViewComponent,
|
||||
outlet : 'view'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports : [
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MainSidenavComponent } from './main-sidenav.component';
|
||||
|
||||
describe('MainSidenavComponent', () => {
|
||||
let component: MainSidenavComponent;
|
||||
let fixture: ComponentFixture<MainSidenavComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MainSidenavComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MainSidenavComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ClassicViewComponent } from './classic-view.component';
|
||||
|
||||
describe('ClassicViewComponent', () => {
|
||||
let component: ClassicViewComponent;
|
||||
let fixture: ComponentFixture<ClassicViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ClassicViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ClassicViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChatComponent } from './fullwidth.component';
|
||||
|
||||
describe('ChatComponent', () => {
|
||||
let component: ChatComponent;
|
||||
let fixture: ComponentFixture<ChatComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ChatComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ChatComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {CardedFullWidthComponent} from './fullwidth.component';
|
||||
import {SharedModule} from '../../../../../core/shared.module';
|
||||
import {SharedModule} from '../../../../../core/modules/shared.module';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<md-toolbar>
|
||||
|
||||
<a md-mini-fab class="sidenav-toggle-button" (click)="sidenav.toggle()">
|
||||
<md-icon>menu</md-icon>
|
||||
</a>
|
||||
|
||||
<span>Toolbar</span>
|
||||
|
||||
</md-toolbar>
|
||||
@ -17,8 +17,7 @@
|
||||
|
||||
<body class="mat-body">
|
||||
|
||||
<fuse-root></fuse-root>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,19 @@
|
||||
@import './theme-config';
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
|
||||
// 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);
|
||||
|
||||
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
|
||||
@include mat-base-typography($custom-typography);
|
||||
|
||||
// Override typography for a specific Angular Material components.
|
||||
@include mat-checkbox-typography($custom-typography);
|
||||
|
||||
// Override typography for all Angular Material, including mat-base-typography and all components.
|
||||
@include angular-material-typography($custom-typography);
|
||||
|
||||
html {
|
||||
|
||||
}
|
||||
// Import Fuse main library
|
||||
@import "app/core/scss/core";
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body, fuse-root, #wrapper, #content, .mat-sidenav-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
&.fuse-nav-bar-folded {
|
||||
|
||||
.content-wrapper {
|
||||
padding-left: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
@import '~@angular/material/theming';
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the common styles for Angular Material. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
// Be sure that you only ever include this mixin once!
|
||||
@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-indigo);
|
||||
$accent: mat-palette($mat-blue, A200, A100, A400);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$theme: mat-light-theme($primary, $accent, $warn);
|
||||
|
||||
$custom-typography: mat-typography-config(
|
||||
$font-family: 'Roboto, "Helvetica Neue", sans-serif'
|
||||
);
|
||||
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
259
tslint.json
259
tslint.json
@ -1,135 +1,130 @@
|
||||
{
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer"
|
||||
],
|
||||
"rules": {
|
||||
"arrow-return-shorthand": true,
|
||||
"callable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
"rulesDirectory": [
|
||||
"node_modules/codelyzer"
|
||||
],
|
||||
"curly": true,
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-over-type-literal": true,
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
140
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-super": true,
|
||||
"no-empty": false,
|
||||
"no-empty-interface": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-misused-new": true,
|
||||
"no-non-null-assertion": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-string-throw": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": true,
|
||||
"no-unnecessary-initializer": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": [
|
||||
true,
|
||||
//"check-open-brace",
|
||||
"check-catch",
|
||||
"check-else",
|
||||
"check-whitespace"
|
||||
],
|
||||
"prefer-const": true,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"typeof-compare": true,
|
||||
"unified-signatures": true,
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"fuse",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"fuse",
|
||||
"kebab-case"
|
||||
],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-access-missing-member": true,
|
||||
"templates-use-public": true,
|
||||
"invoke-injectable": true
|
||||
}
|
||||
"rules": {
|
||||
"arrow-return-shorthand": true,
|
||||
"callable-types": true,
|
||||
"class-name": true,
|
||||
"comment-format": [
|
||||
true,
|
||||
"check-space"
|
||||
],
|
||||
"curly": true,
|
||||
"eofline": true,
|
||||
"forin": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
"rxjs"
|
||||
],
|
||||
"import-spacing": true,
|
||||
"indent": [
|
||||
true,
|
||||
"spaces"
|
||||
],
|
||||
"interface-over-type-literal": true,
|
||||
"label-position": true,
|
||||
"max-line-length": [
|
||||
true,
|
||||
120
|
||||
],
|
||||
"member-access": false,
|
||||
"member-ordering": [
|
||||
true,
|
||||
"static-before-instance",
|
||||
"variables-before-functions"
|
||||
],
|
||||
"no-arg": true,
|
||||
"no-bitwise": true,
|
||||
"no-console": [
|
||||
true,
|
||||
"debug",
|
||||
"info",
|
||||
"time",
|
||||
"timeEnd",
|
||||
"trace"
|
||||
],
|
||||
"no-construct": true,
|
||||
"no-debugger": true,
|
||||
"no-duplicate-super": true,
|
||||
"no-empty": false,
|
||||
"no-empty-interface": true,
|
||||
"no-eval": true,
|
||||
"no-inferrable-types": [
|
||||
true,
|
||||
"ignore-params"
|
||||
],
|
||||
"no-misused-new": true,
|
||||
"no-non-null-assertion": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-string-literal": false,
|
||||
"no-string-throw": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-trailing-whitespace": false,
|
||||
"no-unnecessary-initializer": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-var-keyword": true,
|
||||
"object-literal-sort-keys": false,
|
||||
"one-line": false,
|
||||
"prefer-const": true,
|
||||
"quotemark": [
|
||||
true,
|
||||
"single"
|
||||
],
|
||||
"radix": true,
|
||||
"semicolon": [
|
||||
true,
|
||||
"always"
|
||||
],
|
||||
"triple-equals": [
|
||||
true,
|
||||
"allow-null-check"
|
||||
],
|
||||
"typedef-whitespace": [
|
||||
true,
|
||||
{
|
||||
"call-signature": "nospace",
|
||||
"index-signature": "nospace",
|
||||
"parameter": "nospace",
|
||||
"property-declaration": "nospace",
|
||||
"variable-declaration": "nospace"
|
||||
}
|
||||
],
|
||||
"typeof-compare": true,
|
||||
"unified-signatures": true,
|
||||
"variable-name": false,
|
||||
"whitespace": [
|
||||
true,
|
||||
"check-branch",
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
],
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"fuse",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"fuse",
|
||||
"kebab-case"
|
||||
],
|
||||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-access-missing-member": true,
|
||||
"templates-use-public": true,
|
||||
"invoke-injectable": true
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user