inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-24 14:31:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

make navigation work with routerLinkActive (#7)

Browse Source
This commit is contained in:
Cilibiu Bogdan
2017-10-21 13:52:40 +03:00
committed by Denys Vuika
parent 16eda621b6
commit df07ad48fd
2 changed files with 19 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/components/sidenav/sidenav.component.html
View File

@@ -50,17 +50,14 @@
</md-menu> </md-menu>
</div> </div>
<div class="sidenav__section" *ngFor="let list of menus;"> <div class="sidenav__section" *ngFor="let list of navigation">
<ul class="sidenav-menu"> <ul class="sidenav-menu">
<li class="sidenav-menu__item" *ngFor="let item of list"> <li class="sidenav-menu__item" *ngFor="let item of list">
<!-- [routerLinkActive]="'sidenav-menu__item-link--active'" -->
<a <a
class="sidenav-menu__item-link" class="sidenav-menu__item-link"
routerLinkActive="sidenav-menu__item-link--active"
[routerLink]="item.route.url" [routerLink]="item.route.url"
[ngClass]="{ [ngClass]="{ 'disabled': item.disabled }"
'disabled': item.disabled,
'sidenav-menu__item-link--active': (currentRoute.includes(item.route.url))
}"
title="{{ item.title || '' | translate }}"> title="{{ item.title || '' | translate }}">
<md-icon>{{ item.icon }}</md-icon> <md-icon>{{ item.icon }}</md-icon>
{{ item.label | translate }} {{ item.label | translate }}

41
src/app/components/sidenav/sidenav.component.ts
View File

@@ -23,7 +23,6 @@ import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { AlfrescoContentService } from 'ng2-alfresco-core'; import { AlfrescoContentService } from 'ng2-alfresco-core';
import { BrowsingFilesService } from '../../common/services/browsing-files.service'; import { BrowsingFilesService } from '../../common/services/browsing-files.service';
import { Router, NavigationEnd } from '@angular/router';
@Component({ @Component({
selector: 'app-sidenav', selector: 'app-sidenav',
@@ -32,71 +31,63 @@ import { Router, NavigationEnd } from '@angular/router';
}) })
export class SidenavComponent implements OnInit, OnDestroy { export class SidenavComponent implements OnInit, OnDestroy {
node: MinimalNodeEntryEntity = null; node: MinimalNodeEntryEntity = null;
currentRoute = '';
onChangeParentSubscription: Subscription; onChangeParentSubscription: Subscription;
constructor( navigation = [
private router: Router, [
private browsingFilesService: BrowsingFilesService,
private contentService: AlfrescoContentService
) {
this.currentRoute = this.router.routerState.snapshot.url;
}
get menus() {
const main = [
{ {
icon: 'folder', icon: 'folder',
label: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.PERSONAL.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/personal-files' } route: { url: '/personal-files' }
}, },
{ {
icon: 'group_work', icon: 'group_work',
label: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.LIBRARIES.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/libraries' } route: { url: '/libraries' }
} }
]; ],
[
const secondary = [
{ {
icon: 'people', icon: 'people',
label: 'APP.BROWSE.SHARED.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.SHARED.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.SHARED.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/shared' } route: { url: '/shared' }
}, },
{ {
icon: 'schedule', icon: 'schedule',
label: 'APP.BROWSE.RECENT.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.RECENT.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.RECENT.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/recent-files' } route: { url: '/recent-files' }
}, },
{ {
icon: 'star', icon: 'star',
label: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.FAVORITES.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/favorites' } route: { url: '/favorites' }
}, },
{ {
icon: 'delete', icon: 'delete',
label: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL', label: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.LABEL',
title: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP', title: 'APP.BROWSE.TRASHCAN.SIDENAV_LINK.TOOLTIP',
disabled: false,
route: { url: '/trashcan' } route: { url: '/trashcan' }
} }
]; ]
];
return [ main, secondary ]; constructor(
} private browsingFilesService: BrowsingFilesService,
private contentService: AlfrescoContentService
) {}
ngOnInit() { ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd ) {
this.currentRoute = event.url;
}
});
this.onChangeParentSubscription = this.browsingFilesService.onChangeParent this.onChangeParentSubscription = this.browsingFilesService.onChangeParent
.subscribe((node: MinimalNodeEntryEntity) => { .subscribe((node: MinimalNodeEntryEntity) => {
this.node = node; this.node = node;