mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Merge branch 'master' into skeleton
This commit is contained in:
commit
0d6d08aa85
|
@ -1,5 +1,4 @@
|
|||
<div id="main-navigation" class="nav"
|
||||
[ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
|
||||
<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
|
||||
|
||||
<!-- Vertical Navigation Layout -->
|
||||
<ng-container *ngIf="layout === 'vertical'">
|
||||
|
@ -21,7 +20,8 @@
|
|||
<ng-container *ngFor="let item of navigation">
|
||||
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'"
|
||||
[item]="item"></fuse-nav-horizontal-collapsable>
|
||||
<fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
|
||||
|
||||
</ng-container>
|
||||
|
|
|
@ -4,7 +4,7 @@ fuse-navigation {
|
|||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
|
||||
#main-navigation {
|
||||
> .nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable, Subject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
import { FuseNavigationItem } from '@fuse/types';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseNavigationService
|
||||
{
|
||||
flatNavigation: any[] = [];
|
||||
|
||||
onItemCollapsed: Subject<any>;
|
||||
onItemCollapseToggled: Subject<any>;
|
||||
|
||||
|
@ -138,39 +140,30 @@ export class FuseNavigationService
|
|||
* Get flattened navigation array
|
||||
*
|
||||
* @param navigation
|
||||
* @param flatNavigation
|
||||
* @returns {any[]}
|
||||
*/
|
||||
getFlatNavigation(navigation): any
|
||||
getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
|
||||
{
|
||||
for ( const navItem of navigation )
|
||||
for ( const item of navigation )
|
||||
{
|
||||
if ( navItem.type === 'item' )
|
||||
if ( item.type === 'item' )
|
||||
{
|
||||
this.flatNavigation.push({
|
||||
id : navItem.id || null,
|
||||
title : navItem.title || null,
|
||||
translate : navItem.translate || null,
|
||||
type : navItem.type,
|
||||
icon : navItem.icon || null,
|
||||
url : navItem.url || null,
|
||||
function : navItem.function || null,
|
||||
exactMatch: navItem.exactMatch || false,
|
||||
badge : navItem.badge || null
|
||||
});
|
||||
flatNavigation.push(item);
|
||||
|
||||
continue;
|
||||
}
|
||||
|
||||
if ( navItem.type === 'collapse' || navItem.type === 'group' )
|
||||
if ( item.type === 'collapsable' || item.type === 'group' )
|
||||
{
|
||||
if ( navItem.children )
|
||||
if ( item.children )
|
||||
{
|
||||
this.getFlatNavigation(navItem.children);
|
||||
this.getFlatNavigation(item.children, flatNavigation);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this.flatNavigation;
|
||||
return flatNavigation;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
height: 64px;
|
||||
font-size: 13px;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
|
@ -28,7 +28,7 @@
|
|||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
@ -39,7 +39,7 @@
|
|||
height: 64px !important;
|
||||
line-height: 64px !important;
|
||||
|
||||
@include media-breakpoint-down('sm') {
|
||||
@include media-breakpoint-down('xs') {
|
||||
height: 56px !important;
|
||||
line-height: 56px !important;
|
||||
}
|
||||
|
|
|
@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
|
|||
|
||||
import { FuseSidebarComponent } from './sidebar.component';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseSidebarService
|
||||
{
|
||||
// Private
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { MatSidenav } from '@angular/material';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseMatSidenavHelperService
|
||||
{
|
||||
sidenavInstances: MatSidenav[];
|
||||
|
|
|
@ -1,29 +1,8 @@
|
|||
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
|
||||
|
||||
import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
|
||||
import { FuseCopierService } from '@fuse/services/copier.service';
|
||||
import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';
|
||||
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
|
||||
import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
|
||||
import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
|
||||
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
|
||||
import { FUSE_CONFIG } from '@fuse/services/config.service';
|
||||
|
||||
@NgModule({
|
||||
entryComponents: [],
|
||||
providers : [
|
||||
FuseConfigService,
|
||||
FuseCopierService,
|
||||
FuseLoadingBarService,
|
||||
FuseMatchMediaService,
|
||||
FuseMatSidenavHelperService,
|
||||
FuseNavigationService,
|
||||
FuseSidebarService,
|
||||
FuseSplashScreenService,
|
||||
FuseTranslationLoaderService
|
||||
]
|
||||
})
|
||||
@NgModule()
|
||||
export class FuseModule
|
||||
{
|
||||
constructor(@Optional() @SkipSelf() parentModule: FuseModule)
|
||||
|
|
|
@ -8,7 +8,9 @@ import * as _ from 'lodash';
|
|||
// Create the injection token for the custom settings
|
||||
export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseConfigService
|
||||
{
|
||||
// Private
|
||||
|
|
|
@ -1,14 +1,15 @@
|
|||
/**
|
||||
* This class is based on the code in the following projects:
|
||||
*
|
||||
* - https://github.com/zenorocha/select
|
||||
* - https://github.com/zenorocha/clipboard.js/
|
||||
* https://github.com/zenorocha/select
|
||||
* https://github.com/zenorocha/clipboard.js/
|
||||
*
|
||||
* Both released under MIT license - © Zeno Rocha
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseCopierService
|
||||
{
|
||||
private textarea: HTMLTextAreaElement;
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { NavigationEnd, NavigationStart, Router } from '@angular/router';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter } from 'rxjs/operators';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseLoadingBarService
|
||||
{
|
||||
// Private
|
||||
|
@ -26,7 +28,7 @@ export class FuseLoadingBarService
|
|||
// @ Accessors
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
get visible(): Observable
|
||||
get visible(): Observable<any>
|
||||
{
|
||||
// Return the _visible as observable
|
||||
return this._visible.asObservable();
|
||||
|
|
|
@ -2,7 +2,9 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout';
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseMatchMediaService
|
||||
{
|
||||
activeMediaQuery: string;
|
||||
|
|
|
@ -3,7 +3,9 @@ import { DOCUMENT } from '@angular/common';
|
|||
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseSplashScreenService
|
||||
{
|
||||
splashScreenEl: any;
|
||||
|
|
|
@ -7,7 +7,9 @@ export interface Locale
|
|||
data: Object;
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class FuseTranslationLoaderService
|
||||
{
|
||||
/**
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
import { Subject } from 'rxjs';
|
||||
import { filter, takeUntil } from 'rxjs/operators';
|
||||
import { filter, take, takeUntil } from 'rxjs/operators';
|
||||
|
||||
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
|
||||
import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
|
||||
|
@ -61,6 +61,7 @@ export class NavbarComponent implements OnInit, OnDestroy
|
|||
|
||||
this._fusePerfectScrollbar = theDirective;
|
||||
|
||||
// Update the scrollbar on collapsable item toggle
|
||||
this._fuseNavigationService.onItemCollapseToggled
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe(() => {
|
||||
|
@ -68,6 +69,28 @@ export class NavbarComponent implements OnInit, OnDestroy
|
|||
this._fusePerfectScrollbar.update();
|
||||
}, 310);
|
||||
});
|
||||
|
||||
// Scroll to the active item position
|
||||
this._router.events
|
||||
.pipe(
|
||||
filter((event) => event instanceof NavigationEnd),
|
||||
take(1)
|
||||
)
|
||||
.subscribe(() => {
|
||||
setTimeout(() => {
|
||||
const activeNavItem = document.querySelector('navbar .nav-link.active');
|
||||
|
||||
if ( activeNavItem )
|
||||
{
|
||||
const activeItemOffsetTop = activeNavItem.offsetTop,
|
||||
activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
|
||||
scrollDistance = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
|
||||
|
||||
this._fusePerfectScrollbar.scrollToTop(scrollDistance);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<mat-menu #languageMenu="matMenu" [overlapTrigger]="false">
|
||||
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
|
||||
<button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
|
||||
<span fxLayout="row" fxLayoutAlign="start center">
|
||||
<img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
|
||||
<span class="iso">{{lang.title}}</span>
|
||||
|
|
|
@ -160,14 +160,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
|
|||
/**
|
||||
* Set the language
|
||||
*
|
||||
* @param langId
|
||||
* @param lang
|
||||
*/
|
||||
setLanguage(langId): void
|
||||
setLanguage(lang): void
|
||||
{
|
||||
// Set the selected language for toolbar
|
||||
this.selectedLanguage = _.find(this.languages, {'id': langId});
|
||||
// Set the selected language for the toolbar
|
||||
this.selectedLanguage = lang;
|
||||
|
||||
// Use the selected language for translations
|
||||
this._translateService.use(langId);
|
||||
this._translateService.use(lang.id);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user