From 2a10f3e4438e78d905c5c7335491056cfe3fc927 Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Wed, 6 Dec 2017 14:10:48 +0300 Subject: [PATCH] Moved the navigation.model.ts into its own folder + Added support for translations in nav items + Added badge support for collapsable nav items + Initialize the navigation from app.component rather then navigation.service --- src/app/app.component.ts | 16 +- src/app/app.module.ts | 4 - .../nav-horizontal-collapse.component.html | 6 +- .../nav-horizontal-item.component.html | 8 +- .../components/navigation/navigation.model.ts | 5 + .../navigation/navigation.service.ts | 6 +- .../nav-vertical-collapse.component.html | 7 +- .../nav-vertical-group.component.html | 3 +- .../nav-item/nav-vertical-item.component.html | 8 +- src/app/core/scss/partials/_navigation.scss | 8 +- .../navigation/navigation.component.html | 32 ++-- src/app/navigation/i18n/en.ts | 20 +++ src/app/navigation/i18n/tr.ts | 20 +++ src/app/{ => navigation}/navigation.model.ts | 142 +++++++++++------- 14 files changed, 195 insertions(+), 90 deletions(-) create mode 100644 src/app/core/components/navigation/navigation.model.ts create mode 100644 src/app/navigation/i18n/en.ts create mode 100644 src/app/navigation/i18n/tr.ts rename src/app/{ => navigation}/navigation.model.ts (90%) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 29e2809f..64ca8fd3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,12 @@ import { Component } from '@angular/core'; import { FuseSplashScreenService } from './core/services/splash-screen.service'; import { TranslateService } from '@ngx-translate/core'; +import { FuseTranslationLoaderService } from './core/services/translation-loader.service'; + +import { FuseNavigationService } from './core/components/navigation/navigation.service'; +import { FuseNavigationModel } from './navigation/navigation.model'; +import { locale as navigationEnglish } from './navigation/i18n/en'; +import { locale as navigationTurkish } from './navigation/i18n/tr'; @Component({ selector : 'fuse-root', @@ -10,8 +16,10 @@ import { TranslateService } from '@ngx-translate/core'; export class AppComponent { constructor( + private fuseNavigationService: FuseNavigationService, private fuseSplashScreen: FuseSplashScreenService, - private translate: TranslateService + private translate: TranslateService, + private translationLoader: FuseTranslationLoaderService ) { // Add languages @@ -22,5 +30,11 @@ export class AppComponent // Use a language this.translate.use('en'); + + // Set the navigation model + this.fuseNavigationService.setNavigationModel(new FuseNavigationModel()); + + // Set the navigation translations + this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5f4f03f7..ecd785dd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -73,16 +73,12 @@ const appRoutes: Routes = [ SharedModule, MarkdownModule.forRoot(), TranslateModule.forRoot(), - InMemoryWebApiModule.forRoot(FuseFakeDbService, { delay : 0, passThruUnknownUrl: true }), - FuseMainModule, - ProjectModule, - PagesModule, UIModule, ServicesModule, diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html index 4712628d..a73d2aae 100644 --- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html +++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html @@ -1,6 +1,10 @@ {{item.icon}} - {{item.title}} + {{item.title}} + + {{item.badge.title}} + keyboard_arrow_right diff --git a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html index 68b37b53..bfff9a59 100644 --- a/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html +++ b/src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html @@ -1,8 +1,8 @@ {{item.icon}} - {{item.title}} - {{item.title}} + {{item.badge.title}} @@ -10,8 +10,8 @@ {{item.icon}} - {{item.title}} - {{item.title}} + {{item.badge.title}} diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts new file mode 100644 index 00000000..30268ded --- /dev/null +++ b/src/app/core/components/navigation/navigation.model.ts @@ -0,0 +1,5 @@ +export interface FuseNavigationModelInterface +{ + model: any[]; +} + diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts index 6dbe6c86..b9b912de 100644 --- a/src/app/core/components/navigation/navigation.service.ts +++ b/src/app/core/components/navigation/navigation.service.ts @@ -1,6 +1,6 @@ import { EventEmitter, Injectable } from '@angular/core'; -import { NavigationModel } from '../../../navigation.model'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; +import { FuseNavigationModelInterface } from './navigation.model'; @Injectable() export class FuseNavigationService @@ -8,13 +8,11 @@ export class FuseNavigationService onNavCollapseToggle = new EventEmitter(); onNavCollapseToggled = new EventEmitter(); onNavigationModelChange: BehaviorSubject = new BehaviorSubject({}); - navigationModel: NavigationModel; + navigationModel: FuseNavigationModelInterface; flatNavigation: any[] = []; constructor() { - this.navigationModel = new NavigationModel(); - this.onNavigationModelChange.next(this.navigationModel.model); } /** diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html index 5a255b6f..6ff78f82 100644 --- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html +++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html @@ -1,8 +1,13 @@ {{item.icon}} - {{item.title}} + {{item.title}} + + {{item.badge.title}} + keyboard_arrow_right +
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html index 3fd40abf..fe5042bb 100644 --- a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html +++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html @@ -1,6 +1,7 @@
- {{ item.title }} + {{ item.title }}
+
diff --git a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html index 33ec1c81..f0dc5201 100644 --- a/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html +++ b/src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html @@ -1,8 +1,8 @@ {{item.icon}} - {{item.title}} - {{item.title}} + {{item.badge.title}} @@ -10,8 +10,8 @@ {{item.icon}} - {{item.title}} - {{item.title}} + {{item.badge.title}} diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss index 692ebda0..9385e074 100644 --- a/src/app/core/scss/partials/_navigation.scss +++ b/src/app/core/scss/partials/_navigation.scss @@ -47,14 +47,20 @@ } .nav-link-badge { + display: flex; + align-items: center; min-width: 20px; height: 20px; - line-height: 20px; padding: 0 7px; font-size: 11px; font-weight: 500; border-radius: 20px; transition: opacity 0.2s ease-in-out 0.1s; + margin-left: 8px; + + + .collapse-arrow { + margin-left: 8px; + } } &:hover { diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html index ab0ccd47..6625f89a 100644 --- a/src/app/main/content/components/navigation/navigation.component.html +++ b/src/app/main/content/components/navigation/navigation.component.html @@ -18,7 +18,7 @@

fuse-navigation is a custom built Fuse component allows you to create a multi-level collapsable - navigation. + navigation. It has built-in support for translations using ngx-translate module.

@@ -40,6 +40,11 @@ Collapsable and Item. These items can be mixed and matched to create unique and complex navigation layouts.

+

+ Navigation model can be found in src/app/navigation folder along with its translation + files. Navigation model and its translation files are set in app.component.ts file. Check that + file for more detailed usage example. +

@@ -48,9 +53,10 @@ diff --git a/src/app/navigation/i18n/en.ts b/src/app/navigation/i18n/en.ts new file mode 100644 index 00000000..57caa4bb --- /dev/null +++ b/src/app/navigation/i18n/en.ts @@ -0,0 +1,20 @@ +export const locale = { + lang: 'en', + data: { + 'NAV': { + 'APPLICATIONS': 'Applications', + 'DASHBOARDS' : 'Dashboards', + 'CALENDAR' : 'Calendar', + 'ECOMMERCE' : 'E-Commerce', + 'MAIL' : { + 'TITLE': 'Mail', + 'BADGE': '25' + }, + 'CHAT' : 'Chat', + 'FILE_MANAGER': 'File Manager', + 'CONTACTS' : 'Contacts', + 'TODO' : 'To-Do', + 'SCRUMBOARD' : 'Scrumboard' + } + } +}; diff --git a/src/app/navigation/i18n/tr.ts b/src/app/navigation/i18n/tr.ts new file mode 100644 index 00000000..629ea1a6 --- /dev/null +++ b/src/app/navigation/i18n/tr.ts @@ -0,0 +1,20 @@ +export const locale = { + lang: 'tr', + data: { + 'NAV': { + 'APPLICATIONS': 'Programlar', + 'DASHBOARDS' : 'Kontrol Paneli', + 'CALENDAR' : 'Takvim', + 'ECOMMERCE' : 'E-Ticaret', + 'MAIL' : { + 'TITLE': 'Posta', + 'BADGE': '15' + }, + 'CHAT' : 'Sohbet', + 'FILE_MANAGER': 'Dosya Yöneticisi', + 'CONTACTS' : 'Kişiler', + 'TODO' : 'Yapılacaklar', + 'SCRUMBOARD' : 'Proje' + } + } +}; diff --git a/src/app/navigation.model.ts b/src/app/navigation/navigation.model.ts similarity index 90% rename from src/app/navigation.model.ts rename to src/app/navigation/navigation.model.ts index db9d78c8..544008ef 100644 --- a/src/app/navigation.model.ts +++ b/src/app/navigation/navigation.model.ts @@ -1,4 +1,6 @@ -export class NavigationModel +import { FuseNavigationModelInterface } from '../core/components/navigation/navigation.model'; + +export class FuseNavigationModel implements FuseNavigationModelInterface { public model: any[]; @@ -6,17 +8,19 @@ export class NavigationModel { this.model = [ { - 'id' : 'applications', - 'title' : 'Applications', - 'type' : 'group', - 'icon' : 'apps', - 'children': [ + 'id' : 'applications', + 'title' : 'Applications', + 'translate': 'NAV.APPLICATIONS', + 'type' : 'group', + 'icon' : 'apps', + 'children' : [ { - 'id' : 'dashboards', - 'title' : 'Dashboards', - 'type' : 'collapse', - 'icon' : 'dashboard', - 'children': [ + 'id' : 'dashboards', + 'title' : 'Dashboards', + 'translate': 'NAV.DASHBOARDS', + 'type' : 'collapse', + 'icon' : 'dashboard', + 'children' : [ { 'id' : 'project', 'title': 'Project', @@ -26,18 +30,20 @@ export class NavigationModel ] }, { - 'id' : 'calendar', - 'title': 'Calendar', - 'type' : 'item', - 'icon' : 'today', - 'url' : '/apps/calendar' + 'id' : 'calendar', + 'title' : 'Calendar', + 'translate': 'NAV.CALENDAR', + 'type' : 'item', + 'icon' : 'today', + 'url' : '/apps/calendar' }, { - 'id' : 'e-commerce', - 'title' : 'E-Commerce', - 'type' : 'collapse', - 'icon' : 'shopping_cart', - 'children': [ + 'id' : 'e-commerce', + 'title' : 'E-Commerce', + 'translate': 'NAV.ECOMMERCE', + 'type' : 'collapse', + 'icon' : 'shopping_cart', + 'children' : [ { 'id' : 'dashboard', 'title': 'Dashboard', @@ -75,61 +81,68 @@ export class NavigationModel ] }, { - 'id' : 'mail', - 'title': 'Mail', - 'type' : 'item', - 'icon' : 'email', - 'url' : '/apps/mail', - 'badge': { - 'title': 25, - 'bg' : '#F44336', - 'fg' : '#FFFFFF' + 'id' : 'mail', + 'title' : 'Mail', + 'translate': 'NAV.MAIL.TITLE', + 'type' : 'item', + 'icon' : 'email', + 'url' : '/apps/mail', + 'badge' : { + 'title' : 25, + 'translate': 'NAV.MAIL.BADGE', + 'bg' : '#F44336', + 'fg' : '#FFFFFF' } }, { - 'id' : 'chat', - 'title': 'Chat', - 'type' : 'item', - 'icon' : 'chat', - 'url' : '/apps/chat', - 'badge': { + 'id' : 'chat', + 'title' : 'Chat', + 'translate': 'NAV.CHAT', + 'type' : 'item', + 'icon' : 'chat', + 'url' : '/apps/chat', + 'badge' : { 'title': 13, 'bg' : '#09d261', 'fg' : '#FFFFFF' } }, { - 'id' : 'file-manager', - 'title': 'File Manager', - 'type' : 'item', - 'icon' : 'folder', - 'url' : '/apps/file-manager' + 'id' : 'file-manager', + 'title' : 'File Manager', + 'translate': 'NAV.FILE_MANAGER', + 'type' : 'item', + 'icon' : 'folder', + 'url' : '/apps/file-manager' }, { - 'id' : 'contacts', - 'title': 'Contacts', - 'type' : 'item', - 'icon' : 'account_box', - 'url' : '/apps/contacts' + 'id' : 'contacts', + 'title' : 'Contacts', + 'translate': 'NAV.CONTACTS', + 'type' : 'item', + 'icon' : 'account_box', + 'url' : '/apps/contacts' }, { - 'id' : 'to-do', - 'title': 'To-Do', - 'type' : 'item', - 'icon' : 'check_box', - 'url' : '/apps/todo', - 'badge': { + 'id' : 'to-do', + 'title' : 'To-Do', + 'translate': 'NAV.TODO', + 'type' : 'item', + 'icon' : 'check_box', + 'url' : '/apps/todo', + 'badge' : { 'title': 3, 'bg' : '#FF6F00', 'fg' : '#FFFFFF' } }, { - 'id' : 'scrumboard', - 'title': 'Scrumboard', - 'type' : 'item', - 'icon' : 'assessment', - 'url' : '/apps/scrumboard' + 'id' : 'scrumboard', + 'title' : 'Scrumboard', + 'translate': 'NAV.SCRUMBOARD', + 'type' : 'item', + 'icon' : 'assessment', + 'url' : '/apps/scrumboard' } ] }, @@ -144,6 +157,11 @@ export class NavigationModel 'title' : 'Authentication', 'type' : 'collapse', 'icon' : 'lock', + 'badge' : { + 'title': 10, + 'bg' : '#525e8a', + 'fg' : '#FFFFFF' + }, 'children': [ { 'id' : 'login', @@ -359,6 +377,11 @@ export class NavigationModel 'id' : 'carded', 'title' : 'Carded', 'type' : 'collapse', + 'badge' : { + 'title': 10, + 'bg' : '#525e8a', + 'fg' : '#FFFFFF' + }, 'children': [ { 'id' : 'full-width', @@ -426,6 +449,11 @@ export class NavigationModel 'id' : 'simple', 'title' : 'Simple', 'type' : 'collapse', + 'badge' : { + 'title': 8, + 'bg' : '#525e8a', + 'fg' : '#FFFFFF' + }, 'children': [ { 'id' : 'full-width',