From 31efdaa1f148cfc91e015bf3f872082db5d4cb8b Mon Sep 17 00:00:00 2001 From: Ronny Roos Date: Tue, 5 Jul 2016 19:57:31 +0200 Subject: [PATCH 1/8] Added RC4 and beta router Merge branch 'master' of https://github.com/akveo/ng2-admin --- package.json | 17 ++- src/app/app.component.ts | 46 ++----- src/app/app.menu.ts | 64 ++++------ src/app/app.routes.ts | 19 +++ src/app/pages/charts/charts.component.ts | 17 +-- src/app/pages/forms/forms.component.ts | 19 +-- src/app/pages/login/login.routes.ts | 14 +++ src/app/pages/maps/maps.component.ts | 31 +---- src/app/pages/pages.component.ts | 48 -------- src/app/pages/pages.routes.ts | 114 ++++++++++++++++++ src/app/pages/register/register.routes.ts | 14 +++ src/app/pages/tables/tables.component.ts | 13 +- src/app/pages/ui/ui.component.ts | 31 +---- .../baSidebar/baSidebar.component.ts | 6 +- src/platform/browser/directives.ts | 2 +- src/platform/browser/providers.ts | 6 +- src/vendor.ts | 2 +- 17 files changed, 215 insertions(+), 248 deletions(-) create mode 100644 src/app/app.routes.ts create mode 100644 src/app/pages/login/login.routes.ts create mode 100644 src/app/pages/pages.routes.ts create mode 100644 src/app/pages/register/register.routes.ts diff --git a/package.json b/package.json index af3cca1b..737b6cc8 100644 --- a/package.json +++ b/package.json @@ -6,15 +6,14 @@ "homepage": "http://akveo.github.io/ng2-admin/", "license": "MIT", "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", - "@angular/platform-server": "2.0.0-rc.3", - "@angular/router": "3.0.0-alpha.8", - "@angular/router-deprecated": "2.0.0-rc.2", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/platform-server": "2.0.0-rc.4", + "@angular/router": "3.0.0-beta.2", "amcharts3": "github:amcharts/amcharts3", "ammap3": "github:amcharts/ammap3", "animate.css": "^3.5.1", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0f785054..9bfa7737 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,10 @@ -import './app.loader.ts'; - -import {Component, ViewEncapsulation} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {Pages} from './pages'; -import {Login} from './pages/login'; -import {Register} from './pages/register'; -import {AppState} from './app.state'; -import {BaThemeConfigProvider, BaThemeConfig} from './theme'; -import {BaThemeRun} from './theme/directives'; -import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from './theme/services'; - -import {layoutPaths} from './theme/theme.constants'; +import "./app.loader.ts"; +import {Component, ViewEncapsulation} from "@angular/core"; +import {AppState} from "./app.state"; +import {BaThemeConfigProvider, BaThemeConfig} from "./theme"; +import {BaThemeRun} from "./theme/directives"; +import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from "./theme/services"; +import {layoutPaths} from "./theme/theme.constants"; /* * App Component @@ -31,31 +24,6 @@ import {layoutPaths} from './theme/theme.constants'; ` }) -@RouteConfig([ - { - path: '/pages/...', - name: 'Pages', - component: Pages, - useAsDefault: true - }, - { - path: '/login', - name: 'Login', - component: Login - }, - { - path: '/register', - name: 'Register', - component: Register - }, - // handle any non-registered route - // and simply redirects back to dashboard page - // you can specify any customer 404 page while it's not built in ito ng2-admin - { - path: '/**', - redirectTo: ['Pages'] - } -]) export class App { isMenuCollapsed:boolean = false; diff --git a/src/app/app.menu.ts b/src/app/app.menu.ts index 97d4a385..1d75bc06 100644 --- a/src/app/app.menu.ts +++ b/src/app/app.menu.ts @@ -1,125 +1,113 @@ export const menuItems = [ { title: 'Dashboard', - component: 'Dashboard', - icon: 'ion-android-home', + component: 'dashboard', + icon: 'fa fa-home', selected: false, expanded: false, order: 0 }, - { - title: 'Editors', - component: 'Editors', - icon: 'ion-edit', - order: 100, - subMenu: [ - { - title: 'CKEditor', - component: 'Ckeditor' - } - ] - }, { title: 'Charts', - component: 'Charts', - icon: 'ion-stats-bars', + component: 'charts', + icon: 'fa fa-bar-chart', selected: false, expanded: false, order: 200, subMenu: [ { title: 'Chartist.Js', - component: 'ChartistJs', + component: 'chartist-js', }, ] }, { title: 'UI Features', - component: 'Ui', - icon: 'ion-android-laptop', + component: 'ui', + icon: 'fa fa-laptop', selected: false, expanded: false, order: 300, subMenu: [ { title: 'Typography', - component: 'Typography', + component: 'typography', }, { title: 'Buttons', - component: 'Buttons', + component: 'buttons', }, { title: 'Icons', - component: 'Icons', + component: 'icons', }, { title: 'Grid', - component: 'Grid', + component: 'grid', }, ] }, { title: 'Form Elements', - component: 'Forms', - icon: 'ion-compose', + component: 'forms', + icon: 'fa fa-pencil-square-o', selected: false, expanded: false, order: 400, subMenu: [ { title: 'Form Inputs', - component: 'Inputs', + component: 'inputs', }, { title: 'Form Layouts', - component: 'Layouts', + component: 'layouts', }, ] }, { title: 'Tables', - component: 'Tables', - icon: 'ion-grid', + component: 'tables', + icon: 'fa fa-table', selected: false, expanded: false, order: 500, subMenu: [ { title: 'Basic Tables', - component: 'BasicTables', + component: 'basictables', } ] }, { title: 'Maps', - component: 'Maps', - icon: 'ion-ios-location-outline', + component: 'maps', + icon: 'fa fa-map-marker', selected: false, expanded: false, order: 600, subMenu: [ { title: 'Google Maps', - component: 'GoogleMaps', + component: 'googlemaps', }, { title: 'Leaflet Maps', - component: 'LeafletMaps', + component: 'leafletmaps', }, { title: 'Bubble Maps', - component: 'BubbleMaps', + component: 'bubblemaps', }, { title: 'Line Maps', - component: 'LineMaps', + component: 'linemaps', } ] }, { title: 'Pages', - icon: 'ion-document', + icon: 'fa fa-sticky-note', selected: false, expanded: false, order: 650, @@ -136,7 +124,7 @@ export const menuItems = [ }, { title: 'Menu Level 1', - icon: 'ion-ios-more', + icon: 'fa fa-level-down', selected: false, expanded: false, order: 700, diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts new file mode 100644 index 00000000..fdf86ea1 --- /dev/null +++ b/src/app/app.routes.ts @@ -0,0 +1,19 @@ +import { provideRouter, RouterConfig } from '@angular/router'; +import {LoginRoutes} from "./pages/login/login.routes"; +import {PagesRoutes} from "./pages/pages.routes"; +import {RegisterRoutes} from "./pages/register/register.routes"; + +export const routes: RouterConfig = [ + { + path: '', + redirectTo: '/pages/dashboard', + terminal: true + }, + ...LoginRoutes, + ...RegisterRoutes, + ...PagesRoutes +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/src/app/pages/charts/charts.component.ts b/src/app/pages/charts/charts.component.ts index 62cf1879..366a277c 100644 --- a/src/app/pages/charts/charts.component.ts +++ b/src/app/pages/charts/charts.component.ts @@ -1,8 +1,6 @@ -import {Component} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; +import {Component} from "@angular/core"; // import {ChartJs} from "./components/chartJs"; -import {ChartistJs} from "./components/chartistJs/chartistJs.component"; @Component({ selector: 'maps', @@ -11,19 +9,6 @@ import {ChartistJs} from "./components/chartistJs/chartistJs.component"; styles: [], template: `` }) -@RouteConfig([ - { - name: 'ChartistJs', - component: ChartistJs, - path: '/chartist-js', - useAsDefault: true, - }, - // { - // name: 'ChartJs', - // component: ChartJs, - // path: '/chart-js', - // }, -]) export class Charts { constructor() { diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts index 05bde0bf..253fca02 100644 --- a/src/app/pages/forms/forms.component.ts +++ b/src/app/pages/forms/forms.component.ts @@ -1,8 +1,4 @@ -import {Component} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {Inputs} from './components/inputs'; -import {Layouts} from './components/layouts'; +import {Component} from "@angular/core"; @Component({ selector: 'forms', @@ -11,19 +7,6 @@ import {Layouts} from './components/layouts'; styles: [], template: `` }) -@RouteConfig([ - { - name: 'Inputs', - component: Inputs, - path: '/inputs', - useAsDefault: true - }, - { - name: 'Layouts', - component: Layouts, - path: '/layouts', - } -]) export class Forms { constructor() { diff --git a/src/app/pages/login/login.routes.ts b/src/app/pages/login/login.routes.ts new file mode 100644 index 00000000..cd428cc3 --- /dev/null +++ b/src/app/pages/login/login.routes.ts @@ -0,0 +1,14 @@ +import {RouterConfig} from "@angular/router"; +import {Login} from "./login.component"; + +export const LoginRoutes: RouterConfig = [ + { + path: '', + redirectTo: '/login', + terminal: true + }, + { + path: 'login', + component: Login + } +]; diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts index cc890fd8..bed642a2 100644 --- a/src/app/pages/maps/maps.component.ts +++ b/src/app/pages/maps/maps.component.ts @@ -1,10 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {GoogleMaps} from './components/googleMaps'; -import {LeafletMaps} from "./components/leafletMaps"; -import {BubbleMaps} from "./components/bubbleMaps"; -import {LineMaps} from "./components/lineMaps"; +import {Component} from "@angular/core"; @Component({ selector: 'maps', @@ -13,29 +7,6 @@ import {LineMaps} from "./components/lineMaps"; styles: [], template: `` }) -@RouteConfig([ - { - name: 'GoogleMaps', - component: GoogleMaps, - path: '/google-maps', - useAsDefault: true - }, - { - name: 'LeafletMaps', - component: LeafletMaps, - path: '/leaflet-maps', - }, - { - name: 'BubbleMaps', - component: BubbleMaps, - path: '/bubble-maps', - }, - { - name: 'LineMaps', - component: LineMaps, - path: '/line-maps', - }, -]) export class Maps { constructor() { diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 33f9c4a1..3f2a77c4 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,16 +1,6 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components'; -import {Dashboard} from './dashboard'; -import {Ui} from './ui'; -import {Maps} from './maps'; -import {Charts} from './charts'; -import {Forms} from './forms'; -import {Tables} from './tables'; -import {Editors} from "./editors"; - @Component({ selector: 'pages', encapsulation: ViewEncapsulation.None, @@ -40,44 +30,6 @@ import {Editors} from "./editors"; ` }) -@RouteConfig([ - { - name: 'Editors', - component: Editors, - path: '/editors/...', - }, - { - name: 'Dashboard', - component: Dashboard, - path: '/dashboard', - useAsDefault: true, - }, - { - name: 'Ui', - component: Ui, - path: '/ui/...', - }, - { - name: 'Maps', - component: Maps, - path: '/maps/...', - }, - { - name: 'Charts', - component: Charts, - path: '/charts/...', - }, - { - name: 'Forms', - component: Forms, - path: '/forms/...', - }, - { - name: 'Tables', - component: Tables, - path: '/tables/...', - } -]) export class Pages { constructor() { diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts new file mode 100644 index 00000000..38d88d5a --- /dev/null +++ b/src/app/pages/pages.routes.ts @@ -0,0 +1,114 @@ +import {RouterConfig} from '@angular/router'; +import {Dashboard} from "./dashboard/dashboard.component"; +import {Charts} from "./charts/charts.component"; +import {ChartistJs} from "./charts/components/chartistJs/chartistJs.component"; +import {Pages} from "./pages.component"; +import {Ui} from "./ui/ui.component"; +import {Typography} from "./ui/components/typography/typography.component"; +import {Buttons} from "./ui/components/buttons/buttons.component"; +import {Icons} from "./ui/components/incons/icons.component"; +import {Grid} from "./ui/components/grid/grid.component"; +import {Forms} from "./forms/forms.component"; +import {Inputs} from "./forms/components/inputs/inputs.component"; +import {Layouts} from "./forms/components/layouts/layouts.component"; +import {BasicTables} from "./tables/components/basicTables/basicTables.component"; +import {Tables} from "./tables/tables.component"; +import {Maps} from "./maps/maps.component"; +import {GoogleMaps} from "./maps/components/googleMaps/googleMaps.component"; +import {LeafletMaps} from "./maps/components/leafletMaps/leafletMaps.component"; +import {BubbleMaps} from "./maps/components/bubbleMaps/bubbleMaps.component"; +import {LineMaps} from "./maps/components/lineMaps/lineMaps.component"; +import {Login} from "./login/login.component"; +import {Register} from "./register/register.component"; + +//noinspection TypeScriptValidateTypes +export const PagesRoutes:RouterConfig = [ + { + path: 'pages', + component: Pages, + children: [ + { + path: 'dashboard', + component: Dashboard + }, + { + path: 'charts', + component: Charts, + children: [ + { + path: 'chartist-js', + component: ChartistJs + } + ] + }, + { + path: 'ui', + component: Ui, + children: [ + { + path: 'typography', + component: Typography + }, + { + path: 'buttons', + component: Buttons + }, + { + path: 'icons', + component: Icons + }, + { + path: 'grid', + component: Grid + }, + ] + }, + { + path: 'forms', + component: Forms, + children: [ + { + path: 'inputs', + component: Inputs + }, + { + path: 'layouts', + component: Layouts + } + ] + }, + { + path: 'tables', + component: Tables, + children: [ + { + path: 'basictables', + component: BasicTables + } + ] + }, + { + path: 'maps', + component: Maps, + children: [ + { + path: 'googlemaps', + component: GoogleMaps + }, + { + path: 'leafletmaps', + component: LeafletMaps + }, + { + path: 'bubblemaps', + component: BubbleMaps + }, + { + path: 'linemaps', + component: LineMaps + } + ] + }, + ] + } +]; diff --git a/src/app/pages/register/register.routes.ts b/src/app/pages/register/register.routes.ts new file mode 100644 index 00000000..6b6a6513 --- /dev/null +++ b/src/app/pages/register/register.routes.ts @@ -0,0 +1,14 @@ +import {RouterConfig} from "@angular/router"; +import {Register} from "./register.component"; + +export const RegisterRoutes: RouterConfig = [ + { + path: '', + redirectTo: '/register', + terminal: true + }, + { + path: 'register', + component: Register + } +]; diff --git a/src/app/pages/tables/tables.component.ts b/src/app/pages/tables/tables.component.ts index 13e1f44e..843722c0 100644 --- a/src/app/pages/tables/tables.component.ts +++ b/src/app/pages/tables/tables.component.ts @@ -1,7 +1,4 @@ -import {Component} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {BasicTables} from './components/basicTables'; +import {Component} from "@angular/core"; @Component({ selector: 'forms', @@ -10,14 +7,6 @@ import {BasicTables} from './components/basicTables'; styles: [], template: `` }) -@RouteConfig([ - { - name: 'BasicTables', - component: BasicTables, - path: '/basic', - useAsDefault: true - } -]) export class Tables { constructor() { diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts index a59df0ae..245b73d4 100644 --- a/src/app/pages/ui/ui.component.ts +++ b/src/app/pages/ui/ui.component.ts @@ -1,10 +1,4 @@ -import {Component} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {Typography} from './components/typography'; -import {Buttons} from './components/buttons'; -import {Icons} from './components/incons'; -import {Grid} from './components/grid'; +import {Component} from "@angular/core"; @Component({ selector: 'ui', @@ -13,29 +7,6 @@ import {Grid} from './components/grid'; styles: [], template: `` }) -@RouteConfig([ - { - name: 'Typography', - component: Typography, - path: '/typography', - useAsDefault: true - }, - { - name: 'Buttons', - component: Buttons, - path: '/buttons', - }, - { - name: 'Icons', - component: Icons, - path: '/icons', - }, - { - name: 'Grid', - component: Grid, - path: '/grid', - } -]) export class Ui { constructor() { diff --git a/src/app/theme/components/baSidebar/baSidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts index 929b4662..89eef900 100644 --- a/src/app/theme/components/baSidebar/baSidebar.component.ts +++ b/src/app/theme/components/baSidebar/baSidebar.component.ts @@ -1,5 +1,5 @@ import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core'; -import {Router} from '@angular/router-deprecated'; +import {Router} from '@angular/router'; import {AppState} from '../../../app.state'; import {layoutSizes} from '../../../theme'; @@ -35,7 +35,7 @@ export class BaSidebar { private _state:AppState) { this.menuItems = this._sidebarService.getMenuItems(); - this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem()); + // this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem()); this._state.subscribe('menu.isCollapsed', (isCollapsed) => { this.isMenuCollapsed = isCollapsed; }); @@ -49,7 +49,7 @@ export class BaSidebar { } public ngOnDestroy():void { - this._onRouteChange.unsubscribe(); + // this._onRouteChange.unsubscribe(); } public ngAfterViewInit():void { diff --git a/src/platform/browser/directives.ts b/src/platform/browser/directives.ts index 7693bb4b..732e4189 100644 --- a/src/platform/browser/directives.ts +++ b/src/platform/browser/directives.ts @@ -5,7 +5,7 @@ import {PLATFORM_DIRECTIVES} from '@angular/core'; // Angular 2 Router -import {ROUTER_DIRECTIVES} from '@angular/router-deprecated'; +import {ROUTER_DIRECTIVES} from '@angular/router'; // application_directives: directives that are global through out the application export const APPLICATION_DIRECTIVES = [ diff --git a/src/platform/browser/providers.ts b/src/platform/browser/providers.ts index 9027794d..374533ce 100644 --- a/src/platform/browser/providers.ts +++ b/src/platform/browser/providers.ts @@ -7,8 +7,8 @@ import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/c // Angular 2 Http import {HTTP_PROVIDERS} from '@angular/http'; -// Angular 2 Router -import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; +import {APP_ROUTER_PROVIDERS} from "../../app/app.routes"; + /* * Application Providers/Directives/Pipes @@ -17,7 +17,7 @@ import {ROUTER_PROVIDERS} from '@angular/router-deprecated'; export const APPLICATION_PROVIDERS = [ ...FORM_PROVIDERS, ...HTTP_PROVIDERS, - ...ROUTER_PROVIDERS, + ...APP_ROUTER_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy } ]; diff --git a/src/vendor.ts b/src/vendor.ts index a5c5b6cd..3ace4485 100644 --- a/src/vendor.ts +++ b/src/vendor.ts @@ -9,7 +9,7 @@ import '@angular/platform-browser-dynamic'; import '@angular/core'; import '@angular/common'; import '@angular/http'; -import '@angular/router-deprecated'; +import '@angular/router'; // RxJS import 'rxjs/add/operator/map'; From f24546639c8dda655a73be7239c2d4bb5124aa63 Mon Sep 17 00:00:00 2001 From: Ronny Roos Date: Wed, 6 Jul 2016 21:26:34 +0200 Subject: [PATCH 2/8] Fixed problems with the sidebar service. Switched to use "path" concept instead of component --- src/app/app.menu.ts | 40 +++++++++---------- .../baSidebar/baSidebar.component.ts | 19 ++++----- .../theme/components/baSidebar/baSidebar.html | 12 +++--- .../components/baSidebar/baSidebar.service.ts | 30 +++++++++----- 4 files changed, 57 insertions(+), 44 deletions(-) diff --git a/src/app/app.menu.ts b/src/app/app.menu.ts index 1d75bc06..5de1e553 100644 --- a/src/app/app.menu.ts +++ b/src/app/app.menu.ts @@ -1,7 +1,7 @@ export const menuItems = [ { title: 'Dashboard', - component: 'dashboard', + path: '/pages/dashboard', icon: 'fa fa-home', selected: false, expanded: false, @@ -9,7 +9,7 @@ export const menuItems = [ }, { title: 'Charts', - component: 'charts', + path: '/pages/charts', icon: 'fa fa-bar-chart', selected: false, expanded: false, @@ -17,13 +17,13 @@ export const menuItems = [ subMenu: [ { title: 'Chartist.Js', - component: 'chartist-js', + path: '/chartist-js', }, ] }, { title: 'UI Features', - component: 'ui', + path: '/pages/ui', icon: 'fa fa-laptop', selected: false, expanded: false, @@ -31,25 +31,25 @@ export const menuItems = [ subMenu: [ { title: 'Typography', - component: 'typography', + path: '/typography', }, { title: 'Buttons', - component: 'buttons', + path: '/buttons', }, { title: 'Icons', - component: 'icons', + path: '/icons', }, { title: 'Grid', - component: 'grid', + path: '/grid', }, ] }, { title: 'Form Elements', - component: 'forms', + path: '/pages/forms', icon: 'fa fa-pencil-square-o', selected: false, expanded: false, @@ -57,17 +57,17 @@ export const menuItems = [ subMenu: [ { title: 'Form Inputs', - component: 'inputs', + path: '/inputs', }, { title: 'Form Layouts', - component: 'layouts', + path: '/layouts', }, ] }, { title: 'Tables', - component: 'tables', + path: '/pages/tables', icon: 'fa fa-table', selected: false, expanded: false, @@ -75,13 +75,13 @@ export const menuItems = [ subMenu: [ { title: 'Basic Tables', - component: 'basictables', + path: '/basictables', } ] }, { title: 'Maps', - component: 'maps', + path: '/pages/maps', icon: 'fa fa-map-marker', selected: false, expanded: false, @@ -89,19 +89,19 @@ export const menuItems = [ subMenu: [ { title: 'Google Maps', - component: 'googlemaps', + path: '/googlemaps', }, { title: 'Leaflet Maps', - component: 'leafletmaps', + path: '/leafletmaps', }, { title: 'Bubble Maps', - component: 'bubblemaps', + path: '/bubblemaps', }, { title: 'Line Maps', - component: 'linemaps', + path: '/linemaps', } ] }, @@ -114,11 +114,11 @@ export const menuItems = [ subMenu: [ { title: 'Login', - url: '#/login', + path: '/login', }, { title: 'Register', - url: '#/register', + path: '/register', } ] }, diff --git a/src/app/theme/components/baSidebar/baSidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts index 89eef900..7241714b 100644 --- a/src/app/theme/components/baSidebar/baSidebar.component.ts +++ b/src/app/theme/components/baSidebar/baSidebar.component.ts @@ -1,10 +1,9 @@ -import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core'; -import {Router} from '@angular/router'; - -import {AppState} from '../../../app.state'; -import {layoutSizes} from '../../../theme'; -import {BaSlimScroll} from '../../../theme/directives'; -import {BaSidebarService} from './baSidebar.service'; +import {Component, ElementRef, HostListener, ViewEncapsulation} from "@angular/core"; +import {Router} from "@angular/router"; +import {AppState} from "../../../app.state"; +import {layoutSizes} from "../../../theme"; +import {BaSlimScroll} from "../../../theme/directives"; +import {BaSidebarService} from "./baSidebar.service"; @Component({ selector: 'ba-sidebar', @@ -35,7 +34,9 @@ export class BaSidebar { private _state:AppState) { this.menuItems = this._sidebarService.getMenuItems(); - // this._onRouteChange = this._router.root.subscribe((path) => this._selectMenuItem()); + this._onRouteChange = this._router.events.subscribe(() => { + this._selectMenuItem(); + }); this._state.subscribe('menu.isCollapsed', (isCollapsed) => { this.isMenuCollapsed = isCollapsed; }); @@ -49,7 +50,7 @@ export class BaSidebar { } public ngOnDestroy():void { - // this._onRouteChange.unsubscribe(); + this._onRouteChange.unsubscribe(); } public ngAfterViewInit():void { diff --git a/src/app/theme/components/baSidebar/baSidebar.html b/src/app/theme/components/baSidebar/baSidebar.html index cdb4d344..c8956c7e 100644 --- a/src/app/theme/components/baSidebar/baSidebar.html +++ b/src/app/theme/components/baSidebar/baSidebar.html @@ -4,10 +4,10 @@ [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}"> - + {{ item.title }} - + {{ item.title }} @@ -31,17 +31,17 @@ [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
  • - + {{ subSubitem.title }} - + {{ subSubitem.title }}
    • - {{ subitem.title}} - {{ subitem.title}} diff --git a/src/app/theme/components/baSidebar/baSidebar.service.ts b/src/app/theme/components/baSidebar/baSidebar.service.ts index 7653aae1..ce9a5f41 100644 --- a/src/app/theme/components/baSidebar/baSidebar.service.ts +++ b/src/app/theme/components/baSidebar/baSidebar.service.ts @@ -1,16 +1,17 @@ import {Injectable} from '@angular/core'; import {menuItems} from '../../../app.menu'; +import {Router, UrlTree} from "@angular/router"; @Injectable() export class BaSidebarService { - private _router; + private _router:Router; public getMenuItems():Array { return menuItems; } - public setRouter(router): BaSidebarService { + public setRouter(router:Router):BaSidebarService { this._router = router; return this; } @@ -20,14 +21,14 @@ export class BaSidebarService { let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null); - items.forEach((menu: any) => { + items.forEach((menu:any) => { - this._selectItem([menu.component], menu); + this._selectItem([menu.path], menu); assignCurrent(menu); if (menu.subMenu) { menu.subMenu.forEach((subMenu) => { - this._selectItem([menu.component, subMenu.component], subMenu, menu); + this._selectItem([menu.path, subMenu.path], subMenu, menu); assignCurrent(subMenu); }); } @@ -43,11 +44,22 @@ export class BaSidebarService { } } - private _isCurrent(route) { - return route ? this._router.isRouteActive(route) : false; + private _isCurrent(route:UrlTree):boolean { + if (!route) + return false; + + return this._router.url === this._router.serializeUrl(route); } - private _generateRoute(instructions) { - return instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.generate(instructions) : null; + private _generateRoute(instructions:any[]):UrlTree { + if (!instructions) + return null; + + instructions = instructions.filter(item => !!item); + + if (instructions.length === 0) + return null; + + return this._router.createUrlTree(instructions); } } From 24de0070fa10cee680e21035604cb6df8f5b41c3 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Thu, 7 Jul 2016 16:30:00 +0300 Subject: [PATCH 3/8] refactor(router): code style changes --- src/app/app.component.ts | 2 +- src/app/app.menu.ts | 30 ++++++++--- src/app/pages/editors/editors.component.ts | 2 +- src/app/pages/forms/forms.component.ts | 2 +- src/app/pages/login/login.html | 2 +- src/app/pages/login/login.routes.ts | 4 +- src/app/pages/maps/maps.component.ts | 2 +- src/app/pages/pages.routes.ts | 52 +++++++++++-------- src/app/pages/register/register.html | 2 +- src/app/pages/register/register.routes.ts | 4 +- src/app/pages/tables/tables.component.ts | 2 +- src/app/pages/ui/ui.component.ts | 2 +- .../baSidebar/baSidebar.component.ts | 12 ++--- .../components/baSidebar/baSidebar.service.ts | 19 +++---- src/platform/browser/providers.ts | 2 +- 15 files changed, 80 insertions(+), 59 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9bfa7737..8a074e89 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import "./app.loader.ts"; +import './app.loader.ts'; import {Component, ViewEncapsulation} from "@angular/core"; import {AppState} from "./app.state"; import {BaThemeConfigProvider, BaThemeConfig} from "./theme"; diff --git a/src/app/app.menu.ts b/src/app/app.menu.ts index 5de1e553..166ae2e7 100644 --- a/src/app/app.menu.ts +++ b/src/app/app.menu.ts @@ -2,15 +2,29 @@ export const menuItems = [ { title: 'Dashboard', path: '/pages/dashboard', - icon: 'fa fa-home', + icon: 'ion-android-home', selected: false, expanded: false, order: 0 }, + { + title: 'Editors', + path: '/pages/editors', + icon: 'ion-edit', + selected: false, + expanded: false, + order: 100, + subMenu: [ + { + title: 'CKEditor', + path: '/ckeditor', + } + ] + }, { title: 'Charts', path: '/pages/charts', - icon: 'fa fa-bar-chart', + icon: 'ion-stats-bars', selected: false, expanded: false, order: 200, @@ -24,7 +38,7 @@ export const menuItems = [ { title: 'UI Features', path: '/pages/ui', - icon: 'fa fa-laptop', + icon: 'ion-android-laptop', selected: false, expanded: false, order: 300, @@ -50,7 +64,7 @@ export const menuItems = [ { title: 'Form Elements', path: '/pages/forms', - icon: 'fa fa-pencil-square-o', + icon: 'ion-compose', selected: false, expanded: false, order: 400, @@ -68,7 +82,7 @@ export const menuItems = [ { title: 'Tables', path: '/pages/tables', - icon: 'fa fa-table', + icon: 'ion-grid', selected: false, expanded: false, order: 500, @@ -82,7 +96,7 @@ export const menuItems = [ { title: 'Maps', path: '/pages/maps', - icon: 'fa fa-map-marker', + icon: 'ion-ios-location-outline', selected: false, expanded: false, order: 600, @@ -107,7 +121,7 @@ export const menuItems = [ }, { title: 'Pages', - icon: 'fa fa-sticky-note', + icon: 'ion-document', selected: false, expanded: false, order: 650, @@ -124,7 +138,7 @@ export const menuItems = [ }, { title: 'Menu Level 1', - icon: 'fa fa-level-down', + icon: 'ion-ios-more', selected: false, expanded: false, order: 700, diff --git a/src/app/pages/editors/editors.component.ts b/src/app/pages/editors/editors.component.ts index ae570ac4..9ff4ab9a 100644 --- a/src/app/pages/editors/editors.component.ts +++ b/src/app/pages/editors/editors.component.ts @@ -1,7 +1,7 @@ import {Component} from '@angular/core'; import {RouteConfig} from '@angular/router-deprecated'; -import {Ckeditor} from "./components/ckeditor"; +import {Ckeditor} from './components/ckeditor'; @Component({ selector: 'editors', diff --git a/src/app/pages/forms/forms.component.ts b/src/app/pages/forms/forms.component.ts index 253fca02..763390c1 100644 --- a/src/app/pages/forms/forms.component.ts +++ b/src/app/pages/forms/forms.component.ts @@ -1,4 +1,4 @@ -import {Component} from "@angular/core"; +import {Component} from '@angular/core'; @Component({ selector: 'forms', diff --git a/src/app/pages/login/login.html b/src/app/pages/login/login.html index 9bedac1a..651be29c 100644 --- a/src/app/pages/login/login.html +++ b/src/app/pages/login/login.html @@ -1,7 +1,7 @@

    Sign in to ng2-admin

    - New to ng2-admin? Sign up! + New to ng2-admin? Sign up!
    diff --git a/src/app/pages/login/login.routes.ts b/src/app/pages/login/login.routes.ts index cd428cc3..f928f345 100644 --- a/src/app/pages/login/login.routes.ts +++ b/src/app/pages/login/login.routes.ts @@ -1,5 +1,5 @@ -import {RouterConfig} from "@angular/router"; -import {Login} from "./login.component"; +import {RouterConfig} from '@angular/router'; +import {Login} from './login.component'; export const LoginRoutes: RouterConfig = [ { diff --git a/src/app/pages/maps/maps.component.ts b/src/app/pages/maps/maps.component.ts index bed642a2..072cb4e7 100644 --- a/src/app/pages/maps/maps.component.ts +++ b/src/app/pages/maps/maps.component.ts @@ -1,4 +1,4 @@ -import {Component} from "@angular/core"; +import {Component} from '@angular/core'; @Component({ selector: 'maps', diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts index 38d88d5a..b14f7b27 100644 --- a/src/app/pages/pages.routes.ts +++ b/src/app/pages/pages.routes.ts @@ -1,25 +1,25 @@ import {RouterConfig} from '@angular/router'; -import {Dashboard} from "./dashboard/dashboard.component"; -import {Charts} from "./charts/charts.component"; -import {ChartistJs} from "./charts/components/chartistJs/chartistJs.component"; -import {Pages} from "./pages.component"; -import {Ui} from "./ui/ui.component"; -import {Typography} from "./ui/components/typography/typography.component"; -import {Buttons} from "./ui/components/buttons/buttons.component"; -import {Icons} from "./ui/components/incons/icons.component"; -import {Grid} from "./ui/components/grid/grid.component"; -import {Forms} from "./forms/forms.component"; -import {Inputs} from "./forms/components/inputs/inputs.component"; -import {Layouts} from "./forms/components/layouts/layouts.component"; -import {BasicTables} from "./tables/components/basicTables/basicTables.component"; -import {Tables} from "./tables/tables.component"; -import {Maps} from "./maps/maps.component"; -import {GoogleMaps} from "./maps/components/googleMaps/googleMaps.component"; -import {LeafletMaps} from "./maps/components/leafletMaps/leafletMaps.component"; -import {BubbleMaps} from "./maps/components/bubbleMaps/bubbleMaps.component"; -import {LineMaps} from "./maps/components/lineMaps/lineMaps.component"; -import {Login} from "./login/login.component"; -import {Register} from "./register/register.component"; +import {Dashboard} from './dashboard/dashboard.component'; +import {Charts} from './charts/charts.component'; +import {ChartistJs} from './charts/components/chartistJs/chartistJs.component'; +import {Pages} from './pages.component'; +import {Ui} from './ui/ui.component'; +import {Typography} from './ui/components/typography/typography.component'; +import {Buttons} from './ui/components/buttons/buttons.component'; +import {Icons} from './ui/components/incons/icons.component'; +import {Grid} from './ui/components/grid/grid.component'; +import {Forms} from './forms/forms.component'; +import {Inputs} from './forms/components/inputs/inputs.component'; +import {Layouts} from './forms/components/layouts/layouts.component'; +import {BasicTables} from './tables/components/basicTables/basicTables.component'; +import {Tables} from './tables/tables.component'; +import {Maps} from './maps/maps.component'; +import {GoogleMaps} from './maps/components/googleMaps/googleMaps.component'; +import {LeafletMaps} from './maps/components/leafletMaps/leafletMaps.component'; +import {BubbleMaps} from './maps/components/bubbleMaps/bubbleMaps.component'; +import {LineMaps} from './maps/components/lineMaps/lineMaps.component'; +import {Editors} from './editors/editors.component'; +import {Ckeditor} from './editors/components/ckeditor/ckeditor.component'; //noinspection TypeScriptValidateTypes export const PagesRoutes:RouterConfig = [ @@ -31,6 +31,16 @@ export const PagesRoutes:RouterConfig = [ path: 'dashboard', component: Dashboard }, + { + path: 'editors', + component: Editors, + children: [ + { + path: 'ckeditor', + component: Ckeditor + } + ] + }, { path: 'charts', component: Charts, diff --git a/src/app/pages/register/register.html b/src/app/pages/register/register.html index de3d19b7..b04dd7a5 100644 --- a/src/app/pages/register/register.html +++ b/src/app/pages/register/register.html @@ -1,7 +1,7 @@

    Sign up to ng2-admin

    - Already have an ng2-admin account? Sign in! + Already have an ng2-admin account? Sign in!
    diff --git a/src/app/pages/register/register.routes.ts b/src/app/pages/register/register.routes.ts index 6b6a6513..1aff448b 100644 --- a/src/app/pages/register/register.routes.ts +++ b/src/app/pages/register/register.routes.ts @@ -1,5 +1,5 @@ -import {RouterConfig} from "@angular/router"; -import {Register} from "./register.component"; +import {RouterConfig} from '@angular/router'; +import {Register} from './register.component'; export const RegisterRoutes: RouterConfig = [ { diff --git a/src/app/pages/tables/tables.component.ts b/src/app/pages/tables/tables.component.ts index 843722c0..1091f8e6 100644 --- a/src/app/pages/tables/tables.component.ts +++ b/src/app/pages/tables/tables.component.ts @@ -1,4 +1,4 @@ -import {Component} from "@angular/core"; +import {Component} from '@angular/core'; @Component({ selector: 'forms', diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts index 245b73d4..bd1461b9 100644 --- a/src/app/pages/ui/ui.component.ts +++ b/src/app/pages/ui/ui.component.ts @@ -1,4 +1,4 @@ -import {Component} from "@angular/core"; +import {Component} from '@angular/core'; @Component({ selector: 'ui', diff --git a/src/app/theme/components/baSidebar/baSidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts index 7241714b..eb4b6805 100644 --- a/src/app/theme/components/baSidebar/baSidebar.component.ts +++ b/src/app/theme/components/baSidebar/baSidebar.component.ts @@ -1,9 +1,9 @@ -import {Component, ElementRef, HostListener, ViewEncapsulation} from "@angular/core"; -import {Router} from "@angular/router"; -import {AppState} from "../../../app.state"; -import {layoutSizes} from "../../../theme"; -import {BaSlimScroll} from "../../../theme/directives"; -import {BaSidebarService} from "./baSidebar.service"; +import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core'; +import {Router} from '@angular/router'; +import {AppState} from '../../../app.state'; +import {layoutSizes} from '../../../theme'; +import {BaSlimScroll} from '../../../theme/directives'; +import {BaSidebarService} from './baSidebar.service'; @Component({ selector: 'ba-sidebar', diff --git a/src/app/theme/components/baSidebar/baSidebar.service.ts b/src/app/theme/components/baSidebar/baSidebar.service.ts index ce9a5f41..8b004cf6 100644 --- a/src/app/theme/components/baSidebar/baSidebar.service.ts +++ b/src/app/theme/components/baSidebar/baSidebar.service.ts @@ -45,21 +45,18 @@ export class BaSidebarService { } private _isCurrent(route:UrlTree):boolean { - if (!route) - return false; - - return this._router.url === this._router.serializeUrl(route); + if (route) { + return this._router.url === this._router.serializeUrl(route); + } + return false; } private _generateRoute(instructions:any[]):UrlTree { - if (!instructions) - return null; - instructions = instructions.filter(item => !!item); - if (instructions.length === 0) - return null; - - return this._router.createUrlTree(instructions); + if (instructions.length != 0) { + return this._router.createUrlTree(instructions); + } + return null; } } diff --git a/src/platform/browser/providers.ts b/src/platform/browser/providers.ts index 374533ce..51da187f 100644 --- a/src/platform/browser/providers.ts +++ b/src/platform/browser/providers.ts @@ -7,7 +7,7 @@ import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/c // Angular 2 Http import {HTTP_PROVIDERS} from '@angular/http'; -import {APP_ROUTER_PROVIDERS} from "../../app/app.routes"; +import {APP_ROUTER_PROVIDERS} from '../../app/app.routes'; /* From 54f5f9a0417f469302b1f24bbce14531f670a196 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Thu, 7 Jul 2016 16:56:07 +0300 Subject: [PATCH 4/8] fix(router): redirect not found routes to dashboard --- src/app/app.routes.ts | 11 +++++------ src/app/pages/login/login.routes.ts | 6 +----- src/app/pages/register/register.routes.ts | 6 +----- 3 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index fdf86ea1..cdcb73cf 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -4,14 +4,13 @@ import {PagesRoutes} from "./pages/pages.routes"; import {RegisterRoutes} from "./pages/register/register.routes"; export const routes: RouterConfig = [ - { - path: '', - redirectTo: '/pages/dashboard', - terminal: true - }, ...LoginRoutes, ...RegisterRoutes, - ...PagesRoutes + ...PagesRoutes, + { + path: '**', + redirectTo: '/pages/dashboard' + }, ]; export const APP_ROUTER_PROVIDERS = [ diff --git a/src/app/pages/login/login.routes.ts b/src/app/pages/login/login.routes.ts index f928f345..2bf1df36 100644 --- a/src/app/pages/login/login.routes.ts +++ b/src/app/pages/login/login.routes.ts @@ -1,12 +1,8 @@ import {RouterConfig} from '@angular/router'; import {Login} from './login.component'; +//noinspection TypeScriptValidateTypes export const LoginRoutes: RouterConfig = [ - { - path: '', - redirectTo: '/login', - terminal: true - }, { path: 'login', component: Login diff --git a/src/app/pages/register/register.routes.ts b/src/app/pages/register/register.routes.ts index 1aff448b..a6d577a8 100644 --- a/src/app/pages/register/register.routes.ts +++ b/src/app/pages/register/register.routes.ts @@ -1,12 +1,8 @@ import {RouterConfig} from '@angular/router'; import {Register} from './register.component'; +//noinspection TypeScriptValidateTypes export const RegisterRoutes: RouterConfig = [ - { - path: '', - redirectTo: '/register', - terminal: true - }, { path: 'register', component: Register From 0ee317bc4dc3f7fde8ad2e614f8564cf0ccbb599 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Fri, 8 Jul 2016 18:03:48 +0300 Subject: [PATCH 5/8] feat(sidebar): menu separated from sidebar, menu merged with routes --- src/app/pages/pages.routes.ts | 156 ++++++++++++++++-- .../components/baMenu/baMenu.component.ts | 70 ++++++++ src/app/theme/components/baMenu/baMenu.html | 11 ++ src/app/theme/components/baMenu/baMenu.scss | 1 + .../theme/components/baMenu/baMenu.service.ts | 101 ++++++++++++ .../baMenuItem/baMenuItem.component.ts | 33 ++++ .../components/baMenuItem/baMenuItem.html | 17 ++ .../components/baMenuItem/baMenuItem.scss | 1 + .../baMenu/components/baMenuItem/index.ts | 1 + src/app/theme/components/baMenu/index.ts | 1 + .../baSidebar/baSidebar.component.ts | 71 ++------ .../theme/components/baSidebar/baSidebar.html | 57 +------ .../theme/components/baSidebar/baSidebar.scss | 2 +- .../components/baSidebar/baSidebar.service.ts | 62 ------- src/app/theme/components/index.ts | 1 + 15 files changed, 394 insertions(+), 191 deletions(-) create mode 100644 src/app/theme/components/baMenu/baMenu.component.ts create mode 100644 src/app/theme/components/baMenu/baMenu.html create mode 100644 src/app/theme/components/baMenu/baMenu.scss create mode 100644 src/app/theme/components/baMenu/baMenu.service.ts create mode 100644 src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts create mode 100644 src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html create mode 100644 src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss create mode 100644 src/app/theme/components/baMenu/components/baMenuItem/index.ts create mode 100644 src/app/theme/components/baMenu/index.ts delete mode 100644 src/app/theme/components/baSidebar/baSidebar.service.ts diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts index b14f7b27..512a2530 100644 --- a/src/app/pages/pages.routes.ts +++ b/src/app/pages/pages.routes.ts @@ -29,93 +29,221 @@ export const PagesRoutes:RouterConfig = [ children: [ { path: 'dashboard', - component: Dashboard + component: Dashboard, + data: { + menu: { + title: 'Dashboard', + icon: 'ion-android-home', + selected: false, + expanded: false, + order: 0 + } + } }, { path: 'editors', component: Editors, + data: { + menu: { + title: 'Editors', + icon: 'ion-edit', + selected: false, + expanded: false, + order: 100, + } + }, children: [ { path: 'ckeditor', - component: Ckeditor + component: Ckeditor, + data: { + menu: { + title: 'CKEditor', + } + } } ] }, { path: 'charts', component: Charts, + data: { + menu: { + title: 'Charts', + icon: 'ion-stats-bars', + selected: false, + expanded: false, + order: 200, + } + }, children: [ { path: 'chartist-js', - component: ChartistJs + component: ChartistJs, + data: { + menu: { + title: 'Chartist.Js', + } + } } ] }, { path: 'ui', component: Ui, + data: { + menu: { + title: 'UI Features', + icon: 'ion-android-laptop', + selected: false, + expanded: false, + order: 300, + } + }, children: [ { path: 'typography', - component: Typography + component: Typography, + data: { + menu: { + title: 'Typography', + } + } }, { path: 'buttons', - component: Buttons + component: Buttons, + data: { + menu: { + title: 'Buttons', + } + } }, { path: 'icons', - component: Icons + component: Icons, + data: { + menu: { + title: 'Icons', + } + } }, { path: 'grid', - component: Grid + component: Grid, + data: { + menu: { + title: 'Grid', + } + } }, ] }, { path: 'forms', component: Forms, + data: { + menu: { + title: 'Form Elements', + icon: 'ion-compose', + selected: false, + expanded: false, + order: 400, + } + }, children: [ { path: 'inputs', - component: Inputs + component: Inputs, + data: { + menu: { + title: 'Form Inputs', + } + } }, { path: 'layouts', - component: Layouts + component: Layouts, + data: { + menu: { + title: 'Form Layouts', + } + } } ] }, { path: 'tables', component: Tables, + data: { + menu: { + title: 'Tables', + icon: 'ion-grid', + selected: false, + expanded: false, + order: 500, + } + }, children: [ { path: 'basictables', - component: BasicTables + component: BasicTables, + data: { + menu: { + title: 'Basic Tables', + } + } } ] }, { path: 'maps', component: Maps, + data: { + menu: { + title: 'Maps', + icon: 'ion-ios-location-outline', + selected: false, + expanded: false, + order: 600, + } + }, children: [ { path: 'googlemaps', - component: GoogleMaps + component: GoogleMaps, + data: { + menu: { + title: 'Google Maps', + } + } }, { path: 'leafletmaps', - component: LeafletMaps + component: LeafletMaps, + data: { + menu: { + title: 'Leaflet Maps', + } + } }, { path: 'bubblemaps', - component: BubbleMaps + component: BubbleMaps, + data: { + menu: { + title: 'Bubble Maps', + } + } }, { path: 'linemaps', - component: LineMaps + component: LineMaps, + data: { + menu: { + title: 'Line Maps', + } + } } ] }, diff --git a/src/app/theme/components/baMenu/baMenu.component.ts b/src/app/theme/components/baMenu/baMenu.component.ts new file mode 100644 index 00000000..c0941e03 --- /dev/null +++ b/src/app/theme/components/baMenu/baMenu.component.ts @@ -0,0 +1,70 @@ +import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core'; +import {Router, RouterConfig, NavigationEnd} from '@angular/router'; +import {Subscription} from 'rxjs/Rx'; + +import {BaSlimScroll} from '../../../theme/directives'; +import {BaMenuService} from './baMenu.service'; +import {BaMenuItem} from './components/baMenuItem'; + +@Component({ + selector: 'ba-menu', + encapsulation: ViewEncapsulation.None, + styles: [require('./baMenu.scss')], + template: require('./baMenu.html'), + providers: [BaMenuService], + directives: [BaMenuItem, BaSlimScroll] +}) +export class BaMenu { + + @Input() menuRoutes:RouterConfig = []; + @Input() sidebarCollapsed:boolean = false; + @Input() menuHeight:number; + + @Output() expandMenu = new EventEmitter(); + + public menuItems:any[]; + public showHoverElem:boolean; + public hoverElemHeight:number; + public hoverElemTop:number; + protected _onRouteChange:Subscription; + + constructor(private _router:Router, private _service:BaMenuService) { + + this._onRouteChange = this._router.events.subscribe((event) => { + if (this.menuItems && event instanceof NavigationEnd) { + this.menuItems = this._service.selectMenuItem(this.menuItems); + } + }); + } + + public ngOnInit():void { + this.menuItems = this._service.convertRoutesToMenus(this.menuRoutes); + } + + public ngOnDestroy():void { + this._onRouteChange.unsubscribe(); + } + + public hoverItem($event):void { + this.showHoverElem = true; + this.hoverElemHeight = $event.currentTarget.clientHeight; + // TODO: get rid of magic 66 constant + this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66; + } + + public toggleSubMenu($event):boolean { + var submenu = jQuery($event.currentTarget).next(); + + if (this.sidebarCollapsed) { + this.expandMenu.emit(null); + if (!$event.item.expanded) { + $event.item.expanded = true; + } + } else { + $event.item.expanded = !$event.item.expanded; + submenu.slideToggle(); + } + + return false; + } +} diff --git a/src/app/theme/components/baMenu/baMenu.html b/src/app/theme/components/baMenu/baMenu.html new file mode 100644 index 00000000..ebe22ab7 --- /dev/null +++ b/src/app/theme/components/baMenu/baMenu.html @@ -0,0 +1,11 @@ + diff --git a/src/app/theme/components/baMenu/baMenu.scss b/src/app/theme/components/baMenu/baMenu.scss new file mode 100644 index 00000000..c909ac72 --- /dev/null +++ b/src/app/theme/components/baMenu/baMenu.scss @@ -0,0 +1 @@ +@import '../../sass/conf/conf'; diff --git a/src/app/theme/components/baMenu/baMenu.service.ts b/src/app/theme/components/baMenu/baMenu.service.ts new file mode 100644 index 00000000..1c82fc87 --- /dev/null +++ b/src/app/theme/components/baMenu/baMenu.service.ts @@ -0,0 +1,101 @@ +import {Injectable} from '@angular/core'; +import {Router, UrlTree, RouterConfig} from '@angular/router'; + +@Injectable() +export class BaMenuService { + + constructor(private _router:Router) { + } + + public convertRoutesToMenus(routes:RouterConfig):any[] { + let items = this._convertArrayToItems(routes); + return this._skipEmpty(items); + } + + public selectMenuItem(menuItems:any[]):any[] { + let items = []; + menuItems.forEach((item) => { + this._selectItem(item); + + if (item.children && item.children.length > 0) { + item.children = this.selectMenuItem(item.children); + } + items.push(item); + }); + return items; + } + + protected _skipEmpty(items:any[]):any[] { + let menu = []; + items.forEach((item) => { + let menuItem; + if (item.skip) { + if (item.children && item.children.length > 0) { + menuItem = item.children; + } + } else { + menuItem = item; + } + + if (menuItem) { + menu.push(menuItem); + } + }); + + return [].concat.apply([], menu); + } + + protected _convertArrayToItems(routes:any[], parent?:any):any[] { + let items = []; + routes.forEach((route) => { + items.push(this._convertObjectToItem(route, parent)); + }); + return items; + } + + protected _convertObjectToItem(object, parent?:any):any { + let item:any = {}; + if (object.data && object.data.menu) { + // this is a menu object + item = object.data.menu; + item.route = object; + delete item.route.data.menu; + } else { + item.route = object; + item.skip = true; + } + + // we have to collect all pathes to correctly build the url then + item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : []; + item.route.paths.push(item.route.path); + + if (object.children && object.children.length > 0) { + item.children = this._convertArrayToItems(object.children, item); + } + + let prepared = this._prepareItem(item); + + // if current item is selected or expanded - then parent is expanded too + if ((prepared.selected || prepared.expanded) && parent) { + parent.expanded = true; + } + + return prepared; + } + + protected _prepareItem(object:any):any { + if (!object.disabled && !object.skip) { + + let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths)); + object.url = object.url ? object.url : '/#' + itemUrl; + return this._selectItem(object); + } + + return object; + } + + protected _selectItem(object:any):any { + object.selected = object.url == ('/#' + this._router.url); + return object; + } +} diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts new file mode 100644 index 00000000..9cfd1017 --- /dev/null +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts @@ -0,0 +1,33 @@ +import {Component, ElementRef, HostListener, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core'; + +@Component({ + selector: 'ba-menu-item', + encapsulation: ViewEncapsulation.None, + styles: [require('./baMenuItem.scss')], + template: require('./baMenuItem.html'), + providers: [], + directives: [BaMenuItem] +}) +export class BaMenuItem { + + @Input() menuItem:any; + @Input() child:boolean = false; + + @Output() itemHover = new EventEmitter(); + @Output() toggleSubMenu = new EventEmitter(); + + public outOfArea:number = -200; + + public ngOnInit():void { + } + + public onHoverItem($event):void { + this.itemHover.emit($event); + } + + public onToggleSubMenu($event, item):boolean { + $event.item = item; + this.toggleSubMenu.emit($event); + return false; + } +} diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html new file mode 100644 index 00000000..f4de6762 --- /dev/null +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html @@ -0,0 +1,17 @@ +
  • + + + + {{ menuItem.title }} + + + + {{ menuItem.title }} + + + +
      + +
    + +
    • diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss new file mode 100644 index 00000000..00bb0106 --- /dev/null +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss @@ -0,0 +1 @@ +@import '../../../../sass/conf/conf'; diff --git a/src/app/theme/components/baMenu/components/baMenuItem/index.ts b/src/app/theme/components/baMenu/components/baMenuItem/index.ts new file mode 100644 index 00000000..5ee5509a --- /dev/null +++ b/src/app/theme/components/baMenu/components/baMenuItem/index.ts @@ -0,0 +1 @@ +export * from './baMenuItem.component'; diff --git a/src/app/theme/components/baMenu/index.ts b/src/app/theme/components/baMenu/index.ts new file mode 100644 index 00000000..99f5ff1f --- /dev/null +++ b/src/app/theme/components/baMenu/index.ts @@ -0,0 +1 @@ +export * from './baMenu.component.ts'; diff --git a/src/app/theme/components/baSidebar/baSidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts index eb4b6805..c8825733 100644 --- a/src/app/theme/components/baSidebar/baSidebar.component.ts +++ b/src/app/theme/components/baSidebar/baSidebar.component.ts @@ -1,60 +1,42 @@ import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core'; -import {Router} from '@angular/router'; import {AppState} from '../../../app.state'; import {layoutSizes} from '../../../theme'; -import {BaSlimScroll} from '../../../theme/directives'; -import {BaSidebarService} from './baSidebar.service'; +import {BaMenu} from '../baMenu'; +import {routes} from '../../../../app/app.routes'; @Component({ selector: 'ba-sidebar', encapsulation: ViewEncapsulation.None, styles: [require('./baSidebar.scss')], template: require('./baSidebar.html'), - providers: [BaSidebarService], - directives: [BaSlimScroll] + providers: [], + directives: [BaMenu] }) export class BaSidebar { - public menuItems:Array; + // here we declare which routes we want to use as a menu in our sidebar + public routes = routes; + public menuHeight:number; public isMenuCollapsed:boolean = false; - - public showHoverElem:boolean; - public hoverElemHeight:number; - public hoverElemTop:number; - - public outOfArea:number = -200; - public isMenuShouldCollapsed:boolean = false; - protected _onRouteChange; - constructor(private _elementRef:ElementRef, - private _router:Router, - private _sidebarService:BaSidebarService, - private _state:AppState) { - this.menuItems = this._sidebarService.getMenuItems(); - this._onRouteChange = this._router.events.subscribe(() => { - this._selectMenuItem(); - }); + constructor(private _elementRef:ElementRef, private _state:AppState) { + this._state.subscribe('menu.isCollapsed', (isCollapsed) => { this.isMenuCollapsed = isCollapsed; }); } - public ngOnInit():void { if (this._shouldMenuCollapse()) { this.menuCollapse(); } } - public ngOnDestroy():void { - this._onRouteChange.unsubscribe(); - } - public ngAfterViewInit():void { - this.updateSidebarHeight(); + setTimeout(() => this.updateSidebarHeight()); } @HostListener('window:resize') @@ -82,45 +64,12 @@ export class BaSidebar { this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed); } - public hoverItem($event):void { - this.showHoverElem = true; - this.hoverElemHeight = $event.currentTarget.clientHeight; - // TODO: get rid of magic 66 constant - this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66; - } - public updateSidebarHeight():void { // TODO: get rid of magic 84 constant this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84; } - public toggleSubMenu($event, item):boolean { - var submenu = jQuery($event.currentTarget).next(); - - if (this.isMenuCollapsed) { - this.menuExpand(); - if (!item.expanded) { - item.expanded = true; - } - } else { - item.expanded = !item.expanded; - submenu.slideToggle(); - } - - return false; - } - private _shouldMenuCollapse():boolean { return window.innerWidth <= layoutSizes.resWidthCollapseSidebar; } - - private _selectMenuItem():void { - - let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems); - this._state.notifyDataChanged('menu.activeLink', currentMenu); - // hide menu after natigation on mobile devises - if (this._shouldMenuCollapse()) { - this.menuCollapse(); - } - } } diff --git a/src/app/theme/components/baSidebar/baSidebar.html b/src/app/theme/components/baSidebar/baSidebar.html index c8956c7e..62e9eab9 100644 --- a/src/app/theme/components/baSidebar/baSidebar.html +++ b/src/app/theme/components/baSidebar/baSidebar.html @@ -1,55 +1,6 @@ diff --git a/src/app/theme/components/baSidebar/baSidebar.scss b/src/app/theme/components/baSidebar/baSidebar.scss index b5de70a3..1f843eee 100644 --- a/src/app/theme/components/baSidebar/baSidebar.scss +++ b/src/app/theme/components/baSidebar/baSidebar.scss @@ -135,7 +135,7 @@ a.al-sidebar-list-link { &.expanded { display: block; } - > li { + > ba-menu-item > li { display: block; float: none; padding: 0; diff --git a/src/app/theme/components/baSidebar/baSidebar.service.ts b/src/app/theme/components/baSidebar/baSidebar.service.ts deleted file mode 100644 index 8b004cf6..00000000 --- a/src/app/theme/components/baSidebar/baSidebar.service.ts +++ /dev/null @@ -1,62 +0,0 @@ -import {Injectable} from '@angular/core'; -import {menuItems} from '../../../app.menu'; -import {Router, UrlTree} from "@angular/router"; - -@Injectable() -export class BaSidebarService { - - private _router:Router; - - public getMenuItems():Array { - return menuItems; - } - - public setRouter(router:Router):BaSidebarService { - this._router = router; - return this; - } - - public selectMenuItem(items:Array) { - let currentMenu; - - let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null); - - items.forEach((menu:any) => { - - this._selectItem([menu.path], menu); - assignCurrent(menu); - - if (menu.subMenu) { - menu.subMenu.forEach((subMenu) => { - this._selectItem([menu.path, subMenu.path], subMenu, menu); - assignCurrent(subMenu); - }); - } - }); - return currentMenu; - } - - private _selectItem(instructions, item, parentMenu = null) { - let route = this._generateRoute(instructions); - item.selected = !item.disabled && this._isCurrent(route); - if (parentMenu) { - parentMenu.expanded = parentMenu.expanded || item.selected; - } - } - - private _isCurrent(route:UrlTree):boolean { - if (route) { - return this._router.url === this._router.serializeUrl(route); - } - return false; - } - - private _generateRoute(instructions:any[]):UrlTree { - instructions = instructions.filter(item => !!item); - - if (instructions.length != 0) { - return this._router.createUrlTree(instructions); - } - return null; - } -} diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts index 98c1deea..a96111fc 100644 --- a/src/app/theme/components/index.ts +++ b/src/app/theme/components/index.ts @@ -1,6 +1,7 @@ export * from './baPageTop'; export * from './baMsgCenter'; export * from './baSidebar'; +export * from './baMenu'; export * from './baContentTop'; export * from './baCard'; export * from './baAmChart'; From a74c056065d7304d3f54440c545556b49173bfbe Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Mon, 11 Jul 2016 11:09:35 +0300 Subject: [PATCH 6/8] fix(sidebar): fix selection issue --- src/app/theme/components/baMenu/baMenu.component.ts | 1 + .../baMenu/components/baMenuItem/baMenuItem.component.ts | 7 +------ .../baMenu/components/baMenuItem/baMenuItem.html | 8 ++++++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/theme/components/baMenu/baMenu.component.ts b/src/app/theme/components/baMenu/baMenu.component.ts index c0941e03..c20f2756 100644 --- a/src/app/theme/components/baMenu/baMenu.component.ts +++ b/src/app/theme/components/baMenu/baMenu.component.ts @@ -27,6 +27,7 @@ export class BaMenu { public hoverElemHeight:number; public hoverElemTop:number; protected _onRouteChange:Subscription; + public outOfArea:number = -200; constructor(private _router:Router, private _service:BaMenuService) { diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts index 9cfd1017..46fc3a7f 100644 --- a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, HostListener, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core'; +import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core'; @Component({ selector: 'ba-menu-item', @@ -16,11 +16,6 @@ export class BaMenuItem { @Output() itemHover = new EventEmitter(); @Output() toggleSubMenu = new EventEmitter(); - public outOfArea:number = -200; - - public ngOnInit():void { - } - public onHoverItem($event):void { this.itemHover.emit($event); } diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html index f4de6762..2ecbffe7 100644 --- a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html @@ -1,7 +1,7 @@
  • - + {{ menuItem.title }} @@ -11,7 +11,11 @@
      - +
    • From ded87ce5270b98f3724abfeac5f69252761162da Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Mon, 11 Jul 2016 12:23:07 +0300 Subject: [PATCH 7/8] feat(sidebar): custom links and 3rd level --- src/app/app.menu.ts | 175 ------------------ src/app/app.routes.ts | 4 +- src/app/pages/pages.routes.ts | 55 ++++++ .../theme/components/baMenu/baMenu.service.ts | 6 +- .../components/baMenuItem/baMenuItem.html | 6 +- 5 files changed, 64 insertions(+), 182 deletions(-) delete mode 100644 src/app/app.menu.ts diff --git a/src/app/app.menu.ts b/src/app/app.menu.ts deleted file mode 100644 index 166ae2e7..00000000 --- a/src/app/app.menu.ts +++ /dev/null @@ -1,175 +0,0 @@ -export const menuItems = [ - { - title: 'Dashboard', - path: '/pages/dashboard', - icon: 'ion-android-home', - selected: false, - expanded: false, - order: 0 - }, - { - title: 'Editors', - path: '/pages/editors', - icon: 'ion-edit', - selected: false, - expanded: false, - order: 100, - subMenu: [ - { - title: 'CKEditor', - path: '/ckeditor', - } - ] - }, - { - title: 'Charts', - path: '/pages/charts', - icon: 'ion-stats-bars', - selected: false, - expanded: false, - order: 200, - subMenu: [ - { - title: 'Chartist.Js', - path: '/chartist-js', - }, - ] - }, - { - title: 'UI Features', - path: '/pages/ui', - icon: 'ion-android-laptop', - selected: false, - expanded: false, - order: 300, - subMenu: [ - { - title: 'Typography', - path: '/typography', - }, - { - title: 'Buttons', - path: '/buttons', - }, - { - title: 'Icons', - path: '/icons', - }, - { - title: 'Grid', - path: '/grid', - }, - ] - }, - { - title: 'Form Elements', - path: '/pages/forms', - icon: 'ion-compose', - selected: false, - expanded: false, - order: 400, - subMenu: [ - { - title: 'Form Inputs', - path: '/inputs', - }, - { - title: 'Form Layouts', - path: '/layouts', - }, - ] - }, - { - title: 'Tables', - path: '/pages/tables', - icon: 'ion-grid', - selected: false, - expanded: false, - order: 500, - subMenu: [ - { - title: 'Basic Tables', - path: '/basictables', - } - ] - }, - { - title: 'Maps', - path: '/pages/maps', - icon: 'ion-ios-location-outline', - selected: false, - expanded: false, - order: 600, - subMenu: [ - { - title: 'Google Maps', - path: '/googlemaps', - }, - { - title: 'Leaflet Maps', - path: '/leafletmaps', - }, - { - title: 'Bubble Maps', - path: '/bubblemaps', - }, - { - title: 'Line Maps', - path: '/linemaps', - } - ] - }, - { - title: 'Pages', - icon: 'ion-document', - selected: false, - expanded: false, - order: 650, - subMenu: [ - { - title: 'Login', - path: '/login', - }, - { - title: 'Register', - path: '/register', - } - ] - }, - { - title: 'Menu Level 1', - icon: 'ion-ios-more', - selected: false, - expanded: false, - order: 700, - subMenu: [ - { - title: 'Menu Level 1.1', - url: '#', - disabled: true, - selected: false, - expanded: false - }, - { - title: 'Menu Level 1.2', - url: '#', - subMenu: [{ - title: 'Menu Level 1.2.1', - url: '#', - disabled: true, - selected: false, - expanded: false - }] - } - ] - }, - { - title: 'External Link', - url: 'http://akveo.com', - icon: 'ion-android-exit', - selected: false, - expanded: false, - order: 800, - target: '_blank' - } -]; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index cdcb73cf..af54c8e4 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,9 +1,9 @@ -import { provideRouter, RouterConfig } from '@angular/router'; +import {provideRouter, RouterConfig} from '@angular/router'; import {LoginRoutes} from "./pages/login/login.routes"; import {PagesRoutes} from "./pages/pages.routes"; import {RegisterRoutes} from "./pages/register/register.routes"; -export const routes: RouterConfig = [ +export const routes:RouterConfig = [ ...LoginRoutes, ...RegisterRoutes, ...PagesRoutes, diff --git a/src/app/pages/pages.routes.ts b/src/app/pages/pages.routes.ts index 512a2530..3cc32d61 100644 --- a/src/app/pages/pages.routes.ts +++ b/src/app/pages/pages.routes.ts @@ -247,6 +247,61 @@ export const PagesRoutes:RouterConfig = [ } ] }, + { + path: '', + data: { + menu: { + title: 'Menu Level 1', + icon: 'ion-ios-more', + selected: false, + expanded: false, + order: 700, + } + }, + children: [ + { + path: '', + data: { + menu: { + title: 'Menu Level 1.1', + url: '#' + } + } + }, + { + path: '', + data: { + menu: { + title: 'Menu Level 1.2', + url: '#' + } + }, + children: [ + { + path: '', + data: { + menu: { + title: 'Menu Level 1.2.1', + url: '#' + } + } + } + ] + } + ] + }, + { + path: '', + data: { + menu: { + title: 'External Link', + url: 'http://akveo.com', + icon: 'ion-android-exit', + order: 800, + target: '_blank' + } + } + } ] } ]; diff --git a/src/app/theme/components/baMenu/baMenu.service.ts b/src/app/theme/components/baMenu/baMenu.service.ts index 1c82fc87..71ca44bb 100644 --- a/src/app/theme/components/baMenu/baMenu.service.ts +++ b/src/app/theme/components/baMenu/baMenu.service.ts @@ -65,7 +65,7 @@ export class BaMenuService { item.skip = true; } - // we have to collect all pathes to correctly build the url then + // we have to collect all paths to correctly build the url then item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : []; item.route.paths.push(item.route.path); @@ -84,10 +84,12 @@ export class BaMenuService { } protected _prepareItem(object:any):any { - if (!object.disabled && !object.skip) { + if (!object.skip) { let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths)); object.url = object.url ? object.url : '/#' + itemUrl; + + object.target = object.target || ''; return this._selectItem(object); } diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html index 2ecbffe7..7f009ab3 100644 --- a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html +++ b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html @@ -1,20 +1,20 @@
  • - + {{ menuItem.title }} {{ menuItem.title }} - +
    From cac851847df7b34edd6e87924443095b522afdb3 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Mon, 11 Jul 2016 15:58:14 +0300 Subject: [PATCH 8/8] fix(router): remove router-depricated references --- src/app/pages/editors/editors.component.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/app/pages/editors/editors.component.ts b/src/app/pages/editors/editors.component.ts index 9ff4ab9a..53eeb282 100644 --- a/src/app/pages/editors/editors.component.ts +++ b/src/app/pages/editors/editors.component.ts @@ -1,21 +1,9 @@ import {Component} from '@angular/core'; -import {RouteConfig} from '@angular/router-deprecated'; - -import {Ckeditor} from './components/ckeditor'; @Component({ selector: 'editors', template: `` }) - -@RouteConfig([ - { - name: 'Ckeditor', - component: Ckeditor, - path: '/ckeditor', - useAsDefault: true - } -]) export class Editors { constructor() { }