mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
fuse2...
This commit is contained in:
Sercan Yemen
parent
a8844e8b46
commit
6f159f54c8
|
|
@ -1 +1,12 @@
|
|||
<fuse-layout></fuse-layout>
|
||||
<md-sidenav-container>
|
||||
|
||||
<fuse-layout></fuse-layout>
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<md-sidenav id="quick-panel" #quickPanel [fuseMdSidenavHelper]="quickPanel" align="end">
|
||||
quick-panel
|
||||
</md-sidenav>
|
||||
<!-- / QUICK PANEL -->
|
||||
|
||||
</md-sidenav-container>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {NgModule} from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import 'hammerjs';
|
||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||
import {AppComponent} from './app.component';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
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 {ProjectModule} from './main/apps/dashboards/project/project.module';
|
||||
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 { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { AppComponent } from './app.component';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
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 { ProjectModule } from './main/apps/dashboards/project/project.module';
|
||||
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';
|
||||
import { FooterComponent } from './core/components/layout/footer/footer.component';
|
||||
import { FuseMdSidenavHelperDirective, FuseMdSidenavTogglerDirective } from './core/directives/md-sidenav-helper/md-sidenav-helper.directive';
|
||||
import { FuseMdSidenavHelperService } from './core/directives/md-sidenav-helper/md-sidenav-helper.service';
|
||||
|
||||
const appRoutes: Routes = [
|
||||
{
|
||||
|
|
@ -36,7 +39,10 @@ const appRoutes: Routes = [
|
|||
NavbarComponent,
|
||||
SidenavComponent,
|
||||
NavbarToggleDirective,
|
||||
ContentComponent
|
||||
FuseMdSidenavHelperDirective,
|
||||
FuseMdSidenavTogglerDirective,
|
||||
ContentComponent,
|
||||
FooterComponent
|
||||
],
|
||||
imports : [
|
||||
SharedModule,
|
||||
|
|
@ -49,7 +55,13 @@ const appRoutes: Routes = [
|
|||
ProjectModule,
|
||||
CardedFullWidthModule
|
||||
],
|
||||
providers : [NavigationService, LayoutService, FuseMatchMedia, NavbarService],
|
||||
providers : [
|
||||
NavigationService,
|
||||
LayoutService,
|
||||
FuseMatchMedia,
|
||||
NavbarService,
|
||||
FuseMdSidenavHelperService
|
||||
],
|
||||
bootstrap : [AppComponent]
|
||||
})
|
||||
export class AppModule
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<md-toolbar>
|
||||
|
||||
<span>Footer</span>
|
||||
|
||||
</md-toolbar>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
:host {
|
||||
|
||||
&.above {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
15
src/app/core/components/layout/footer/footer.component.ts
Normal file
15
src/app/core/components/layout/footer/footer.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'fuse-footer',
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrls: ['./footer.component.scss']
|
||||
})
|
||||
export class FooterComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,11 +1,35 @@
|
|||
<!-- TOOLBAR: Above -->
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'above'">
|
||||
<fuse-toolbar></fuse-toolbar>
|
||||
<fuse-toolbar class="above"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Above -->
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- NAVIGATION: None -->
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'none'">
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- TOOLBAR: Below -->
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'below'">
|
||||
<fuse-toolbar class="below"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Below -->
|
||||
|
||||
<fuse-content></fuse-content>
|
||||
|
||||
<!-- FOOTER: Below -->
|
||||
<ng-container *ngIf="layoutSettings.footer === 'below'">
|
||||
<fuse-footer class="below"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- / FOOTER: Below -->
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<!-- / NAVIGATION: None -->
|
||||
|
||||
<!-- NAVIGATION: Left -->
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'left'">
|
||||
|
||||
|
|
@ -13,15 +37,55 @@
|
|||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- TOOLBAR: Below -->
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'below'">
|
||||
<fuse-toolbar></fuse-toolbar>
|
||||
<fuse-toolbar class="below"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Below -->
|
||||
|
||||
<fuse-content></fuse-content>
|
||||
|
||||
<!-- FOOTER: Below -->
|
||||
<ng-container *ngIf="layoutSettings.footer === 'below'">
|
||||
<fuse-footer class="below"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- / FOOTER: Below -->
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
<!-- / NAVIGATION: Left -->
|
||||
|
||||
<!-- NAVIGATION: Right -->
|
||||
<ng-container *ngIf="layoutSettings.navigation === 'right'">
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<!-- TOOLBAR: Below -->
|
||||
<ng-container *ngIf="layoutSettings.toolbar === 'below'">
|
||||
<fuse-toolbar class="below"></fuse-toolbar>
|
||||
</ng-container>
|
||||
<!-- / TOOLBAR: Below -->
|
||||
|
||||
<fuse-content></fuse-content>
|
||||
|
||||
<!-- FOOTER: Below -->
|
||||
<ng-container *ngIf="layoutSettings.footer === 'below'">
|
||||
<fuse-footer class="below"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- / FOOTER: Below -->
|
||||
|
||||
</div>
|
||||
|
||||
<fuse-navbar></fuse-navbar>
|
||||
|
||||
</ng-container>
|
||||
<!-- / NAVIGATION: Right -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- FOOTER: Above -->
|
||||
<ng-container *ngIf="layoutSettings.footer === 'above'">
|
||||
<fuse-footer class="above"></fuse-footer>
|
||||
</ng-container>
|
||||
<!-- FOOTER: Above -->
|
||||
|
|
|
|||
|
|
@ -6,13 +6,16 @@
|
|||
|
||||
#wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
fuse-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { LayoutService } from '../../services/layout.service';
|
|||
})
|
||||
export class LayoutComponent implements OnInit
|
||||
{
|
||||
layoutSettings: { toolbar: any, navigation: any };
|
||||
layoutSettings: { navigation: string, toolbar: string, footer: string };
|
||||
|
||||
constructor(private layoutService: LayoutService)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Directive, HostListener, Input} from '@angular/core';
|
||||
import { Directive, HostListener, Input } from '@angular/core';
|
||||
import {NavbarService} from './navbar.service';
|
||||
import {NavbarComponent} from './navbar.component';
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ export class NavbarToggleDirective
|
|||
}
|
||||
|
||||
@HostListener('click')
|
||||
onMouseEnter()
|
||||
onClick()
|
||||
{
|
||||
if ( !this.navbar[this.fuseNavbar] )
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
:host {
|
||||
display: block;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
max-width: 256px;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
overflow-y: auto;
|
||||
|
|
@ -16,9 +18,9 @@
|
|||
position: absolute;
|
||||
|
||||
&:not(.folded-open) {
|
||||
width: 64px !important;
|
||||
min-width: 64px !important;
|
||||
max-width: 64px !important;
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
&.folded-open {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
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';
|
||||
import { Component, HostBinding, HostListener, OnDestroy, OnInit } from '@angular/core';
|
||||
import { AppComponent } from '../../../../app.component';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { FuseMatchMedia } from '../../../services/match-media.service';
|
||||
import { NavbarService } from './navbar.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-navbar',
|
||||
|
|
@ -20,11 +19,11 @@ export class NavbarComponent implements OnInit, OnDestroy
|
|||
|
||||
matchMediaWatcher: Subscription;
|
||||
|
||||
constructor(private elementRef: ElementRef,
|
||||
private bodyEl: AppComponent,
|
||||
private observableMedia: ObservableMedia,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private navBarService: NavbarService)
|
||||
constructor(
|
||||
private bodyEl: AppComponent,
|
||||
private fuseMatchMedia: FuseMatchMedia,
|
||||
private navBarService: NavbarService
|
||||
)
|
||||
{
|
||||
navBarService.setNavBar(this);
|
||||
this.isClosed = false;
|
||||
|
|
@ -34,7 +33,6 @@ export class NavbarComponent implements OnInit, OnDestroy
|
|||
|
||||
this.matchMediaWatcher = this.fuseMatchMedia.onMediaChange.subscribe((mediaStep) =>
|
||||
{
|
||||
console.warn('Media step changed:', mediaStep);
|
||||
if ( mediaStep === 'xs' )
|
||||
{
|
||||
this.closeBar();
|
||||
|
|
@ -48,14 +46,12 @@ export class NavbarComponent implements OnInit, OnDestroy
|
|||
|
||||
openBar()
|
||||
{
|
||||
console.info('opened');
|
||||
this.isClosed = false;
|
||||
this.updateCssClasses();
|
||||
}
|
||||
|
||||
closeBar()
|
||||
{
|
||||
console.info('closed');
|
||||
this.isClosed = true;
|
||||
this.updateCssClasses();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,4 +6,8 @@
|
|||
|
||||
<span>Toolbar</span>
|
||||
|
||||
<button md-button class="toggle-button-navbar mat-icon-button" fuseMdSidenavToggler="quick-panel">
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
|
||||
</md-toolbar>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NavCollapseComponent } from './nav-collapse.component';
|
||||
|
||||
describe('NavCollapseComponent', () => {
|
||||
let component: NavCollapseComponent;
|
||||
let fixture: ComponentFixture<NavCollapseComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavCollapseComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavCollapseComponent);
|
||||
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 { NavItemComponent } from './nav-item.component';
|
||||
|
||||
describe('NavItemComponent', () => {
|
||||
let component: NavItemComponent;
|
||||
let fixture: ComponentFixture<NavItemComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NavItemComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavItemComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Directive, Input, OnInit, HostListener, ElementRef } from '@angular/core';
|
||||
import { MdSidenav } from '@angular/material';
|
||||
import { FuseMdSidenavHelperService } from 'app/core/directives/md-sidenav-helper/md-sidenav-helper.service';
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseMdSidenavHelper]'
|
||||
})
|
||||
export class FuseMdSidenavHelperDirective implements OnInit
|
||||
{
|
||||
@Input('fuseMdSidenavHelper') mdSidenavInstance: MdSidenav;
|
||||
|
||||
constructor(
|
||||
private fuseMdSidenavService: FuseMdSidenavHelperService,
|
||||
private elRef: ElementRef
|
||||
)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
{
|
||||
this.fuseMdSidenavService.setSidenav(this.elRef.nativeElement.id, this.mdSidenavInstance);
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[fuseMdSidenavToggler]'
|
||||
})
|
||||
export class FuseMdSidenavTogglerDirective
|
||||
{
|
||||
@Input('fuseMdSidenavToggler') id;
|
||||
instance: MdSidenav;
|
||||
|
||||
constructor(private fuseMdSidenavService: FuseMdSidenavHelperService)
|
||||
{
|
||||
}
|
||||
|
||||
@HostListener('click')
|
||||
onClick()
|
||||
{
|
||||
this.instance = this.fuseMdSidenavService.getSidenav(this.id);
|
||||
this.instance.toggle();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { MdSidenav } from '@angular/material';
|
||||
|
||||
@Injectable()
|
||||
export class FuseMdSidenavHelperService
|
||||
{
|
||||
sidenavInstances: MdSidenav[];
|
||||
|
||||
constructor()
|
||||
{
|
||||
this.sidenavInstances = [];
|
||||
}
|
||||
|
||||
setSidenav(id, instance)
|
||||
{
|
||||
this.sidenavInstances[id] = instance;
|
||||
}
|
||||
|
||||
getSidenav(id)
|
||||
{
|
||||
return this.sidenavInstances[id];
|
||||
}
|
||||
}
|
||||
|
|
@ -4,10 +4,10 @@ import { NavigationStart, Router } from '@angular/router';
|
|||
@Injectable()
|
||||
export class LayoutService
|
||||
{
|
||||
defaultSettings: { toolbar: string, navigation: string };
|
||||
settings: { toolbar: string, navigation: string };
|
||||
defaultSettings: { navigation: string, toolbar: string, footer: string };
|
||||
settings: { navigation: string, toolbar: string, footer: string };
|
||||
|
||||
onSettingsChanged = new EventEmitter<{ toolbar: string, navigation: string }>();
|
||||
onSettingsChanged = new EventEmitter<{ navigation: string, toolbar: string, footer: string }>();
|
||||
|
||||
/**
|
||||
* @param router
|
||||
|
|
@ -16,8 +16,9 @@ export class LayoutService
|
|||
{
|
||||
// Set the default settings
|
||||
this.defaultSettings = {
|
||||
navigation: 'left', // 'right', 'left', 'top', false
|
||||
toolbar : 'above' // 'above', 'below', false
|
||||
navigation: 'left', // 'right', 'left', 'top', none
|
||||
toolbar : 'above', // 'above', 'below', none
|
||||
footer : 'above' // 'above', 'below', none
|
||||
};
|
||||
|
||||
// Assign default settings at the init
|
||||
|
|
@ -38,7 +39,7 @@ export class LayoutService
|
|||
|
||||
/**
|
||||
* Get Settings
|
||||
* @returns {{navigation: any, toolbar: any}}
|
||||
* @returns {{navigation: string, toolbar: string, footer: string}}
|
||||
*/
|
||||
getSettings()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,20 +1,15 @@
|
|||
import { MediaChange, MediaMonitor, ObservableMedia } from '@angular/flex-layout';
|
||||
import { MediaChange, 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';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class FuseMatchMedia
|
||||
{
|
||||
activeMediaQuery: string;
|
||||
onMediaChange: Observable<string>;
|
||||
// onMediaChange = new EventEmitter<string>();
|
||||
watcher: Subscription;
|
||||
|
||||
constructor(private observableMedia: ObservableMedia,
|
||||
private mediaMonitor: MediaMonitor)
|
||||
constructor(private observableMedia: ObservableMedia)
|
||||
{
|
||||
this.activeMediaQuery = '';
|
||||
|
||||
|
|
@ -22,56 +17,12 @@ export class FuseMatchMedia
|
|||
{
|
||||
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,3 +1,180 @@
|
|||
<p>
|
||||
project works!
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
<p>
|
||||
project works!
|
||||
</p>
|
||||
|
||||
<br><br>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
:host {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { LayoutService } from '../../../../core/services/layout.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-project',
|
||||
|
|
@ -7,9 +8,13 @@ import {Component, OnInit} from '@angular/core';
|
|||
})
|
||||
export class ProjectComponent implements OnInit
|
||||
{
|
||||
|
||||
constructor()
|
||||
constructor(private layoutService: LayoutService)
|
||||
{
|
||||
this.layoutService.setSettings({
|
||||
navigation: 'left',
|
||||
toolbar : 'above',
|
||||
footer : 'above'
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component, OnInit} from '@angular/core';
|
||||
import {LayoutService} from '../../../core/services/layout.service';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { LayoutService } from '../../../core/services/layout.service';
|
||||
|
||||
@Component({
|
||||
selector : 'fuse-mail',
|
||||
|
|
@ -12,8 +12,9 @@ export class MailComponent implements OnInit
|
|||
constructor(private layoutService: LayoutService)
|
||||
{
|
||||
this.layoutService.setSettings({
|
||||
navigation: 'left',
|
||||
toolbar : 'below',
|
||||
navigation: 'left'
|
||||
footer : 'below'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -117,8 +117,8 @@
|
|||
"use-input-property-decorator": true,
|
||||
"use-output-property-decorator": true,
|
||||
"use-host-property-decorator": true,
|
||||
"no-input-rename": true,
|
||||
"no-output-rename": true,
|
||||
"no-input-rename": false,
|
||||
"no-output-rename": false,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user