Merge branch 'master' into skeleton

This commit is contained in:
Sercan Yemen 2018-07-02 15:59:00 +03:00
commit 0d6d08aa85
16 changed files with 81 additions and 71 deletions

View File

@ -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>

View File

@ -4,7 +4,7 @@ fuse-navigation {
display: flex;
flex: 1 0 auto;
#main-navigation {
> .nav {
margin: 0;
padding: 0;
width: 100%;

View File

@ -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;
}
/**

View File

@ -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;
}

View File

@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
import { FuseSidebarComponent } from './sidebar.component';
@Injectable()
@Injectable({
providedIn: 'root'
})
export class FuseSidebarService
{
// Private

View File

@ -1,7 +1,9 @@
import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';
@Injectable()
@Injectable({
providedIn: 'root'
})
export class FuseMatSidenavHelperService
{
sidenavInstances: MatSidenav[];

View File

@ -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)

View File

@ -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

View File

@ -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;

View File

@ -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();

View File

@ -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;

View File

@ -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;

View File

@ -7,7 +7,9 @@ export interface Locale
data: Object;
}
@Injectable()
@Injectable({
providedIn: 'root'
})
export class FuseTranslationLoaderService
{
/**

View File

@ -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);
}
});
}
);
}
// -----------------------------------------------------------------------------------------------------

View File

@ -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>

View File

@ -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);
}
}