Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): replace @akveo with @nebular

Browse source
This commit is contained in:
Alexander Zhukov 2017-08-01 17:42:21 +03:00
parent b772882cd6
commit 210c6f2355
129 changed files with 1010 additions and 1010 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1 +1 @@
# nga-demo # ngx-admin

2
package-lock.json generated
View file

@ -1,5 +1,5 @@
{ {
"name": "nga-demo", "name": "ngx-admin",
"version": "2.0.0-alpha.0", "version": "2.0.0-alpha.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,

2
package.json
View file

@ -1,5 +1,5 @@
{ {
"name": "nga-demo", "name": "ngx-admin",
"version": "2.0.0-alpha.0", "version": "2.0.0-alpha.0",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {

4
src/app/@core/core.module.ts
View file

@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
import { throwIfAlreadyLoaded } from './module-import-guard'; import { throwIfAlreadyLoaded } from './module-import-guard';
import { DataModule } from './data/data.module'; import { DataModule } from './data/data.module';
const NGA_CORE_PROVIDERS = [ const NB_CORE_PROVIDERS = [
...DataModule.forRoot().providers, ...DataModule.forRoot().providers,
]; ];
@ -23,7 +23,7 @@ export class CoreModule {
return <ModuleWithProviders>{ return <ModuleWithProviders>{
ngModule: CoreModule, ngModule: CoreModule,
providers: [ providers: [
...NGA_CORE_PROVIDERS, ...NB_CORE_PROVIDERS,
], ],
}; };
} }

6
src/app/@theme/components/footer/footer.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -11,11 +11,11 @@
a { a {
padding: 0.4rem; padding: 0.4rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
transition: color ease-out 0.1s; transition: color ease-out 0.1s;
&:hover { &:hover {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
} }
} }

12
src/app/@theme/components/header/header.component.scss
View file

@ -1,6 +1,6 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-component() { @include nb-install-component() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@ -19,18 +19,18 @@
align-items: center; align-items: center;
.navigation { .navigation {
padding-right: nga-theme(padding); padding-right: nb-theme(padding);
font-size: 2.5rem; font-size: 2.5rem;
} }
.logo { .logo {
padding: 0 nga-theme(padding); padding: 0 nb-theme(padding);
font-size: 1.75rem; font-size: 1.75rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
border-left: 1px solid nga-theme(separator); border-left: 1px solid nb-theme(separator);
span { span {
font-weight: nga-theme(font-weight-normal); font-weight: nb-theme(font-weight-normal);
} }
} }

32
src/app/@theme/components/header/header.component.ts
View file

@ -1,7 +1,7 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { NgaMenuService, NgaSidebarService } from '@akveo/nga-theme'; import { NbMenuService, NbSidebarService } from '@nebular/theme';
import { NgaThemeService } from '@akveo/nga-theme/services/theme.service'; import { NbThemeService } from '@nebular/theme';
import { UserService } from '../../../@core/data/users.service'; import { UserService } from '../../../@core/data/users.service';
@Component({ @Component({
@ -18,21 +18,21 @@ import { UserService } from '../../../@core/data/users.service';
</div> </div>
</div> </div>
<nga-actions <nb-actions
size="medium" size="medium"
class="header-container" class="header-container"
[class.right]="position === 'normal'" [class.right]="position === 'normal'"
[class.left]="position === 'inverse'"> [class.left]="position === 'inverse'">
<nga-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nga-action> <nb-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nb-action>
<nga-action> <nb-action>
<nga-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nga-user> <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
</nga-action> </nb-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action> <nb-action disabled icon="ion-ios-bell-outline"></nb-action>
<nga-action icon="ion-ios-email-outline"></nga-action> <nb-action icon="ion-ios-email-outline"></nb-action>
<nga-action> <nb-action>
<nga-search type="rotate-layout"></nga-search> <nb-search type="rotate-layout"></nb-search>
</nga-action> </nb-action>
</nga-actions> </nb-actions>
`, `,
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
@ -51,9 +51,9 @@ export class HeaderComponent implements OnInit {
}, },
]; ];
constructor(private sidebarService: NgaSidebarService, constructor(private sidebarService: NbSidebarService,
private menuService: NgaMenuService, private menuService: NbMenuService,
private themeService: NgaThemeService, private themeService: NbThemeService,
private userService: UserService) { private userService: UserService) {
} }

6
src/app/@theme/components/theme-settings/theme-settings.component.scss
View file

@ -1,6 +1,6 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-component() { @include nb-install-component() {
.settings-row { .settings-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -11,10 +11,10 @@
a { a {
font-size: 2rem; font-size: 2rem;
margin-right: 1rem; margin-right: 1rem;
color: nga-theme(color-white); color: nb-theme(color-white);
&.selected { &.selected {
color: nga-theme(color-success); color: nb-theme(color-success);
} }
} }
} }

12
src/app/@theme/layouts/one-column/one-column.layout.scss
View file

@ -1,18 +1,18 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-root-component() { @include nb-install-root-component() {
nga-sidebar.menu-sidebar { nb-sidebar.menu-sidebar {
margin-top: nga-theme(sidebar-header-gap); margin-top: nb-theme(sidebar-header-gap);
/deep/ .main-container { /deep/ .main-container {
height: height:
calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important; calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
} }
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
text-align: center; text-align: center;
} }
@ -40,7 +40,7 @@
&.compacted { &.compacted {
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }

26
src/app/@theme/layouts/one-column/one-column.layout.ts
View file

@ -5,28 +5,28 @@ import { Component } from '@angular/core';
selector: 'ngx-one-column-layout', selector: 'ngx-one-column-layout',
styleUrls: ['./one-column.layout.scss'], styleUrls: ['./one-column.layout.scss'],
template: ` template: `
<nga-layout> <nb-layout>
<nga-layout-header fixed> <nb-layout-header fixed>
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nga-layout-header> </nb-layout-header>
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive> <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
<nga-sidebar-header> <nb-sidebar-header>
<button class="btn btn-hero-success main-btn"> <button class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span> <i class="ion ion-social-github"></i> <span>Support Us</span>
</button> </button>
</nga-sidebar-header> </nb-sidebar-header>
<ng-content select="nga-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nga-sidebar> </nb-sidebar>
<nga-layout-column> <nb-layout-column>
<ng-content select="router-outlet"></ng-content> <ng-content select="router-outlet"></ng-content>
</nga-layout-column> </nb-layout-column>
<nga-layout-footer fixed> <nb-layout-footer fixed>
<ngx-footer></ngx-footer> <ngx-footer></ngx-footer>
</nga-layout-footer> </nb-layout-footer>
</nga-layout> </nb-layout>
`, `,
}) })
export class OneColumnLayoutComponent { export class OneColumnLayoutComponent {

16
src/app/@theme/layouts/sample/sample.layout.scss
View file

@ -1,12 +1,12 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-root-component() { @include nb-install-root-component() {
nga-layout-column.small { nb-layout-column.small {
flex: 0.15 !important; flex: 0.15 !important;
} }
nga-sidebar.settings-sidebar { nb-sidebar.settings-sidebar {
width: 7rem; width: 7rem;
/deep/ .main-container { /deep/ .main-container {
width: 7rem; width: 7rem;
@ -21,17 +21,17 @@
} }
} }
nga-sidebar.menu-sidebar { nb-sidebar.menu-sidebar {
margin-top: nga-theme(sidebar-header-gap); margin-top: nb-theme(sidebar-header-gap);
/deep/ .main-container { /deep/ .main-container {
height: height:
calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important; calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
} }
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
text-align: center; text-align: center;
} }
@ -59,7 +59,7 @@
&.compacted { &.compacted {
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }

46
src/app/@theme/layouts/sample/sample.layout.ts
View file

@ -1,6 +1,6 @@
import { Component, Input, OnDestroy } from '@angular/core'; import { Component, Input, OnDestroy } from '@angular/core';
import { List } from 'immutable'; import { List } from 'immutable';
import { NgaMenuItem } from '@akveo/nga-theme'; import { NbMenuItem } from '@nebular/theme';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { StateService } from '../../../@core/data/state.service'; import { StateService } from '../../../@core/data/state.service';
@ -10,52 +10,52 @@ import { StateService } from '../../../@core/data/state.service';
selector: 'ngx-sample-layout', selector: 'ngx-sample-layout',
styleUrls: ['./sample.layout.scss'], styleUrls: ['./sample.layout.scss'],
template: ` template: `
<nga-layout [center]="layout.id === 'center-column'" windowMode> <nb-layout [center]="layout.id === 'center-column'" windowMode>
<nga-layout-header fixed> <nb-layout-header fixed>
<ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header> <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
</nga-layout-header> </nb-layout-header>
<nga-sidebar class="menu-sidebar" <nb-sidebar class="menu-sidebar"
tag="menu-sidebar" tag="menu-sidebar"
responsive responsive
[right]="sidebar.id === 'right'"> [right]="sidebar.id === 'right'">
<nga-sidebar-header> <nb-sidebar-header>
<button class="btn btn-hero-success main-btn"> <button class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span> <i class="ion ion-social-github"></i> <span>Support Us</span>
</button> </button>
</nga-sidebar-header> </nb-sidebar-header>
<ng-content select="nga-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nga-sidebar> </nb-sidebar>
<nga-layout-column> <nb-layout-column>
<ng-content select="router-outlet"></ng-content> <ng-content select="router-outlet"></ng-content>
</nga-layout-column> </nb-layout-column>
<nga-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'"> <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
<nga-menu [items]="subMenu"></nga-menu> <nb-menu [items]="subMenu"></nb-menu>
</nga-layout-column> </nb-layout-column>
<nga-layout-column right class="small" *ngIf="layout.id === 'three-column'"> <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
<nga-menu [items]="subMenu"></nga-menu> <nb-menu [items]="subMenu"></nb-menu>
</nga-layout-column> </nb-layout-column>
<nga-layout-footer fixed> <nb-layout-footer fixed>
<ngx-footer></ngx-footer> <ngx-footer></ngx-footer>
</nga-layout-footer> </nb-layout-footer>
<nga-sidebar class="settings-sidebar" <nb-sidebar class="settings-sidebar"
tag="settings-sidebar" tag="settings-sidebar"
state="collapsed" state="collapsed"
fixed fixed
[right]="sidebar.id !== 'right'"> [right]="sidebar.id !== 'right'">
<ngx-theme-settings></ngx-theme-settings> <ngx-theme-settings></ngx-theme-settings>
</nga-sidebar> </nb-sidebar>
</nga-layout> </nb-layout>
`, `,
}) })
export class SampleLayoutComponent implements OnDestroy { export class SampleLayoutComponent implements OnDestroy {
subMenu: List<NgaMenuItem> = List( subMenu: List<NbMenuItem> = List(
[ [
{ {
title: 'PAGE LEVEL MENU', title: 'PAGE LEVEL MENU',

14
src/app/@theme/layouts/three-columns/three-columns.layout.scss
View file

@ -1,22 +1,22 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-root-component() { @include nb-install-root-component() {
nga-layout-column.small { nb-layout-column.small {
flex: 0.15 !important; flex: 0.15 !important;
} }
nga-sidebar.menu-sidebar { nb-sidebar.menu-sidebar {
margin-top: nga-theme(sidebar-header-gap); margin-top: nb-theme(sidebar-header-gap);
/deep/ .main-container { /deep/ .main-container {
height: height:
calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important; calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
} }
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
text-align: center; text-align: center;
} }
@ -44,7 +44,7 @@
&.compacted { &.compacted {
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }

34
src/app/@theme/layouts/three-columns/three-columns.layout.ts
View file

@ -5,34 +5,34 @@ import { Component } from '@angular/core';
selector: 'ngx-three-columns-layout', selector: 'ngx-three-columns-layout',
styleUrls: ['./three-columns.layout.scss'], styleUrls: ['./three-columns.layout.scss'],
template: ` template: `
<nga-layout> <nb-layout>
<nga-layout-header fixed> <nb-layout-header fixed>
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nga-layout-header> </nb-layout-header>
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive > <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
<nga-sidebar-header> <nb-sidebar-header>
<button class="btn btn-hero-success main-btn"> <button class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span> <i class="ion ion-social-github"></i> <span>Support Us</span>
</button> </button>
</nga-sidebar-header> </nb-sidebar-header>
<ng-content select="nga-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nga-sidebar> </nb-sidebar>
<nga-layout-column class="small"> <nb-layout-column class="small">
</nga-layout-column> </nb-layout-column>
<nga-layout-column right> <nb-layout-column right>
<ng-content select="router-outlet"></ng-content> <ng-content select="router-outlet"></ng-content>
</nga-layout-column> </nb-layout-column>
<nga-layout-column class="small"> <nb-layout-column class="small">
</nga-layout-column> </nb-layout-column>
<nga-layout-footer fixed> <nb-layout-footer fixed>
<ngx-footer></ngx-footer> <ngx-footer></ngx-footer>
</nga-layout-footer> </nb-layout-footer>
</nga-layout> </nb-layout>
`, `,
}) })
export class ThreeColumnsLayoutComponent { export class ThreeColumnsLayoutComponent {

14
src/app/@theme/layouts/two-columns/two-columns.layout.scss
View file

@ -1,22 +1,22 @@
@import '../../styles/variables'; @import '../../styles/variables';
@include nga-install-root-component() { @include nb-install-root-component() {
nga-layout-column.small { nb-layout-column.small {
flex: 0.15 !important; flex: 0.15 !important;
} }
nga-sidebar.menu-sidebar { nb-sidebar.menu-sidebar {
margin-top: nga-theme(sidebar-header-gap); margin-top: nb-theme(sidebar-header-gap);
/deep/ .main-container { /deep/ .main-container {
height: height:
calc(#{nga-theme(sidebar-height)} - #{nga-theme(header-height)} - #{nga-theme(sidebar-header-gap)}) !important; calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
border-top-right-radius: 0.75rem; border-top-right-radius: 0.75rem;
} }
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
text-align: center; text-align: center;
} }
@ -44,7 +44,7 @@
&.compacted { &.compacted {
/deep/ nga-sidebar-header { /deep/ nb-sidebar-header {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }

30
src/app/@theme/layouts/two-columns/two-columns.layout.ts
View file

@ -5,32 +5,32 @@ import { Component } from '@angular/core';
selector: 'ngx-two-columns-layout', selector: 'ngx-two-columns-layout',
styleUrls: ['./two-columns.layout.scss'], styleUrls: ['./two-columns.layout.scss'],
template: ` template: `
<nga-layout> <nb-layout>
<nga-layout-header fixed> <nb-layout-header fixed>
<ngx-header></ngx-header> <ngx-header></ngx-header>
</nga-layout-header> </nb-layout-header>
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive > <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
<nga-sidebar-header> <nb-sidebar-header>
<button class="btn btn-hero-success main-btn"> <button class="btn btn-hero-success main-btn">
<i class="ion ion-social-github"></i> <span>Support Us</span> <i class="ion ion-social-github"></i> <span>Support Us</span>
</button> </button>
</nga-sidebar-header> </nb-sidebar-header>
<ng-content select="nga-menu"></ng-content> <ng-content select="nb-menu"></ng-content>
</nga-sidebar> </nb-sidebar>
<nga-layout-column class="small"> <nb-layout-column class="small">
</nga-layout-column> </nb-layout-column>
<nga-layout-column right> <nb-layout-column right>
<ng-content select="router-outlet"></ng-content> <ng-content select="router-outlet"></ng-content>
</nga-layout-column> </nb-layout-column>
<nga-layout-footer fixed> <nb-layout-footer fixed>
<ngx-footer></ngx-footer> <ngx-footer></ngx-footer>
</nga-layout-footer> </nb-layout-footer>
</nga-layout> </nb-layout>
`, `,
}) })
export class TwoColumnsLayoutComponent { export class TwoColumnsLayoutComponent {

2
src/app/@theme/styles/global.scss
View file

@ -2,7 +2,7 @@
// any global, non-component styles go here // any global, non-component styles go here
} }
.nga-theme-cosmic { .nb-theme-cosmic {
} }

10
src/app/@theme/styles/styles.scss
View file

@ -2,15 +2,15 @@
@import 'variables'; @import 'variables';
// framework component themes (styles tied to theme variables) // framework component themes (styles tied to theme variables)
@import '~@akveo/nga-theme/styles/globals'; @import '~@nebular/theme/styles/globals';
@import '~@akveo/nga-auth/styles/all'; @import '~@nebular/auth/styles/all';
// custom global styles // custom global styles
@import 'global'; @import 'global';
// install the framework and custom global styles // install the framework and custom global styles
@include nga-install() { @include nb-install() {
@include nga-theme-global(); @include nb-theme-global();
@include nga-auth-global(); @include nb-auth-global();
@include ngx-global-theme(); @include ngx-global-theme();
}; };

16
src/app/@theme/styles/variables.scss
View file

@ -1,26 +1,26 @@
// nga theming framework // @nebular theming framework
@import '~@akveo/nga-theme/styles/theming'; @import '~@nebular/theme/styles/theming';
// nga our of the box themes // @nebular our of the box themes
@import '~@akveo/nga-theme/styles/themes'; @import '~@nebular/theme/styles/themes';
// which themes you what to enable (empty to enable all - not recommended) // which themes you what to enable (empty to enable all - not recommended)
$nga-enabled-themes: (default, light, cosmic); $nb-enabled-themes: (default, light, cosmic);
$nga-themes: nga-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial, sidebar-header-height: initial,
layout-content-width: 1400px, layout-content-width: 1400px,
), default, default); ), default, default);
$nga-themes: nga-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial, sidebar-header-height: initial,
layout-content-width: 1400px, layout-content-width: 1400px,
), cosmic, cosmic); ), cosmic, cosmic);
$nga-themes: nga-register-theme(( $nb-themes: nb-register-theme((
// app wise variables for each theme // app wise variables for each theme
sidebar-header-gap: 2rem, sidebar-header-gap: 2rem,
sidebar-header-height: initial, sidebar-header-height: initial,

58
src/app/@theme/theme.module.ts
View file

@ -3,17 +3,17 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { import {
NgaActionsModule, NbActionsModule,
NgaCardModule, NbCardModule,
NgaLayoutModule, NbLayoutModule,
NgaMenuModule, NbMenuModule,
NgaRouteTabsetModule, NbRouteTabsetModule,
NgaSearchModule, NbSearchModule,
NgaSidebarModule, NbSidebarModule,
NgaTabsetModule, NbTabsetModule,
NgaThemeModule, NbThemeModule,
NgaUserModule, NbUserModule,
} from '@akveo/nga-theme'; } from '@nebular/theme';
import { import {
FooterComponent, FooterComponent,
@ -34,16 +34,16 @@ import { COSMIC_THEME } from './styles/theme.cosmic';
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule]; const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
const NGA_MODULES = [ const NB_MODULES = [
NgaCardModule, NbCardModule,
NgaLayoutModule, NbLayoutModule,
NgaTabsetModule, NbTabsetModule,
NgaRouteTabsetModule, NbRouteTabsetModule,
NgaMenuModule, NbMenuModule,
NgaUserModule, NbUserModule,
NgaActionsModule, NbActionsModule,
NgaSearchModule, NbSearchModule,
NgaSidebarModule, NbSidebarModule,
]; ];
const COMPONENTS = [ const COMPONENTS = [
@ -60,28 +60,28 @@ const COMPONENTS = [
const PIPES = [CapitalizePipe, PluralPipe, RoundPipe]; const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
const NGA_THEME_PROVIDERS = [ const NB_THEME_PROVIDERS = [
...NgaThemeModule.forRoot( ...NbThemeModule.forRoot(
{ {
name: 'default', name: 'default',
}, },
[DEFAULT_THEME, COSMIC_THEME], [DEFAULT_THEME, COSMIC_THEME],
).providers, ).providers,
...NgaSidebarModule.forRoot().providers, ...NbSidebarModule.forRoot().providers,
...NgaSidebarModule.forRoot().providers, ...NbSidebarModule.forRoot().providers,
...NgaMenuModule.forRoot().providers, ...NbMenuModule.forRoot().providers,
]; ];
@NgModule({ @NgModule({
imports: [...BASE_MODULES, ...NGA_MODULES], imports: [...BASE_MODULES, ...NB_MODULES],
exports: [...BASE_MODULES, ...NGA_MODULES, ...COMPONENTS, ...PIPES], exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
declarations: [...COMPONENTS, ...PIPES], declarations: [...COMPONENTS, ...PIPES],
}) })
export class ThemeModule { export class ThemeModule {
static forRoot(): ModuleWithProviders { static forRoot(): ModuleWithProviders {
return <ModuleWithProviders>{ return <ModuleWithProviders>{
ngModule: ThemeModule, ngModule: ThemeModule,
providers: [...NGA_THEME_PROVIDERS], providers: [...NB_THEME_PROVIDERS],
}; };
} }
} }

4
src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-bar-horizontal', selector: 'ngx-chartjs-bar-horizontal',
@ -26,7 +26,7 @@ export class ChartjsBarHorizontalComponent {
chartType: string = 'horizontalBar'; chartType: string = 'horizontalBar';
chartOptions: any; chartOptions: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

4
src/app/pages/charts/chartjs/chartjs-bar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-bar', selector: 'ngx-chartjs-bar',
@ -29,7 +29,7 @@ export class ChartjsBarComponent {
]; ];
chartOptions: any; chartOptions: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

4
src/app/pages/charts/chartjs/chartjs-line.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-line', selector: 'ngx-chartjs-line',
@ -30,7 +30,7 @@ export class ChartjsLineComponent {
chatyType: string = 'line'; chatyType: string = 'line';
chartOptions: any; chartOptions: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

4
src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-multiple-xaxis', selector: 'ngx-chartjs-multiple-xaxis',
@ -94,7 +94,7 @@ export class ChartjsMultipleXaxisComponent {
]; ];
chartOptions: any; chartOptions: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

4
src/app/pages/charts/chartjs/chartjs-pie.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-pie', selector: 'ngx-chartjs-pie',
@ -24,7 +24,7 @@ export class ChartjsPieComponent {
chartData: number[] = [300, 500, 100]; chartData: number[] = [300, 500, 100];
chartOptions: any; chartOptions: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

4
src/app/pages/charts/chartjs/chartjs-radar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-chartjs-radar', selector: 'ngx-chartjs-radar',
@ -24,7 +24,7 @@ export class ChartjsRadarComponent {
chartOptions: any; chartOptions: any;
chartData: any[]; chartData: any[];
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const chartjs: any = config.variables.chartjs; const chartjs: any = config.variables.chartjs;

60
src/app/pages/charts/chartjs/chartjs.component.html
View file

@ -1,50 +1,50 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Pie</nga-card-header> <nb-card-header>Pie</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-pie></ngx-chartjs-pie> <ngx-chartjs-pie></ngx-chartjs-pie>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Bar</nga-card-header> <nb-card-header>Bar</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-bar></ngx-chartjs-bar> <ngx-chartjs-bar></ngx-chartjs-bar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Line</nga-card-header> <nb-card-header>Line</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-line></ngx-chartjs-line> <ngx-chartjs-line></ngx-chartjs-line>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Multiple x-axis</nga-card-header> <nb-card-header>Multiple x-axis</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis> <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Bar Horizontal</nga-card-header> <nb-card-header>Bar Horizontal</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal> <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Radar</nga-card-header> <nb-card-header>Radar</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-chartjs-radar></ngx-chartjs-radar> <ngx-chartjs-radar></ngx-chartjs-radar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

2
src/app/pages/charts/chartjs/chartjs.component.scss
View file

@ -1,4 +1,4 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
} }

4
src/app/pages/charts/d3/d3-advanced-pie.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-advanced-pie', selector: 'ngx-d3-advanced-pie',
@ -29,7 +29,7 @@ export class D3AdvancedPieComponent {
view: any[] = [700, 400]; view: any[] = [700, 400];
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).advancedPie, domain: (<any>config.variables.d3).advancedPie,

4
src/app/pages/charts/d3/d3-area-stack.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-area-stack', selector: 'ngx-d3-area-stack',
@ -74,7 +74,7 @@ export class D3AreaStackComponent {
yAxisLabel = 'Population'; yAxisLabel = 'Population';
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).areaStack, domain: (<any>config.variables.d3).areaStack,

4
src/app/pages/charts/d3/d3-bar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-bar', selector: 'ngx-d3-bar',
@ -44,7 +44,7 @@ export class D3BarComponent {
yAxisLabel = 'Population'; yAxisLabel = 'Population';
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).bar, domain: (<any>config.variables.d3).bar,

4
src/app/pages/charts/d3/d3-line.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-line', selector: 'ngx-d3-line',
@ -71,7 +71,7 @@ export class D3LineComponent {
yAxisLabel = 'Population'; yAxisLabel = 'Population';
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).line, domain: (<any>config.variables.d3).line,

4
src/app/pages/charts/d3/d3-pie.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-pie', selector: 'ngx-d3-pie',
@ -39,7 +39,7 @@ export class D3PieComponent {
yAxisLabel = 'Population'; yAxisLabel = 'Population';
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).pie, domain: (<any>config.variables.d3).pie,

4
src/app/pages/charts/d3/d3-polar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-d3-polar', selector: 'ngx-d3-polar',
@ -84,7 +84,7 @@ export class D3PolarComponent {
yAxisLabel = 'Population'; yAxisLabel = 'Population';
colorScheme: any; colorScheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colorScheme = { this.colorScheme = {
domain: (<any>config.variables.d3).polar, domain: (<any>config.variables.d3).polar,

60
src/app/pages/charts/d3/d3.component.html
View file

@ -1,50 +1,50 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Pie</nga-card-header> <nb-card-header>Pie</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-pie></ngx-d3-pie> <ngx-d3-pie></ngx-d3-pie>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Bar</nga-card-header> <nb-card-header>Bar</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-bar></ngx-d3-bar> <ngx-d3-bar></ngx-d3-bar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Line</nga-card-header> <nb-card-header>Line</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-line></ngx-d3-line> <ngx-d3-line></ngx-d3-line>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Advanced Pie</nga-card-header> <nb-card-header>Advanced Pie</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-advanced-pie></ngx-d3-advanced-pie> <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Area Chart</nga-card-header> <nb-card-header>Area Chart</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-area-stack></ngx-d3-area-stack> <ngx-d3-area-stack></ngx-d3-area-stack>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Polar Chart</nga-card-header> <nb-card-header>Polar Chart</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-d3-polar></ngx-d3-polar> <ngx-d3-polar></ngx-d3-polar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

2
src/app/pages/charts/d3/d3.component.scss
View file

@ -1,4 +1,4 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
} }

4
src/app/pages/charts/echarts/echarts-area-stack.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-area-stack', selector: 'ngx-echarts-area-stack',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsAreaStackComponent { export class EchartsAreaStackComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

4
src/app/pages/charts/echarts/echarts-bar-animation.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-bar-animation', selector: 'ngx-echarts-bar-animation',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsBarAnimationComponent { export class EchartsBarAnimationComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const xAxisData = []; const xAxisData = [];
const data1 = []; const data1 = [];

4
src/app/pages/charts/echarts/echarts-bar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-bar', selector: 'ngx-echarts-bar',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsBarComponent { export class EchartsBarComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

4
src/app/pages/charts/echarts/echarts-line.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-line', selector: 'ngx-echarts-line',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsLineComponent { export class EchartsLineComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

4
src/app/pages/charts/echarts/echarts-multiple-xaxis.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-multiple-xaxis', selector: 'ngx-echarts-multiple-xaxis',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsMultipleXaxisComponent { export class EchartsMultipleXaxisComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

4
src/app/pages/charts/echarts/echarts-pie.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-pie', selector: 'ngx-echarts-pie',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsPieComponent { export class EchartsPieComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

4
src/app/pages/charts/echarts/echarts-radar.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-echarts-radar', selector: 'ngx-echarts-radar',
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
export class EchartsRadarComponent { export class EchartsRadarComponent {
options: any; options: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const echarts: any = config.variables.echarts; const echarts: any = config.variables.echarts;

70
src/app/pages/charts/echarts/echarts.component.html
View file

@ -1,58 +1,58 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Pie</nga-card-header> <nb-card-header>Pie</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-pie></ngx-echarts-pie> <ngx-echarts-pie></ngx-echarts-pie>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Bar</nga-card-header> <nb-card-header>Bar</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-bar></ngx-echarts-bar> <ngx-echarts-bar></ngx-echarts-bar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Line</nga-card-header> <nb-card-header>Line</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-line></ngx-echarts-line> <ngx-echarts-line></ngx-echarts-line>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Multiple x-axis</nga-card-header> <nb-card-header>Multiple x-axis</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis> <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Area Stack</nga-card-header> <nb-card-header>Area Stack</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-area-stack></ngx-echarts-area-stack> <ngx-echarts-area-stack></ngx-echarts-area-stack>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Bar Animation</nga-card-header> <nb-card-header>Bar Animation</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-bar-animation></ngx-echarts-bar-animation> <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nga-card size="large"> <nb-card size="large">
<nga-card-header>Radar</nga-card-header> <nb-card-header>Radar</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-echarts-radar></ngx-echarts-radar> <ngx-echarts-radar></ngx-echarts-radar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

2
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
ngx-echarts-pie, ngx-echarts-pie,
ngx-echarts-bar, ngx-echarts-bar,
ngx-echarts-line { ngx-echarts-line {

4
src/app/pages/components/components.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NgaCheckboxModule } from '@akveo/nga-theme'; import { NbCheckboxModule } from '@nebular/theme';
import { TreeModule } from 'ng2-tree'; import { TreeModule } from 'ng2-tree';
import { ToasterModule } from 'angular2-toaster'; import { ToasterModule } from 'angular2-toaster';
@ -14,7 +14,7 @@ import { ComponentsRoutingModule, routedComponents } from './components-routing.
ComponentsRoutingModule, ComponentsRoutingModule,
TreeModule, TreeModule,
ToasterModule, ToasterModule,
NgaCheckboxModule, NbCheckboxModule,
], ],
declarations: [ declarations: [
...routedComponents, ...routedComponents,

24
src/app/pages/components/notifications/notifications.component.html
View file

@ -1,8 +1,8 @@
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Toaster configuration Toaster configuration
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<toaster-container [toasterconfig]="config"></toaster-container> <toaster-container [toasterconfig]="config"></toaster-container>
<div class="row"> <div class="row">
@ -66,17 +66,17 @@
</div> </div>
</div> </div>
<div><nga-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nga-checkbox></div> <div><nb-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nb-checkbox></div>
<div><nga-checkbox [(ngModel)]="isHideOnClick">Hide on click</nga-checkbox></div> <div><nb-checkbox [(ngModel)]="isHideOnClick">Hide on click</nb-checkbox></div>
<div><nga-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nga-checkbox></div> <div><nb-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nb-checkbox></div>
<div><nga-checkbox [(ngModel)]="isCloseButton">Close button</nga-checkbox></div> <div><nb-checkbox [(ngModel)]="isCloseButton">Close button</nb-checkbox></div>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
<nga-card-footer> <nb-card-footer>
<button class="btn btn-primary" (click)="makeToast()">Show toast</button> <button class="btn btn-primary" (click)="makeToast()">Show toast</button>
<button class="btn btn-success" (click)="openRandomToast()">Random toast</button> <button class="btn btn-success" (click)="openRandomToast()">Random toast</button>
<button class="btn btn-danger" (click)="clearToasts()">Clear all toasts</button> <button class="btn btn-danger" (click)="clearToasts()">Clear all toasts</button>
</nga-card-footer> </nb-card-footer>
</nga-card> </nb-card>

4
src/app/pages/components/notifications/notifications.component.scss
View file

@ -1,8 +1,8 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card-footer { nb-card-footer {
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
button { button {

10
src/app/pages/components/tree/tree.component.html
View file

@ -1,10 +1,10 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header>Tree</nga-card-header> <nb-card-header>Tree</nb-card-header>
<nga-card-body> <nb-card-body>
<tree [tree]="tree"></tree> <tree [tree]="tree"></tree>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

20
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -1,16 +1,16 @@
<nga-card size="large"> <nb-card size="large">
<nga-tabset fullWidth> <nb-tabset fullWidth>
<nga-tab tabTitle="Contacts"> <nb-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts"> <div class="contact" *ngFor="let c of contacts">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nga-user> <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<i class="i-contact ion-ios-telephone-outline"></i> <i class="i-contact ion-ios-telephone-outline"></i>
</div> </div>
</nga-tab> </nb-tab>
<nga-tab tabTitle="Recent"> <nb-tab tabTitle="Recent">
<div class="contact" *ngFor="let c of recent"> <div class="contact" *ngFor="let c of recent">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nga-user> <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="time">{{ c.time }}</span> <span class="time">{{ c.time }}</span>
</div> </div>
</nga-tab> </nb-tab>
</nga-tabset> </nb-tabset>
</nga-card> </nb-card>

22
src/app/pages/dashboard/contacts/contacts.component.scss
View file

@ -1,14 +1,14 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
@include nga-install-component() { @include nb-install-component() {
nga-tabset { nb-tabset {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
nga-tab { nb-tab {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0; padding: 0;
@ -18,9 +18,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
color: nga-theme(color-fg); color: nb-theme(color-fg);
padding: 1rem; padding: 1rem;
border-bottom: 1px solid nga-theme(separator); border-bottom: 1px solid nb-theme(separator);
} }
.i-contact { .i-contact {
@ -30,24 +30,24 @@
.time { .time {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
text-transform: uppercase; text-transform: uppercase;
} }
nga-user /deep/ { nb-user /deep/ {
.info-container { .info-container {
margin-left: 0.875rem; margin-left: 0.875rem;
} }
.user-name { .user-name {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.user-title { .user-title {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
text-transform: uppercase; text-transform: uppercase;
} }
} }

10
src/app/pages/dashboard/dashboard.component.html
View file

@ -46,12 +46,12 @@
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<nga-card size="xsmall" class="solar-card"> <nb-card size="xsmall" class="solar-card">
<nga-card-header>Solar Energy Consumption</nga-card-header> <nb-card-header>Solar Energy Consumption</nb-card-header>
<nga-card-body> <nb-card-body>
<ngx-solar [chartValue]="72"></ngx-solar> <ngx-solar [chartValue]="72"></ngx-solar>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<ngx-team></ngx-team> <ngx-team></ngx-team>
</div> </div>

4
src/app/pages/dashboard/dashboard.component.scss
View file

@ -1,7 +1,7 @@
@import '../../@theme/styles/variables'; @import '../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
.solar-card nga-card-header { .solar-card nb-card-header {
border: none; border: none;
padding-bottom: 0; padding-bottom: 0;
} }

6
src/app/pages/dashboard/dashboard.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme'; import { NbTabsetModule, NbUserModule } from '@nebular/theme';
import { AngularEchartsModule } from 'ngx-echarts'; import { AngularEchartsModule } from 'ngx-echarts';
import { SharedModule } from '../../shared.module'; import { SharedModule } from '../../shared.module';
@ -22,8 +22,8 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
@NgModule({ @NgModule({
imports: [ imports: [
NgaTabsetModule, NbTabsetModule,
NgaUserModule, NbUserModule,
SharedModule, SharedModule,
AngularEchartsModule, AngularEchartsModule,
], ],

2
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
display: block; display: block;
flex: 1; flex: 1;

4
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
declare const echarts: any; declare const echarts: any;
@ -14,7 +14,7 @@ export class ElectricityChartComponent {
option: any; option: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630, const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130, 720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,

12
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -1,12 +1,12 @@
<nga-card size="large"> <nb-card size="large">
<div class="consumption-table"> <div class="consumption-table">
<div class="table-header"> <div class="table-header">
<div>Electricity</div> <div>Electricity</div>
<div class="subtitle">Consumption</div> <div class="subtitle">Consumption</div>
</div> </div>
<nga-tabset fullWidth> <nb-tabset fullWidth>
<nga-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active"> <nb-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
<div class="stats-month" *ngFor="let month of year.months"> <div class="stats-month" *ngFor="let month of year.months">
<div> <div>
<span class="month">{{ month.month }}</span> <span class="month">{{ month.month }}</span>
@ -16,8 +16,8 @@
<b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD <b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD
</div> </div>
</div> </div>
</nga-tab> </nb-tab>
</nga-tabset> </nb-tabset>
</div> </div>
<div class="chart-container"> <div class="chart-container">
@ -53,4 +53,4 @@
</div> </div>
<ngx-electricity-chart></ngx-electricity-chart> <ngx-electricity-chart></ngx-electricity-chart>
</div> </div>
</nga-card> </nb-card>

60
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -1,10 +1,10 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/components/card/card.component.theme'; @import '~@nebular/theme/components/card/card.component.theme';
@import '~@akveo/nga-theme/styles/global/typography/typography'; @import '~@nebular/theme/styles/global/typography/typography';
@include nga-install-component() { @include nb-install-component() {
nga-card { nb-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -15,22 +15,22 @@
width: 20rem; width: 20rem;
height: 100%; height: 100%;
z-index: 2; z-index: 2;
box-shadow: nga-theme(card-shadow); box-shadow: nb-theme(card-shadow);
} }
.table-header { .table-header {
@include nga-card-header(); @include nb-card-header();
font-size: 1.5rem; font-size: 1.5rem;
.subtitle { .subtitle {
color: nga-theme(color-fg); color: nb-theme(color-fg);
font-family: nga-theme(font-primary); font-family: nb-theme(font-primary);
font-size: 1.125rem; font-size: 1.125rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
} }
nga-tabset /deep/ { nb-tabset /deep/ {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@ -42,13 +42,13 @@
} }
ul li a { ul li a {
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
ul li.active { ul li.active {
background-color: nga-theme(color-primary); background-color: nb-theme(color-primary);
border-radius: nga-theme(radius); border-radius: nb-theme(radius);
a { a {
font-size: 1.5rem; font-size: 1.5rem;
@ -58,7 +58,7 @@
} }
} }
nga-tab { nb-tab {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
} }
@ -71,16 +71,16 @@
padding: 1rem; padding: 1rem;
&:not(:first-child) { &:not(:first-child) {
border-top: 1px solid nga-theme(separator); border-top: 1px solid nb-theme(separator);
} }
.month { .month {
display: inline-block; display: inline-block;
width: 2.75rem; width: 2.75rem;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.delta { .delta {
@ -115,13 +115,13 @@
.results { .results {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
b { b {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 1rem; font-size: 1rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
} }
} }
@ -129,7 +129,7 @@
.chart-container { .chart-container {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-image: nga-theme(radial-gradient); background-image: nb-theme(radial-gradient);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -151,24 +151,24 @@
.subtitle { .subtitle {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
.value { .value {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 2rem; font-size: 2rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
&.dollar { &.dollar {
color: nga-theme(color-fg-highlight); color: nb-theme(color-fg-highlight);
} }
} }
.unit { .unit {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
} }

42
src/app/pages/dashboard/player/player.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
.player { .player {
flex: 1; flex: 1;
@ -10,9 +10,9 @@
display: flex; display: flex;
line-height: 2rem; line-height: 2rem;
font-size: 1.25rem; font-size: 1.25rem;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
padding: 1.25rem; padding: 1.25rem;
.player-menu { .player-menu {
@ -33,7 +33,7 @@
background-position: center; background-position: center;
height: 94px; height: 94px;
width: 30%; width: 30%;
box-shadow: nga-theme(card-shadow); box-shadow: nb-theme(card-shadow);
} }
.artist-details { .artist-details {
@ -43,16 +43,16 @@
margin-left: 1.25rem; margin-left: 1.25rem;
.artist-name { .artist-name {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-size: 1.5rem; font-size: 1.5rem;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-weight: nga-theme(font-weight-bold); font-weight: nb-theme(font-weight-bold);
} }
.song-name { .song-name {
font-family: nga-theme(font-main); font-family: nb-theme(font-main);
font-size: 1.125rem; font-size: 1.125rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
} }
} }
@ -86,12 +86,12 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
font-size: 4rem; font-size: 4rem;
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
padding: 2.5rem 0; padding: 2.5rem 0;
border-bottom: 1px solid nga-theme(separator); border-bottom: 1px solid nb-theme(separator);
.prev { .prev {
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
} }
@ -99,16 +99,16 @@
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
font-size: 4rem; font-size: 4rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
padding: 2rem 0; padding: 2rem 0;
border-bottom: 1px solid nga-theme(separator); border-bottom: 1px solid nb-theme(separator);
.minus:hover { .minus:hover {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.plus:hover { .plus:hover {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.volume-items { .volume-items {
@ -126,7 +126,7 @@
.volume-item::before { .volume-item::before {
content: ''; content: '';
width: 4px; width: 4px;
background-color: nga-theme(separator); background-color: nb-theme(separator);
height: 30%; height: 30%;
border-radius: 1rem; border-radius: 1rem;
transition: 0.3s; transition: 0.3s;
@ -166,8 +166,8 @@
} }
.btn.active { .btn.active {
background-color: nga-theme(card-bg); background-color: nb-theme(card-bg);
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
.btn:first-child { .btn:first-child {
@ -177,7 +177,7 @@
.btn:last-child { .btn:last-child {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: nga-theme(card-border-radius); border-bottom-right-radius: nb-theme(card-border-radius);
} }
} }
} }

8
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
:host { :host {
display: block; display: block;
align-items: center; align-items: center;
@ -81,9 +81,9 @@
.rooms-card-header { .rooms-card-header {
line-height: 2rem; line-height: 2rem;
font-size: 1.25rem; font-size: 1.25rem;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
padding: 1.25rem; padding: 1.25rem;
} }
} }

8
src/app/pages/dashboard/rooms/rooms.component.scss
View file

@ -1,18 +1,18 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
ngx-room-selector { ngx-room-selector {
width: 65%; width: 65%;
background-image: nga-theme(radial-gradient); background-image: nb-theme(radial-gradient);
} }
ngx-player { ngx-player {
flex: 1; flex: 1;
box-shadow: nga-theme(card-shadow); box-shadow: nb-theme(card-shadow);
} }
nga-card { nb-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }

4
src/app/pages/dashboard/rooms/rooms.component.ts
View file

@ -4,10 +4,10 @@ import { Component } from '@angular/core';
selector: 'ngx-rooms', selector: 'ngx-rooms',
styleUrls: ['./rooms.component.scss'], styleUrls: ['./rooms.component.scss'],
template: ` template: `
<nga-card size="large"> <nb-card size="large">
<ngx-room-selector></ngx-room-selector> <ngx-room-selector></ngx-room-selector>
<ngx-player></ngx-player> <ngx-player></ngx-player>
</nga-card> </nb-card>
`, `,
}) })
export class RoomsComponent { export class RoomsComponent {

36
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -1,5 +1,5 @@
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-header> <nb-card-header>
<div class="cameras-card-header"> <div class="cameras-card-header">
<span class="cameras-card-title">Security Cameras</span> <span class="cameras-card-title">Security Cameras</span>
<span class="cameras-filter"> <span class="cameras-filter">
@ -11,8 +11,8 @@
</a> </a>
</span> </span>
</div> </div>
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<div class="cameras single-view" *ngIf="isSingleView"> <div class="cameras single-view" *ngIf="isSingleView">
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'"> <div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span>{{ selectedCamera.title }}</span> <span>{{ selectedCamera.title }}</span>
@ -24,21 +24,21 @@
<span>{{ camera.title }}</span> <span>{{ camera.title }}</span>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
<nga-card-footer> <nb-card-footer>
<nga-actions size="medium" fullWidth> <nb-actions size="medium" fullWidth>
<nga-action> <nb-action>
<i class="ion-ios-pause-outline"></i><span>Pause</span> <i class="ion-ios-pause-outline"></i><span>Pause</span>
</nga-action> </nb-action>
<nga-action> <nb-action>
<i class="ion-navicon"></i><span>Log View</span> <i class="ion-navicon"></i><span>Log View</span>
</nga-action> </nb-action>
<nga-action> <nb-action>
<i class="ion-ios-search"></i><span>Search</span> <i class="ion-ios-search"></i><span>Search</span>
</nga-action> </nb-action>
<nga-action> <nb-action>
<i class="ion-ios-gear-outline"></i><span>Setup</span> <i class="ion-ios-gear-outline"></i><span>Setup</span>
</nga-action> </nb-action>
</nga-actions> </nb-actions>
</nga-card-footer> </nb-card-footer>
</nga-card> </nb-card>

30
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -1,16 +1,16 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card-header { nb-card-header {
padding: 0; padding: 0;
border: none; border: none;
} }
nga-card-body { nb-card-body {
padding: 0; padding: 0;
} }
nga-card-footer { nb-card-footer {
padding: 1rem 0; padding: 1rem 0;
border: none; border: none;
} }
@ -33,21 +33,21 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
a:first-child { a:first-child {
border-left: 1px solid nga-theme(separator); border-left: 1px solid nb-theme(separator);
} }
a:last-child { a:last-child {
border-top-right-radius: nga-theme(card-border-radius); border-top-right-radius: nb-theme(card-border-radius);
} }
a.active { a.active {
background-color: nga-theme(color-bg-active); background-color: nb-theme(color-bg-active);
color: nga-theme(color-fg-highlight); color: nb-theme(color-fg-highlight);
text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4); text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
border: none; border: none;
} }
} }
@ -101,17 +101,17 @@
} }
} }
nga-action { nb-action {
i { i {
color: nga-theme(color-fg); color: nb-theme(color-fg);
font-size: 2.5rem; font-size: 2.5rem;
margin-right: 1rem; margin-right: 1rem;
} }
span { span {
font-family: nga-theme(font-family-secondary); font-family: nb-theme(font-family-secondary);
font-weight: nga-theme(font-weight-bold); font-weight: nb-theme(font-weight-bold);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
text-transform: uppercase; text-transform: uppercase;
} }
} }

2
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
display: flex; display: flex;
height: 100%; height: 100%;

4
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core'; import { Component, Input } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
declare const echarts: any; declare const echarts: any;
@ -27,7 +27,7 @@ export class SolarComponent {
this.option.series[1].data[0].value = value; this.option.series[1].data[0].value = value;
} }
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const solarTheme: any = config.variables.solar; const solarTheme: any = config.variables.solar;

34
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -1,19 +1,19 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
@include nga-install-component() { @include nb-install-component() {
nga-card { nb-card {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 6rem; height: 6rem;
overflow: visible; overflow: visible;
$bevel: btn-hero-bevel(nga-theme(card-bg)); $bevel: btn-hero-bevel(nb-theme(card-bg));
$shadow: btn-hero-shadow(); $shadow: btn-hero-shadow();
box-shadow: $bevel, $shadow; box-shadow: $bevel, $shadow;
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
$border-radius: nga-theme(card-border-radius); $border-radius: nb-theme(card-border-radius);
.icon-container { .icon-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -23,7 +23,7 @@
font-size: 4em; font-size: 4em;
border-radius: $border-radius 0 0 $border-radius; border-radius: $border-radius 0 0 $border-radius;
transition: all 0.1s ease-out, color 0s; transition: all 0.1s ease-out, color 0s;
color: nga-theme(color-white); color: nb-theme(color-white);
&.primary { &.primary {
@include btn-hero-primary-gradient(); @include btn-hero-primary-gradient();
@ -44,7 +44,7 @@
} }
&:hover { &:hover {
background: lighten(nga-theme(card-bg), 5%); background: lighten(nb-theme(card-bg), 5%);
.icon-container { .icon-container {
&.primary { &.primary {
@ -64,7 +64,7 @@
&:active { &:active {
box-shadow: none; box-shadow: none;
background: nga-theme(card-bg); background: nb-theme(card-bg);
.icon-container { .icon-container {
&.primary, &.success, &.info, &.warning { &.primary, &.success, &.info, &.warning {
@ -86,10 +86,10 @@
} }
&.off { &.off {
color: nga-theme(card-fg); color: nb-theme(card-fg);
.icon-container { .icon-container {
color: nga-theme(card-fg); color: nb-theme(card-fg);
&.primary, &.success, &.info, &.warning { &.primary, &.success, &.info, &.warning {
box-shadow: none; box-shadow: none;
@ -98,10 +98,10 @@
} }
.details { .details {
border-left: 1px solid nga-theme(separator); border-left: 1px solid nb-theme(separator);
} }
.title { .title {
color: nga-theme(card-fg); color: nb-theme(card-fg);
} }
} }
@ -115,17 +115,17 @@
} }
.title { .title {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 1.5rem; font-size: 1.5rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(card-fg-heading); color: nb-theme(card-fg-heading);
} }
.status { .status {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
text-transform: uppercase; text-transform: uppercase;
color: nga-theme(card-fg); color: nb-theme(card-fg);
} }
} }
} }

4
src/app/pages/dashboard/status-card/status-card.component.ts
View file

@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
selector: 'ngx-status-card', selector: 'ngx-status-card',
styleUrls: ['./status-card.component.scss'], styleUrls: ['./status-card.component.scss'],
template: ` template: `
<nga-card (click)="on = !on" [ngClass]="{'off': !on}"> <nb-card (click)="on = !on" [ngClass]="{'off': !on}">
<div class="icon-container {{ type }}"> <div class="icon-container {{ type }}">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
@ -13,7 +13,7 @@ import { Component, Input } from '@angular/core';
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="status">{{ on ? 'ON' : 'OFF' }}</div> <div class="status">{{ on ? 'ON' : 'OFF' }}</div>
</div> </div>
</nga-card> </nb-card>
`, `,
}) })
export class StatusCardComponent { export class StatusCardComponent {

4
src/app/pages/dashboard/team/team.component.html
View file

@ -1,4 +1,4 @@
<nga-card size="medium"> <nb-card size="medium">
<div class="team-photo"> <div class="team-photo">
<a href="mailto:contact@akveo.com"> <a href="mailto:contact@akveo.com">
<button type="button" class="btn btn-success btn-icon team-link"> <button type="button" class="btn btn-success btn-icon team-link">
@ -32,4 +32,4 @@
<i class="ion-social-github"></i> <i class="ion-social-github"></i>
</a> </a>
</div> </div>
</nga-card> </nb-card>

22
src/app/pages/dashboard/team/team.component.scss
View file

@ -1,14 +1,14 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
.team-photo { .team-photo {
background-image: url('~/assets/images/team.png'); background-image: url('~/assets/images/team.png');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
position: relative; position: relative;
border-top-left-radius: nga-theme(card-border-radius); border-top-left-radius: nb-theme(card-border-radius);
border-top-right-radius: nga-theme(card-border-radius); border-top-right-radius: nb-theme(card-border-radius);
flex: 1; flex: 1;
max-height: 50%; max-height: 50%;
@ -20,7 +20,7 @@
bottom: -2rem; bottom: -2rem;
right: 1rem; right: 1rem;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 4px 10px 0 rgba(nga-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nga-theme(color-fg-highlight), 0.2); box-shadow: 0 4px 10px 0 rgba(nb-theme(layout-bg), 0.4), 0 0 12px 0 rgba(nb-theme(color-fg-highlight), 0.2);
} }
} }
@ -28,8 +28,8 @@
padding: 1.5rem 1.5rem 0; padding: 1.5rem 1.5rem 0;
.team-title { .team-title {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
h2 { h2 {
margin: 0; margin: 0;
@ -38,14 +38,14 @@
.team-subtitle { .team-subtitle {
margin-bottom: 1rem; margin-bottom: 1rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
.team-bio { .team-bio {
text-align: justify; text-align: justify;
color: nga-theme(color-fg-text); color: nb-theme(color-fg-text);
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
} }
@ -56,7 +56,7 @@
a { a {
text-decoration: none; text-decoration: none;
color: nga-theme(color-fg); color: nb-theme(color-fg);
i { i {
font-size: 1.75rem; font-size: 1.75rem;

18
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -1,7 +1,7 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons'; @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
@include nga-install-component() { @include nb-install-component() {
display: flex; display: flex;
position: relative; position: relative;
@ -18,7 +18,7 @@
height: 88%; height: 88%;
top: 13%; top: 13%;
left: 6%; left: 6%;
background-color: lighten(nga-theme(layout-bg), 2%); background-color: lighten(nb-theme(layout-bg), 2%);
border-radius: 50%; border-radius: 50%;
z-index: 1; z-index: 1;
@ -32,7 +32,7 @@
position: absolute; position: absolute;
width: 5.25rem; width: 5.25rem;
height: 5.25rem; height: 5.25rem;
background-color: nga-theme(card-bg); background-color: nb-theme(card-bg);
border-radius: 50%; border-radius: 50%;
bottom: 2%; bottom: 2%;
left: 50%; left: 50%;
@ -42,24 +42,24 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: nga-theme(card-shadow); box-shadow: nb-theme(card-shadow);
cursor: pointer; cursor: pointer;
font-size: 2.5rem; font-size: 2.5rem;
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5); text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
&:hover { &:hover {
background-color: lighten(nga-theme(card-bg), 5%); background-color: lighten(nb-theme(card-bg), 5%);
} }
&:active { &:active {
background-color: darken(nga-theme(card-bg), 5%); background-color: darken(nb-theme(card-bg), 5%);
box-shadow: none; box-shadow: none;
} }
&.off { &.off {
color: nga-theme(color-fg); color: nb-theme(color-fg);
text-shadow: none; text-shadow: none;
} }
} }

16
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -1,7 +1,7 @@
<nga-card size="large"> <nb-card size="large">
<nga-tabset fullWidth> <nb-tabset fullWidth>
<nga-tab tabTitle="Temperature"> <nb-tab tabTitle="Temperature">
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
@ -34,9 +34,9 @@
<input type="radio" value="fan"/><i class="ion-ios-loop"></i> <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
</label> </label>
</div> </div>
</nga-tab> </nb-tab>
<nga-tab tabTitle="Humidity"> <nb-tab tabTitle="Humidity">
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
@ -66,6 +66,6 @@
<input type="radio" value="fan"/><i class="ion-ios-loop"></i> <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
</label> </label>
</div> </div>
</nga-tab> </nb-tab>
</nga-tabset> </nb-tabset>
</nga-card> </nb-card>

34
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -1,12 +1,12 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card { nb-card {
background-image: nga-theme(radial-gradient); background-image: nb-theme(radial-gradient);
} }
nga-tabset { nb-tabset {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
@ -16,7 +16,7 @@
} }
} }
nga-tab.content-active { nb-tab.content-active {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -43,10 +43,10 @@
.value { .value {
position: relative; position: relative;
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 4rem; font-size: 4rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
&.temperature::before { &.temperature::before {
position: absolute; position: absolute;
@ -60,20 +60,20 @@
content: '%'; content: '%';
bottom: 0.5rem; bottom: 0.5rem;
right: -2.5rem; right: -2.5rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
font-size: 2.5rem; font-size: 2.5rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
} }
.desc { .desc {
color: nga-theme(color-fg); color: nb-theme(color-fg);
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
&.off { &.off {
.value { .value {
color: nga-theme(color-fg); color: nb-theme(color-fg);
letter-spacing: 0.25rem; letter-spacing: 0.25rem;
padding-left: 0.5rem; padding-left: 0.5rem;
@ -97,15 +97,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-color: nga-theme(form-control-border-color); border-color: nb-theme(form-control-border-color);
height: 4.5rem; height: 4.5rem;
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
&.active { &.active {
border-color: nga-theme(color-fg-highlight); border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nga-theme(color-fg-highlight), 0.25); box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nga-theme(color-fg-highlight), 0.25); background-color: rgba(nb-theme(color-fg-highlight), 0.25);
} }
i { i {

4
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-temperature', selector: 'ngx-temperature',
@ -18,7 +18,7 @@ export class TemperatureComponent {
colors: any; colors: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
this.colors = config.variables; this.colors = config.variables;
}); });

4
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -1,5 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
declare const echarts: any; declare const echarts: any;
@ -18,7 +18,7 @@ export class TrafficChartComponent {
types = ['week', 'month', 'year']; types = ['week', 'month', 'year'];
option: any = {}; option: any = {};
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => { this.theme.getJsTheme().subscribe(config => {
const trafficTheme: any = config.variables.traffic; const trafficTheme: any = config.variables.traffic;

10
src/app/pages/dashboard/traffic/traffic.component.scss
View file

@ -1,8 +1,8 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card-header { nb-card-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -10,13 +10,13 @@
border: none; border: none;
} }
nga-card-body { nb-card-body {
overflow: hidden; overflow: hidden;
} }
/deep/ canvas { /deep/ canvas {
border-bottom-left-radius: nga-theme(card-border-radius); border-bottom-left-radius: nb-theme(card-border-radius);
border-bottom-right-radius: nga-theme(card-border-radius); border-bottom-right-radius: nb-theme(card-border-radius);
} }
.echart { .echart {

12
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -4,8 +4,8 @@ import { Component } from '@angular/core';
selector: 'ngx-traffic', selector: 'ngx-traffic',
styleUrls: ['./traffic.component.scss'], styleUrls: ['./traffic.component.scss'],
template: ` template: `
<nga-card size="xsmall"> <nb-card size="xsmall">
<nga-card-header> <nb-card-header>
<span>Traffic Consumption</span> <span>Traffic Consumption</span>
<div class="ghost-dropdown" ngbDropdown> <div class="ghost-dropdown" ngbDropdown>
<button type="button" class="btn btn-sm btn-primary" ngbDropdownToggle> <button type="button" class="btn btn-sm btn-primary" ngbDropdownToggle>
@ -15,11 +15,11 @@ import { Component } from '@angular/core';
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li> <li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul> </ul>
</div> </div>
</nga-card-header> </nb-card-header>
<nga-card-body class="p-0"> <nb-card-body class="p-0">
<ngx-traffic-chart></ngx-traffic-chart> <ngx-traffic-chart></ngx-traffic-chart>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class TrafficComponent { export class TrafficComponent {

8
src/app/pages/dashboard/weather/weather.component.html
View file

@ -1,5 +1,5 @@
<nga-card size="medium"> <nb-card size="medium">
<nga-card-body> <nb-card-body>
<div class="location"> <div class="location">
<span>Minsk</span> <span>Minsk</span>
</div> </div>
@ -56,5 +56,5 @@
<span class="temperature">21&deg;</span> <span class="temperature">21&deg;</span>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>

48
src/app/pages/dashboard/weather/weather.component.scss
View file

@ -1,30 +1,30 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card { nb-card {
background-image: nga-theme(radial-gradient); background-image: nb-theme(radial-gradient);
} }
nga-card-body { nb-card-body {
height: 100%; height: 100%;
padding: 2rem; padding: 2rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
.location { .location {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-size: 3rem; font-size: 3rem;
line-height: 3rem; line-height: 3rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.date { .date {
font-family: nga-theme(font-main); font-family: nb-theme(font-main);
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.25rem; line-height: 1.25rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
} }
.daily-forecast { .daily-forecast {
@ -38,9 +38,9 @@
.temperature { .temperature {
font-size: 5rem; font-size: 5rem;
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -66,16 +66,16 @@
text-align: center; text-align: center;
.parameter-name { .parameter-name {
font-family: nga-theme(font-main); font-family: nb-theme(font-main);
font-size: 1.25rem; font-size: 1.25rem;
font-weight: nga-theme(font-weight-light); font-weight: nb-theme(font-weight-light);
line-height: 2rem; line-height: 2rem;
} }
.parameter-value { .parameter-value {
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
} }
} }
} }
@ -93,9 +93,9 @@
.caption { .caption {
text-transform: uppercase; text-transform: uppercase;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-weight: nga-theme(font-weight-bold); font-weight: nb-theme(font-weight-bold);
font-size: 1.25rem; font-size: 1.25rem;
} }
@ -105,9 +105,9 @@
} }
.temperature { .temperature {
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-weight: nga-theme(font-weight-bold); font-weight: nb-theme(font-weight-bold);
font-size: 1.25rem; font-size: 1.25rem;
} }
} }

8
src/app/pages/editors/ckeditor/ckeditor.component.ts
View file

@ -6,11 +6,11 @@ import 'ckeditor';
@Component({ @Component({
selector: 'ngx-ckeditor', selector: 'ngx-ckeditor',
template: ` template: `
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-body> <nb-card-body>
<ckeditor [config]="{ extraPlugins: 'divarea', height: '515' }"></ckeditor> <ckeditor [config]="{ extraPlugins: 'divarea', height: '515' }"></ckeditor>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class CKEditorComponent { export class CKEditorComponent {

8
src/app/pages/editors/tiny-mce/tiny-mce.component.ts
View file

@ -3,11 +3,11 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-tiny-mce-page', selector: 'ngx-tiny-mce-page',
template: ` template: `
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-body> <nb-card-body>
<ngx-tiny-mce></ngx-tiny-mce> <ngx-tiny-mce></ngx-tiny-mce>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class TinyMCEComponent { export class TinyMCEComponent {

76
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -1,8 +1,8 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header>Default Inputs</nga-card-header> <nb-card-header>Default Inputs</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Project" class="form-control" /> <input type="text" placeholder="Project" class="form-control" />
</div> </div>
@ -39,11 +39,11 @@
<div class="input-group input-group-lg"> <div class="input-group input-group-lg">
<input type="text" placeholder="Large Input" class="form-control" /> <input type="text" placeholder="Large Input" class="form-control" />
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header>Input Groups</nga-card-header> <nb-card-header>Input Groups</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="input-group"> <div class="input-group">
<span class="input-group-addon success">@</span> <span class="input-group-addon success">@</span>
<input type="text" class="form-control" placeholder="Username" /> <input type="text" class="form-control" placeholder="Username" />
@ -84,11 +84,11 @@
</div> </div>
<input type="text" class="form-control"> <input type="text" class="form-control">
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header>Selects</nga-card-header> <nb-card-header>Selects</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="form-group"> <div class="form-group">
<label>Simple Select</label> <label>Simple Select</label>
<select class="form-control"> <select class="form-control">
@ -109,13 +109,13 @@
<option>Item 5</option> <option>Item 5</option>
</select> </select>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header>Input Styles</nga-card-header> <nb-card-header>Input Styles</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="input-group input-group-border-only"> <div class="input-group input-group-border-only">
<input type="text" placeholder="Border Only" class="form-control" /> <input type="text" placeholder="Border Only" class="form-control" />
</div> </div>
@ -125,11 +125,11 @@
<div class="input-group input-group-fill-only"> <div class="input-group input-group-fill-only">
<input type="text" placeholder="Fill Only" class="form-control"> <input type="text" placeholder="Fill Only" class="form-control">
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header>Validation States</nga-card-header> <nb-card-header>Validation States</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="form-group"> <div class="form-group">
<input type="text" placeholder="Input with Success" class="form-control form-control-success"> <input type="text" placeholder="Input with Success" class="form-control form-control-success">
</div> </div>
@ -140,9 +140,9 @@
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger"> <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
</div> </div>
<div class="form-group validation-checkboxes"> <div class="form-group validation-checkboxes">
<nga-checkbox status="success">Checkbox with Success</nga-checkbox> <nb-checkbox status="success">Checkbox with Success</nb-checkbox>
<nga-checkbox status="warning">Checkbox with Warning</nga-checkbox> <nb-checkbox status="warning">Checkbox with Warning</nb-checkbox>
<nga-checkbox status="danger">Checkbox with Danger</nga-checkbox> <nb-checkbox status="danger">Checkbox with Danger</nb-checkbox>
</div> </div>
<div class="form-group has-success"> <div class="form-group has-success">
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success"> <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
@ -153,11 +153,11 @@
<div class="form-group has-danger"> <div class="form-group has-danger">
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger"> <input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header>Checkboxes & Radios</nga-card-header> <nb-card-header>Checkboxes & Radios</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="demo-checkboxes-radio"> <div class="demo-checkboxes-radio">
<div class="demo-checkboxes"> <div class="demo-checkboxes">
<label class="custom-control custom-checkbox"> <label class="custom-control custom-checkbox">
@ -194,7 +194,7 @@
</label> </label>
</div> </div>
<div class="demo-disabled-checkbox-radio"> <div class="demo-disabled-checkbox-radio">
<nga-checkbox [disabled]="true">Disabled Checkbox</nga-checkbox> <nb-checkbox [disabled]="true">Disabled Checkbox</nb-checkbox>
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" disabled> <input type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span> <span class="custom-control-indicator"></span>
@ -202,10 +202,10 @@
</label> </label>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-body class="demo-rating"> <nb-card-body class="demo-rating">
<span class="rating-header">Rating</span> <span class="rating-header">Rating</span>
<div> <div>
<ngb-rating [(rate)]="starRate" max=5> <ngb-rating [(rate)]="starRate" max=5>
@ -229,7 +229,7 @@
</ngb-rating> </ngb-rating>
<span class="current-rate">{{ heartRate | number : '1.1' }}</span> <span class="current-rate">{{ heartRate | number : '1.1' }}</span>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

16
src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -1,8 +1,8 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card-body { nb-card-body {
overflow: visible; overflow: visible;
} }
@ -46,26 +46,26 @@
.star { .star {
font-size: 1.5rem; font-size: 1.5rem;
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
.filled { .filled {
color: nga-theme(color-fg); color: nb-theme(color-fg);
} }
// TODO: Replace with the card header styles mixin // TODO: Replace with the card header styles mixin
.rating-header { .rating-header {
line-height: 2rem; line-height: 2rem;
font-size: 1.25rem; font-size: 1.25rem;
font-family: nga-theme(font-secondary); font-family: nb-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder); font-weight: nb-theme(font-weight-bolder);
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.current-rate { .current-rate {
font-size: 1.5rem; font-size: 1.5rem;
padding-left: 1rem; padding-left: 1rem;
color: nga-theme(color-fg-heading); color: nb-theme(color-fg-heading);
} }
.full-name-inputs { .full-name-inputs {

78
src/app/pages/forms/form-layouts/form-layouts.component.html
View file

@ -1,10 +1,10 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Inline form Inline form
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<form class="form-inline"> <form class="form-inline">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 fullname" placeholder="Jane Doe"> <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 fullname" placeholder="Jane Doe">
<div class="input-group mb-2 mr-sm-2 mb-sm-0 username"> <div class="input-group mb-2 mr-sm-2 mb-sm-0 username">
@ -12,19 +12,19 @@
<input type="text" class="form-control" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0"> <div class="form-check mb-2 mr-sm-2 mb-sm-0">
<nga-checkbox>Remember me</nga-checkbox> <nb-checkbox>Remember me</nb-checkbox>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header>Using the Grid</nga-card-header> <nb-card-header>Using the Grid</nb-card-header>
<nga-card-body> <nb-card-body>
<form> <form>
<div class="form-group row"> <div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@ -68,7 +68,7 @@
<label class="col-sm-2">Checkbox</label> <label class="col-sm-2">Checkbox</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<nga-checkbox>Check me out</nga-checkbox> <nb-checkbox>Check me out</nb-checkbox>
</div> </div>
</div> </div>
</div> </div>
@ -78,13 +78,13 @@
</div> </div>
</div> </div>
</form> </form>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Form without labels Form without labels
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<form> <form>
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Recipients"> <input type="text" class="form-control" placeholder="Recipients">
@ -97,15 +97,15 @@
</div> </div>
<button type="submit" class="btn btn-success">Send</button> <button type="submit" class="btn btn-success">Send</button>
</form> </form>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Basic form Basic form
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
@ -116,17 +116,17 @@
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="form-group"> <div class="form-group">
<nga-checkbox>Check me out</nga-checkbox> <nb-checkbox>Check me out</nb-checkbox>
</div> </div>
<button type="submit" class="btn btn-danger">Submit</button> <button type="submit" class="btn btn-danger">Submit</button>
</form> </form>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Block form Block form
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
@ -156,17 +156,17 @@
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Horizontal form Horizontal form
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label> <label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
@ -183,7 +183,7 @@
<div class="form-group row"> <div class="form-group row">
<div class="offset-sm-2 col-sm-10"> <div class="offset-sm-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<nga-checkbox>Remember me</nga-checkbox> <nb-checkbox>Remember me</nb-checkbox>
</div> </div>
</div> </div>
</div> </div>
@ -193,7 +193,7 @@
</div> </div>
</div> </div>
</form> </form>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
</div> </div>
</div> </div>

4
src/app/pages/forms/forms.module.ts
View file

@ -1,6 +1,6 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgaCheckboxModule } from '@akveo/nga-theme'; import { NbCheckboxModule } from '@nebular/theme';
import { SharedModule } from '../../shared.module'; import { SharedModule } from '../../shared.module';
@ -11,7 +11,7 @@ import { FormsRoutingModule, routedComponents } from './forms-routing.module';
SharedModule, SharedModule,
FormsRoutingModule, FormsRoutingModule,
NgbModule, NgbModule,
NgaCheckboxModule, NbCheckboxModule,
], ],
declarations: [ declarations: [
...routedComponents, ...routedComponents,

12
src/app/pages/maps/bubble/bubble-map.component.scss
View file

@ -1,17 +1,17 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
$card-header-border: 1px; $card-header-border: 1px;
nga-card-body { nb-card-body {
padding: nga-theme(card-padding) 0 0 0; padding: nb-theme(card-padding) 0 0 0;
} }
.echarts { .echarts {
width: 100%; width: 100%;
height: calc(#{nga-theme(card-height-xlarge)} - (#{nga-theme(card-padding) * 2}) - height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) -
(#{nga-theme(card-header-font-size)} * #{nga-theme(card-line-height)}) - (#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) -
#{$card-header-border} - #{nga-theme(card-padding)}); #{$card-header-border} - #{nb-theme(card-padding)});
} }
} }

14
src/app/pages/maps/bubble/bubble-map.component.ts
View file

@ -1,16 +1,16 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme'; import { NbThemeService } from '@nebular/theme';
@Component({ @Component({
selector: 'ngx-bubble-map', selector: 'ngx-bubble-map',
styleUrls: ['./bubble-map.component.scss'], styleUrls: ['./bubble-map.component.scss'],
template: ` template: `
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-header>Bubble Maps</nga-card-header> <nb-card-header>Bubble Maps</nb-card-header>
<nga-card-body> <nb-card-body>
<div echarts [options]="options" class="echarts"></div> <div echarts [options]="options" class="echarts"></div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class BubbleMapComponent { export class BubbleMapComponent {
@ -23,7 +23,7 @@ export class BubbleMapComponent {
bubbleTheme: any; bubbleTheme: any;
constructor(private theme: NgaThemeService) { constructor(private theme: NbThemeService) {
this.theme.getJsTheme() this.theme.getJsTheme()
.subscribe(config => { .subscribe(config => {

4
src/app/pages/maps/gmaps/gmaps.component.scss
View file

@ -1,8 +1,8 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
nga-card-body { nb-card-body {
padding: 0; padding: 0;
} }

10
src/app/pages/maps/gmaps/gmaps.component.ts
View file

@ -4,14 +4,14 @@ import { Component } from '@angular/core';
selector: 'ngx-gmaps', selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'], styleUrls: ['./gmaps.component.scss'],
template: ` template: `
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-header>Google Maps</nga-card-header> <nb-card-header>Google Maps</nb-card-header>
<nga-card-body> <nb-card-body>
<agm-map [latitude]="lat" [longitude]="lng"> <agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map> </agm-map>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class GmapsComponent { export class GmapsComponent {

8
src/app/pages/maps/leaflet/leaflet.component.scss
View file

@ -1,16 +1,16 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
$card-header-border: 1px; $card-header-border: 1px;
nga-card-body { nb-card-body {
padding: 0; padding: 0;
} }
/deep/ .leaflet-container { /deep/ .leaflet-container {
width: 100%; width: 100%;
height: calc(#{nga-theme(card-height-xlarge)} - (#{nga-theme(card-padding) * 2}) - height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) -
(#{nga-theme(card-header-font-size)} * #{nga-theme(card-line-height)}) - #{$card-header-border}); (#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) - #{$card-header-border});
} }
} }

10
src/app/pages/maps/leaflet/leaflet.component.ts
View file

@ -7,12 +7,12 @@ import 'style-loader!leaflet/dist/leaflet.css';
selector: 'ngx-leaflet', selector: 'ngx-leaflet',
styleUrls: ['./leaflet.component.scss'], styleUrls: ['./leaflet.component.scss'],
template: ` template: `
<nga-card size="xlarge"> <nb-card size="xlarge">
<nga-card-header>Leaflet Maps</nga-card-header> <nb-card-header>Leaflet Maps</nb-card-header>
<nga-card-body> <nb-card-body>
<div leaflet [leafletOptions]="options"></div> <div leaflet [leafletOptions]="options"></div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
`, `,
}) })
export class LeafletComponent { export class LeafletComponent {

18
src/app/pages/pages-menu.ts
View file

@ -1,8 +1,8 @@
import { NgaMenuItem } from '@akveo/nga-theme'; import { NbMenuItem } from '@nebular/theme';
import { List } from 'immutable'; import { List } from 'immutable';
export const MENU_ITEMS: List<NgaMenuItem> = List([{ export const MENU_ITEMS: List<NbMenuItem> = List([{
title: 'Dashboard', title: 'Dashboard',
icon: 'ion ion-ios-home-outline', icon: 'ion ion-ios-home-outline',
link: '/pages/dashboard', link: '/pages/dashboard',
@ -14,7 +14,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
title: 'UI Features', title: 'UI Features',
icon: 'ion ion-ios-keypad-outline', icon: 'ion ion-ios-keypad-outline',
link: '/pages/ui-features', link: '/pages/ui-features',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Buttons', title: 'Buttons',
link: '/pages/ui-features/buttons', link: '/pages/ui-features/buttons',
}, { }, {
@ -39,7 +39,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Forms', title: 'Forms',
icon: 'ion-compose', icon: 'ion-compose',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Form Inputs', title: 'Form Inputs',
link: '/pages/forms/inputs', link: '/pages/forms/inputs',
}, { }, {
@ -49,7 +49,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Components', title: 'Components',
icon: 'ion ion-ios-gear-outline', icon: 'ion ion-ios-gear-outline',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Tree', title: 'Tree',
link: '/pages/components/tree', link: '/pages/components/tree',
}, { }, {
@ -59,7 +59,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Maps', title: 'Maps',
icon: 'ion ion-ios-location-outline', icon: 'ion ion-ios-location-outline',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Google Maps', title: 'Google Maps',
link: '/pages/maps/gmaps', link: '/pages/maps/gmaps',
}, { }, {
@ -72,7 +72,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Charts', title: 'Charts',
icon: 'ion ion-arrow-graph-up-right', icon: 'ion ion-arrow-graph-up-right',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Echarts', title: 'Echarts',
link: '/pages/charts/echarts', link: '/pages/charts/echarts',
}, { }, {
@ -85,7 +85,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Editors', title: 'Editors',
icon: 'ion ion-edit', icon: 'ion ion-edit',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'TinyMCE', title: 'TinyMCE',
link: '/pages/editors/tinymce', link: '/pages/editors/tinymce',
}, { }, {
@ -95,7 +95,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
}, { }, {
title: 'Tables', title: 'Tables',
icon: 'ion-ios-grid-view', icon: 'ion-ios-grid-view',
children: List<NgaMenuItem>([{ children: List<NbMenuItem>([{
title: 'Smart Table', title: 'Smart Table',
link: '/pages/tables/smart-table', link: '/pages/tables/smart-table',
}]), }]),

2
src/app/pages/pages.component.ts
View file

@ -7,7 +7,7 @@ import { MENU_ITEMS } from './pages-menu';
selector: 'ngx-pages', selector: 'ngx-pages',
template: ` template: `
<ngx-sample-layout> <ngx-sample-layout>
<nga-menu [items]="menu"></nga-menu> <nb-menu [items]="menu"></nb-menu>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</ngx-sample-layout> </ngx-sample-layout>
`, `,

12
src/app/pages/tables/smart-table/smart-table.component.html
View file

@ -1,10 +1,10 @@
<nga-card> <nb-card>
<nga-card-header> <nb-card-header>
Smart Table Smart Table
</nga-card-header> </nb-card-header>
<nga-card-body> <nb-card-body>
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"> <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
</ng2-smart-table> </ng2-smart-table>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>

24
src/app/pages/ui-features/buttons/action-groups/action-groups.component.html
View file

@ -2,16 +2,16 @@
<div class="action-groups-header"> <div class="action-groups-header">
<span>Action Groups</span> <span>Action Groups</span>
</div> </div>
<nga-actions size="medium"> <nb-actions size="medium">
<nga-action icon="ion-navicon"></nga-action> <nb-action icon="ion-navicon"></nb-action>
<nga-action> <nb-action>
<nga-search type="rotate-layout"></nga-search> <nb-search type="rotate-layout"></nb-search>
</nga-action> </nb-action>
<nga-action icon="ion-ios-email-outline"></nga-action> <nb-action icon="ion-ios-email-outline"></nb-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action> <nb-action disabled icon="ion-ios-bell-outline"></nb-action>
<nga-action> <nb-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user> <nb-user [menu]="userMenu" name="Han Solo"></nb-user>
</nga-action> </nb-action>
<nga-action icon="ion-ios-gear-outline"></nga-action> <nb-action icon="ion-ios-gear-outline"></nb-action>
</nga-actions> </nb-actions>
</div> </div>

6
src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss
View file

@ -1,7 +1,7 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@import '~@akveo/nga-theme/components/card/card.component.theme'; @import '~@nebular/theme/components/card/card.component.theme';
@include nga-install-component() { @include nb-install-component() {
.action-groups { .action-groups {
display: flex; display: flex;
} }
@ -9,6 +9,6 @@
.action-groups-header { .action-groups-header {
flex: 1; flex: 1;
@include nga-card-header(); @include nb-card-header();
} }
} }

10
src/app/pages/ui-features/buttons/block-level-buttons/block-level-buttons.component.html
View file

@ -1,6 +1,6 @@
<nga-card> <nb-card>
<nga-card-header>Block Level Buttons</nga-card-header> <nb-card-header>Block Level Buttons</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="row block-level-buttons"> <div class="row block-level-buttons">
<div class="col-md-12"> <div class="col-md-12">
<div class="btn-group btn-group-full-width" role="group"> <div class="btn-group btn-group-full-width" role="group">
@ -12,5 +12,5 @@
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button> <button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>

10
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -1,6 +1,6 @@
<nga-card> <nb-card>
<nga-card-header>Button Groups</nga-card-header> <nb-card-header>Button Groups</nb-card-header>
<nga-card-body> <nb-card-body>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="example-container toggle-types"> <div class="example-container toggle-types">
@ -120,5 +120,5 @@
</div> </div>
</div> </div>
</div> </div>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>

2
src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss
View file

@ -1,6 +1,6 @@
@import '../../../../@theme/styles/variables'; @import '../../../../@theme/styles/variables';
@include nga-install-component() { @include nb-install-component() {
.toolbars-container { .toolbars-container {
display: flex; display: flex;

12
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -4,14 +4,14 @@
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons> <ngx-shape-buttons></ngx-shape-buttons>
<nga-card> <nb-card>
<ngx-action-groups></ngx-action-groups> <ngx-action-groups></ngx-action-groups>
</nga-card> </nb-card>
<nga-card> <nb-card>
<nga-card-body> <nb-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group> <ngx-labeled-actions-group></ngx-labeled-actions-group>
</nga-card-body> </nb-card-body>
</nga-card> </nb-card>
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<ngx-dropdown-buttons></ngx-dropdown-buttons> <ngx-dropdown-buttons></ngx-dropdown-buttons>

Some files were not shown because too many files have changed in this diff Show more