mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Responsive refinement on some doc pages,
Navigation scrool fix on collapse toggled.
This commit is contained in:
parent
5e4940fed9
commit
9400c3d748
|
@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class FuseNavigationService
|
export class FuseNavigationService
|
||||||
{
|
{
|
||||||
|
onNavCollapseToggle = new EventEmitter<any>();
|
||||||
onNavCollapseToggled = new EventEmitter<any>();
|
onNavCollapseToggled = new EventEmitter<any>();
|
||||||
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
|
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
|
||||||
navigationModel: NavigationModel;
|
navigationModel: NavigationModel;
|
||||||
|
|
|
@ -43,7 +43,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||||
this.navigationService.onNavCollapseToggled
|
this.navigationService.onNavCollapseToggled
|
||||||
.subscribe(
|
.subscribe(
|
||||||
(clickedItem) => {
|
(clickedItem) => {
|
||||||
if ( clickedItem.children )
|
if ( clickedItem && clickedItem.children )
|
||||||
{
|
{
|
||||||
// Check if the clicked item is one
|
// Check if the clicked item is one
|
||||||
// of the children of this item
|
// of the children of this item
|
||||||
|
@ -82,6 +82,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||||
|
|
||||||
// Navigation collapse toggled...
|
// Navigation collapse toggled...
|
||||||
this.navigationService.onNavCollapseToggled.emit(this.item);
|
this.navigationService.onNavCollapseToggled.emit(this.item);
|
||||||
|
this.navigationService.onNavCollapseToggle.emit();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -95,6 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||||
}
|
}
|
||||||
|
|
||||||
this.isOpen = true;
|
this.isOpen = true;
|
||||||
|
this.navigationService.onNavCollapseToggle.emit();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -107,6 +109,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.isOpen = false;
|
this.isOpen = false;
|
||||||
|
this.navigationService.onNavCollapseToggle.emit();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between">
|
<div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||||
<div fxLayout="column" fxLayoutAlign="center start">
|
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||||
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
<md-icon class="secondary-text s-16">home</md-icon>
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
@ -11,14 +11,12 @@
|
||||||
<div class="h2 mt-16">ngx-datatable</div>
|
<div class="h2 mt-16">ngx-datatable</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div fxLayout="row" fxLayoutAlign="start center">
|
<a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
|
||||||
<a md-raised-button class="md-white-bg"
|
href="https://github.com/swimlane/ngx-datatable"
|
||||||
href="https://github.com/swimlane/ngx-datatable"
|
target="_blank">
|
||||||
target="_blank">
|
<md-icon>link</md-icon>
|
||||||
<md-icon>link</md-icon>
|
<span>Reference</span>
|
||||||
<span>Reference</span>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- / HEADER -->
|
<!-- / HEADER -->
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
|
<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||||
|
|
||||||
<div fxLayout="column" fxLayoutAlign="center start">
|
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||||
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
<md-icon class="secondary-text s-16">home</md-icon>
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
<div class="h2 mt-16">{{title}}</div>
|
<div class="h2 mt-16">{{title}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank">
|
<a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.io/icons/" target="_blank">
|
||||||
<md-icon>link</md-icon>
|
<md-icon>link</md-icon>
|
||||||
<span>Reference</span>
|
<span>Reference</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||||
|
|
||||||
<div fxLayout="column" fxLayoutAlign="center start">
|
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||||
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
<md-icon class="secondary-text s-16">home</md-icon>
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
<div class="h1 mt-16">Colors</div>
|
<div class="h1 mt-16">Colors</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a md-raised-button class="reference-button md-white-bg"
|
<a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
|
||||||
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
href="https://www.google.com/design/spec/style/color.html#color-color-palette"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<md-icon>link</md-icon>
|
<md-icon>link</md-icon>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
|
||||||
|
|
||||||
<!-- HEADER -->
|
<!-- HEADER -->
|
||||||
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">
|
<div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
|
||||||
|
|
||||||
<div fxLayout="column" fxLayoutAlign="center start">
|
<div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
|
||||||
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
|
||||||
<md-icon class="secondary-text s-16">home</md-icon>
|
<md-icon class="secondary-text s-16">home</md-icon>
|
||||||
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
<md-icon class="secondary-text s-16">chevron_right</md-icon>
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
<div class="h1 mt-16">Icons</div>
|
<div class="h1 mt-16">Icons</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a md-raised-button class="reference-button md-white-bg" href="https://material.angular.io" target="_blank">
|
<a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.angular.io" target="_blank">
|
||||||
<md-icon>link</md-icon>
|
<md-icon>link</md-icon>
|
||||||
<span>Reference</span>
|
<span>Reference</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -43,8 +43,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
|
||||||
{
|
{
|
||||||
navBarService.setNavBar(this);
|
navBarService.setNavBar(this);
|
||||||
|
|
||||||
this.fuseNavigationService.onNavCollapseToggled.subscribe(() => {
|
this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.fusePerfectScrollbarDirective.update();
|
this.fusePerfectScrollbarDirective.update();
|
||||||
}, 310);
|
}, 310);
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
|
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
|
||||||
<md-autocomplete #auto="mdAutocomplete">
|
<md-autocomplete #auto="mdAutocomplete">
|
||||||
<md-option *ngFor="let state of filteredStates | async" [value]="state.name">
|
<md-option *ngFor="let state of filteredStates | async" [value]="state.name">
|
||||||
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" />
|
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25" />
|
||||||
<span>{{ state.name }}</span> |
|
<span>{{ state.name }}</span> |
|
||||||
<small>Population: {{state.population}}</small>
|
<small>Population: {{state.population}}</small>
|
||||||
</md-option>
|
</md-option>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user