purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-01 13:16:15 +03:00
commit 2eb952e9bc
7 changed files with 92 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
View File

@ -1,29 +1,45 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- normal collapse --> <!-- normal collapse -->
<a class="nav-link" *ngIf="!item.url && !item.function" matRipple> <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" routerLinkActive="active" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple> <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
[routerLink]="[item.url]" routerLinkActive="active" (click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<ng-template #itemContent> <ng-template #itemContent>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span> <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>

30
src/@fuse/components/navigation/horizontal/item/item.component.html
View File

@ -1,20 +1,38 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple> <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
[routerLink]="[item.url]" routerLinkActive="active" (click)="item.function()"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

15
src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
View File

@ -1,12 +1,14 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- normal collapse --> <!-- normal collapse -->
<a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple> <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
(click)="toggleOpen($event)" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -14,19 +16,20 @@
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="toggleOpen($event);item.function()" matRipple> (click)="toggleOpen($event);item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()" (click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
@ -34,7 +37,7 @@
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()" (click)="toggleOpen($event);item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>

2
src/@fuse/components/navigation/vertical/group/group.component.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<div class="group-title"> <div class="group-title" [ngClass]="item.classes">
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span> <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
</div> </div>

12
src/@fuse/components/navigation/vertical/item/item.component.html
View File

@ -1,7 +1,7 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -9,19 +9,20 @@
</a> </a>
<!-- item.externalUrl --> <!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple> (click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -29,7 +30,8 @@
</a> </a>
<!-- item.externalUrl && item.function --> <!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple> [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

28
src/@fuse/components/sidebar/sidebar.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core'; import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { ObservableMedia } from '@angular/flex-layout'; import { ObservableMedia } from '@angular/flex-layout';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@ -48,6 +48,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
@Input() @Input()
invisibleOverlay: boolean; invisibleOverlay: boolean;
// Folded changed
@Output()
foldedChanged: EventEmitter<boolean>;
// Opened changed
@Output()
openedChanged: EventEmitter<boolean>;
// Private // Private
private _folded: boolean; private _folded: boolean;
private _fuseConfig: any; private _fuseConfig: any;
@ -84,8 +92,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
) )
{ {
// Set the defaults // Set the defaults
this.foldedChanged = new EventEmitter();
this.openedChanged = new EventEmitter();
this.opened = false; this.opened = false;
// this.folded = false;
this.position = 'left'; this.position = 'left';
this.invisibleOverlay = false; this.invisibleOverlay = false;
@ -157,6 +166,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
this._renderer.removeStyle(sibling, styleRule); this._renderer.removeStyle(sibling, styleRule);
this._renderer.removeClass(this._elementRef.nativeElement, 'folded'); this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
} }
// Emit the 'foldedChanged' event
this.foldedChanged.emit(this.folded);
} }
get folded(): boolean get folded(): boolean
@ -301,6 +313,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Force the the opened status to true // Force the the opened status to true
this.opened = true; this.opened = true;
// Emit the 'openedChanged' event
this.openedChanged.emit(this.opened);
// If the sidebar was folded, forcefully fold it again // If the sidebar was folded, forcefully fold it again
if ( this._wasFolded ) if ( this._wasFolded )
{ {
@ -329,6 +344,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Force the the opened status to close // Force the the opened status to close
this.opened = false; this.opened = false;
// Emit the 'openedChanged' event
this.openedChanged.emit(this.opened);
// Hide the sidebar // Hide the sidebar
this._hideSidebar(); this._hideSidebar();
} }
@ -558,6 +576,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Set the opened status // Set the opened status
this.opened = true; this.opened = true;
// Emit the 'openedChanged' event
this.openedChanged.emit(this.opened);
// Mark for check // Mark for check
this._changeDetectorRef.markForCheck(); this._changeDetectorRef.markForCheck();
} }
@ -581,6 +602,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
// Set the opened status // Set the opened status
this.opened = false; this.opened = false;
// Emit the 'openedChanged' event
this.openedChanged.emit(this.opened);
// Hide the sidebar // Hide the sidebar
this._hideSidebar(); this._hideSidebar();

1
src/@fuse/types/fuse-navigation.ts
View File

@ -7,6 +7,7 @@ export interface FuseNavigationItem
icon?: string; icon?: string;
hidden?: boolean; hidden?: boolean;
url?: string; url?: string;
classes?: string;
exactMatch?: boolean; exactMatch?: boolean;
externalUrl?: boolean; externalUrl?: boolean;
openInNewTab?: boolean; openInNewTab?: boolean;