From f35c1add1ce9936faf498a7abfccf27cde76d30e Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 1 Jul 2018 12:20:33 +0300 Subject: [PATCH 1/2] Added ability to add custom classes to the navigation items using the "classes" property Fixed: Item function and External URL's are missing from horizontal navigation Fixed: Horizontal navigation active item does not highlight correctly --- .../collapsable/collapsable.component.html | 30 +++++++++++++---- .../horizontal/item/item.component.html | 32 +++++++++++++++---- .../collapsable/collapsable.component.html | 15 +++++---- .../vertical/group/group.component.html | 2 +- .../vertical/item/item.component.html | 12 ++++--- src/@fuse/types/fuse-navigation.ts | 1 + 6 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html index 28a5e64b..740df664 100644 --- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html +++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html @@ -1,29 +1,45 @@ - + - + + + + + + - + - + + + + + {{item.icon}} {{item.title}} diff --git a/src/@fuse/components/navigation/horizontal/item/item.component.html b/src/@fuse/components/navigation/horizontal/item/item.component.html index b623bb8f..31da0d39 100644 --- a/src/@fuse/components/navigation/horizontal/item/item.component.html +++ b/src/@fuse/components/navigation/horizontal/item/item.component.html @@ -1,20 +1,38 @@ - + + + + + + - + - + + + + + + @@ -27,4 +45,4 @@ - + \ No newline at end of file diff --git a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html index bc4ddf44..d3bc9faa 100644 --- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html +++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html @@ -1,12 +1,14 @@ - + - @@ -14,19 +16,20 @@ - - - @@ -34,7 +37,7 @@ - diff --git a/src/@fuse/components/navigation/vertical/group/group.component.html b/src/@fuse/components/navigation/vertical/group/group.component.html index 26820b81..3285cfd3 100644 --- a/src/@fuse/components/navigation/vertical/group/group.component.html +++ b/src/@fuse/components/navigation/vertical/group/group.component.html @@ -1,6 +1,6 @@ -
+
{{ item.title }}
diff --git a/src/@fuse/components/navigation/vertical/item/item.component.html b/src/@fuse/components/navigation/vertical/item/item.component.html index a90e4f99..31da0d39 100644 --- a/src/@fuse/components/navigation/vertical/item/item.component.html +++ b/src/@fuse/components/navigation/vertical/item/item.component.html @@ -1,7 +1,7 @@ - @@ -9,19 +9,20 @@ - - - @@ -29,7 +30,8 @@ - diff --git a/src/@fuse/types/fuse-navigation.ts b/src/@fuse/types/fuse-navigation.ts index 823d633f..4c029c04 100644 --- a/src/@fuse/types/fuse-navigation.ts +++ b/src/@fuse/types/fuse-navigation.ts @@ -7,6 +7,7 @@ export interface FuseNavigationItem icon?: string; hidden?: boolean; url?: string; + classes?: string; exactMatch?: boolean; externalUrl?: boolean; openInNewTab?: boolean; From ae29f1f03d411d7a80d537fdf378ad66ac1e73e4 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sun, 1 Jul 2018 13:10:11 +0300 Subject: [PATCH 2/2] Added 'openedChanged' and 'foldedChanged' events to the sidebar Updated the Sidebar docs --- .../components/sidebar/sidebar.component.ts | 28 +++++++++++++++++-- .../components/sidebar/sidebar.component.html | 22 ++++++++++++--- 2 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/@fuse/components/sidebar/sidebar.component.ts b/src/@fuse/components/sidebar/sidebar.component.ts index 02d3e7ce..a4695d4c 100644 --- a/src/@fuse/components/sidebar/sidebar.component.ts +++ b/src/@fuse/components/sidebar/sidebar.component.ts @@ -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 { ObservableMedia } from '@angular/flex-layout'; import { Subject } from 'rxjs'; @@ -48,6 +48,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy @Input() invisibleOverlay: boolean; + // Folded changed + @Output() + foldedChanged: EventEmitter; + + // Opened changed + @Output() + openedChanged: EventEmitter; + // Private private _folded: boolean; private _fuseConfig: any; @@ -84,8 +92,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy ) { // Set the defaults + this.foldedChanged = new EventEmitter(); + this.openedChanged = new EventEmitter(); this.opened = false; - // this.folded = false; this.position = 'left'; this.invisibleOverlay = false; @@ -157,6 +166,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy this._renderer.removeStyle(sibling, styleRule); this._renderer.removeClass(this._elementRef.nativeElement, 'folded'); } + + // Emit the 'foldedChanged' event + this.foldedChanged.emit(this.folded); } get folded(): boolean @@ -301,6 +313,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Force the the opened status to true this.opened = true; + // Emit the 'openedChanged' event + this.openedChanged.emit(this.opened); + // If the sidebar was folded, forcefully fold it again if ( this._wasFolded ) { @@ -329,6 +344,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Force the the opened status to close this.opened = false; + // Emit the 'openedChanged' event + this.openedChanged.emit(this.opened); + // Hide the sidebar this._hideSidebar(); } @@ -558,6 +576,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the opened status this.opened = true; + // Emit the 'openedChanged' event + this.openedChanged.emit(this.opened); + // Mark for check this._changeDetectorRef.markForCheck(); } @@ -581,6 +602,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy // Set the opened status this.opened = false; + // Emit the 'openedChanged' event + this.openedChanged.emit(this.opened); + // Hide the sidebar this._hideSidebar(); diff --git a/src/app/main/documentation/components/sidebar/sidebar.component.html b/src/app/main/documentation/components/sidebar/sidebar.component.html index b32f53b1..57e15554 100644 --- a/src/app/main/documentation/components/sidebar/sidebar.component.html +++ b/src/app/main/documentation/components/sidebar/sidebar.component.html @@ -33,7 +33,7 @@

-

[name]

+

[name]

name attribute allows you to set a unique name to the sidebar. It's required for sidebar to work correctly, as every sidebar being registered to the sidebar service. @@ -41,14 +41,14 @@

-

[folded]

+

[folded]

Controls the folded status of the sidebar.

-

[position]

+

[position]

Controls the position of the sidebar when it's hidden. This doesn't affect on the locked-open placement of the sidebar, it only controls which side the sidebar is going to slide in when it's completely @@ -57,13 +57,27 @@

-

[lockedOpen]

+

[lockedOpen]

Accepts Angular Material breakpoint aliases ('gt-md', 'lg' etc.) and locks open the sidebar if the alias matches the current breakpoint, similar to how Angular Material 1.x sidenav works.

+
+

(onFoldedChanged)

+

+ onFoldedChanged event will be triggered when the sidebar folded or unfolded permanently. +

+
+ +
+

(onOpenedChanged)

+

+ onOpenedChanged event will be triggered when the sidebar opened or closed. +

+
+
Sidebar Service

The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar,