mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-09-21 21:40:49 +02:00
fix(demo): replace @akveo with @nebular
This commit is contained in:
Alexander Zhukov
parent
b772882cd6
commit
210c6f2355
129 changed files with 1010 additions and 1010 deletions
|
|
@ -1 +1 @@
|
|||
# nga-demo
|
||||
# ngx-admin
|
||||
|
|
|
|||
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "nga-demo",
|
||||
"name": "ngx-admin",
|
||||
"version": "2.0.0-alpha.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "nga-demo",
|
||||
"name": "ngx-admin",
|
||||
"version": "2.0.0-alpha.0",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { CommonModule } from '@angular/common';
|
|||
import { throwIfAlreadyLoaded } from './module-import-guard';
|
||||
import { DataModule } from './data/data.module';
|
||||
|
||||
const NGA_CORE_PROVIDERS = [
|
||||
const NB_CORE_PROVIDERS = [
|
||||
...DataModule.forRoot().providers,
|
||||
];
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ export class CoreModule {
|
|||
return <ModuleWithProviders>{
|
||||
ngModule: CoreModule,
|
||||
providers: [
|
||||
...NGA_CORE_PROVIDERS,
|
||||
...NB_CORE_PROVIDERS,
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
a {
|
||||
padding: 0.4rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
transition: color ease-out 0.1s;
|
||||
|
||||
&:hover {
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
|
@ -19,18 +19,18 @@
|
|||
align-items: center;
|
||||
|
||||
.navigation {
|
||||
padding-right: nga-theme(padding);
|
||||
padding-right: nb-theme(padding);
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding: 0 nga-theme(padding);
|
||||
padding: 0 nb-theme(padding);
|
||||
font-size: 1.75rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
border-left: 1px solid nga-theme(separator);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
border-left: 1px solid nb-theme(separator);
|
||||
|
||||
span {
|
||||
font-weight: nga-theme(font-weight-normal);
|
||||
font-weight: nb-theme(font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
import { NgaMenuService, NgaSidebarService } from '@akveo/nga-theme';
|
||||
import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
|
||||
import { NbMenuService, NbSidebarService } from '@nebular/theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { UserService } from '../../../@core/data/users.service';
|
||||
|
||||
@Component({
|
||||
|
|
@ -18,21 +18,21 @@ import { UserService } from '../../../@core/data/users.service';
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<nga-actions
|
||||
<nb-actions
|
||||
size="medium"
|
||||
class="header-container"
|
||||
[class.right]="position === 'normal'"
|
||||
[class.left]="position === 'inverse'">
|
||||
<nga-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nga-action>
|
||||
<nga-action>
|
||||
<nga-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nga-user>
|
||||
</nga-action>
|
||||
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
||||
<nga-action icon="ion-ios-email-outline"></nga-action>
|
||||
<nga-action>
|
||||
<nga-search type="rotate-layout"></nga-search>
|
||||
</nga-action>
|
||||
</nga-actions>
|
||||
<nb-action icon="ion-ios-gear-outline" (click)="toggleSettings()"></nb-action>
|
||||
<nb-action>
|
||||
<nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action disabled icon="ion-ios-bell-outline"></nb-action>
|
||||
<nb-action icon="ion-ios-email-outline"></nb-action>
|
||||
<nb-action>
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
`,
|
||||
})
|
||||
export class HeaderComponent implements OnInit {
|
||||
|
|
@ -51,9 +51,9 @@ export class HeaderComponent implements OnInit {
|
|||
},
|
||||
];
|
||||
|
||||
constructor(private sidebarService: NgaSidebarService,
|
||||
private menuService: NgaMenuService,
|
||||
private themeService: NgaThemeService,
|
||||
constructor(private sidebarService: NbSidebarService,
|
||||
private menuService: NbMenuService,
|
||||
private themeService: NbThemeService,
|
||||
private userService: UserService) {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
.settings-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -11,10 +11,10 @@
|
|||
a {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
color: nga-theme(color-white);
|
||||
color: nb-theme(color-white);
|
||||
|
||||
&.selected {
|
||||
color: nga-theme(color-success);
|
||||
color: nb-theme(color-success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,28 +5,28 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
template: `
|
||||
<nga-layout>
|
||||
<nga-layout-header fixed>
|
||||
<nb-layout>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nga-layout-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nga-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<nb-sidebar-header>
|
||||
<button class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</button>
|
||||
</nga-sidebar-header>
|
||||
<ng-content select="nga-menu"></ng-content>
|
||||
</nga-sidebar>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nga-layout-column>
|
||||
<nb-layout-column>
|
||||
<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>
|
||||
</nga-layout-footer>
|
||||
</nga-layout>
|
||||
</nb-layout-footer>
|
||||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class OneColumnLayoutComponent {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
nga-sidebar.settings-sidebar {
|
||||
nb-sidebar.settings-sidebar {
|
||||
width: 7rem;
|
||||
/deep/ .main-container {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Component, Input, OnDestroy } from '@angular/core';
|
||||
import { List } from 'immutable';
|
||||
import { NgaMenuItem } from '@akveo/nga-theme';
|
||||
import { NbMenuItem } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { StateService } from '../../../@core/data/state.service';
|
||||
|
|
@ -10,52 +10,52 @@ import { StateService } from '../../../@core/data/state.service';
|
|||
selector: 'ngx-sample-layout',
|
||||
styleUrls: ['./sample.layout.scss'],
|
||||
template: `
|
||||
<nga-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nga-layout-header fixed>
|
||||
<nb-layout [center]="layout.id === 'center-column'" windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<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"
|
||||
responsive
|
||||
[right]="sidebar.id === 'right'">
|
||||
<nga-sidebar-header>
|
||||
<nb-sidebar-header>
|
||||
<button class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</button>
|
||||
</nga-sidebar-header>
|
||||
<ng-content select="nga-menu"></ng-content>
|
||||
</nga-sidebar>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nga-layout-column>
|
||||
<nb-layout-column>
|
||||
<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'">
|
||||
<nga-menu [items]="subMenu"></nga-menu>
|
||||
</nga-layout-column>
|
||||
<nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-column right class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nga-menu [items]="subMenu"></nga-menu>
|
||||
</nga-layout-column>
|
||||
<nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
|
||||
<nb-menu [items]="subMenu"></nb-menu>
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-footer fixed>
|
||||
<nb-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nga-layout-footer>
|
||||
</nb-layout-footer>
|
||||
|
||||
<nga-sidebar class="settings-sidebar"
|
||||
<nb-sidebar class="settings-sidebar"
|
||||
tag="settings-sidebar"
|
||||
state="collapsed"
|
||||
fixed
|
||||
[right]="sidebar.id !== 'right'">
|
||||
<ngx-theme-settings></ngx-theme-settings>
|
||||
</nga-sidebar>
|
||||
</nga-layout>
|
||||
</nb-sidebar>
|
||||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class SampleLayoutComponent implements OnDestroy {
|
||||
|
||||
subMenu: List<NgaMenuItem> = List(
|
||||
subMenu: List<NbMenuItem> = List(
|
||||
[
|
||||
{
|
||||
title: 'PAGE LEVEL MENU',
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,34 +5,34 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-three-columns-layout',
|
||||
styleUrls: ['./three-columns.layout.scss'],
|
||||
template: `
|
||||
<nga-layout>
|
||||
<nga-layout-header fixed>
|
||||
<nb-layout>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nga-layout-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nga-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header>
|
||||
<button class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</button>
|
||||
</nga-sidebar-header>
|
||||
<ng-content select="nga-menu"></ng-content>
|
||||
</nga-sidebar>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nga-layout-column class="small">
|
||||
</nga-layout-column>
|
||||
<nb-layout-column class="small">
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-column right>
|
||||
<nb-layout-column right>
|
||||
<ng-content select="router-outlet"></ng-content>
|
||||
</nga-layout-column>
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-column class="small">
|
||||
</nga-layout-column>
|
||||
<nb-layout-column class="small">
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-footer fixed>
|
||||
<nb-layout-footer fixed>
|
||||
<ngx-footer></ngx-footer>
|
||||
</nga-layout-footer>
|
||||
</nga-layout>
|
||||
</nb-layout-footer>
|
||||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class ThreeColumnsLayoutComponent {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
&.compacted {
|
||||
|
||||
/deep/ nga-sidebar-header {
|
||||
/deep/ nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,32 +5,32 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-two-columns-layout',
|
||||
styleUrls: ['./two-columns.layout.scss'],
|
||||
template: `
|
||||
<nga-layout>
|
||||
<nga-layout-header fixed>
|
||||
<nb-layout>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nga-layout-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nga-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nga-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header>
|
||||
<button class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</button>
|
||||
</nga-sidebar-header>
|
||||
<ng-content select="nga-menu"></ng-content>
|
||||
</nga-sidebar>
|
||||
</nb-sidebar-header>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
<nga-layout-column class="small">
|
||||
</nga-layout-column>
|
||||
<nb-layout-column class="small">
|
||||
</nb-layout-column>
|
||||
|
||||
<nga-layout-column right>
|
||||
<nb-layout-column right>
|
||||
<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>
|
||||
</nga-layout-footer>
|
||||
</nb-layout-footer>
|
||||
|
||||
</nga-layout>
|
||||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class TwoColumnsLayoutComponent {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// any global, non-component styles go here
|
||||
}
|
||||
|
||||
.nga-theme-cosmic {
|
||||
.nb-theme-cosmic {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
@import 'variables';
|
||||
|
||||
// framework component themes (styles tied to theme variables)
|
||||
@import '~@akveo/nga-theme/styles/globals';
|
||||
@import '~@akveo/nga-auth/styles/all';
|
||||
@import '~@nebular/theme/styles/globals';
|
||||
@import '~@nebular/auth/styles/all';
|
||||
|
||||
// custom global styles
|
||||
@import 'global';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nga-install() {
|
||||
@include nga-theme-global();
|
||||
@include nga-auth-global();
|
||||
@include nb-install() {
|
||||
@include nb-theme-global();
|
||||
@include nb-auth-global();
|
||||
@include ngx-global-theme();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
// nga theming framework
|
||||
@import '~@akveo/nga-theme/styles/theming';
|
||||
// nga our of the box themes
|
||||
@import '~@akveo/nga-theme/styles/themes';
|
||||
// @nebular theming framework
|
||||
@import '~@nebular/theme/styles/theming';
|
||||
// @nebular our of the box themes
|
||||
@import '~@nebular/theme/styles/themes';
|
||||
|
||||
// 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
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
), default, default);
|
||||
|
||||
$nga-themes: nga-register-theme((
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
layout-content-width: 1400px,
|
||||
), cosmic, cosmic);
|
||||
|
||||
$nga-themes: nga-register-theme((
|
||||
$nb-themes: nb-register-theme((
|
||||
// app wise variables for each theme
|
||||
sidebar-header-gap: 2rem,
|
||||
sidebar-header-height: initial,
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@ import { CommonModule } from '@angular/common';
|
|||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import {
|
||||
NgaActionsModule,
|
||||
NgaCardModule,
|
||||
NgaLayoutModule,
|
||||
NgaMenuModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaSearchModule,
|
||||
NgaSidebarModule,
|
||||
NgaTabsetModule,
|
||||
NgaThemeModule,
|
||||
NgaUserModule,
|
||||
} from '@akveo/nga-theme';
|
||||
NbActionsModule,
|
||||
NbCardModule,
|
||||
NbLayoutModule,
|
||||
NbMenuModule,
|
||||
NbRouteTabsetModule,
|
||||
NbSearchModule,
|
||||
NbSidebarModule,
|
||||
NbTabsetModule,
|
||||
NbThemeModule,
|
||||
NbUserModule,
|
||||
} from '@nebular/theme';
|
||||
|
||||
import {
|
||||
FooterComponent,
|
||||
|
|
@ -34,16 +34,16 @@ import { COSMIC_THEME } from './styles/theme.cosmic';
|
|||
|
||||
const BASE_MODULES = [CommonModule, FormsModule, ReactiveFormsModule];
|
||||
|
||||
const NGA_MODULES = [
|
||||
NgaCardModule,
|
||||
NgaLayoutModule,
|
||||
NgaTabsetModule,
|
||||
NgaRouteTabsetModule,
|
||||
NgaMenuModule,
|
||||
NgaUserModule,
|
||||
NgaActionsModule,
|
||||
NgaSearchModule,
|
||||
NgaSidebarModule,
|
||||
const NB_MODULES = [
|
||||
NbCardModule,
|
||||
NbLayoutModule,
|
||||
NbTabsetModule,
|
||||
NbRouteTabsetModule,
|
||||
NbMenuModule,
|
||||
NbUserModule,
|
||||
NbActionsModule,
|
||||
NbSearchModule,
|
||||
NbSidebarModule,
|
||||
];
|
||||
|
||||
const COMPONENTS = [
|
||||
|
|
@ -60,28 +60,28 @@ const COMPONENTS = [
|
|||
|
||||
const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
|
||||
|
||||
const NGA_THEME_PROVIDERS = [
|
||||
...NgaThemeModule.forRoot(
|
||||
const NB_THEME_PROVIDERS = [
|
||||
...NbThemeModule.forRoot(
|
||||
{
|
||||
name: 'default',
|
||||
},
|
||||
[DEFAULT_THEME, COSMIC_THEME],
|
||||
).providers,
|
||||
...NgaSidebarModule.forRoot().providers,
|
||||
...NgaSidebarModule.forRoot().providers,
|
||||
...NgaMenuModule.forRoot().providers,
|
||||
...NbSidebarModule.forRoot().providers,
|
||||
...NbSidebarModule.forRoot().providers,
|
||||
...NbMenuModule.forRoot().providers,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [...BASE_MODULES, ...NGA_MODULES],
|
||||
exports: [...BASE_MODULES, ...NGA_MODULES, ...COMPONENTS, ...PIPES],
|
||||
imports: [...BASE_MODULES, ...NB_MODULES],
|
||||
exports: [...BASE_MODULES, ...NB_MODULES, ...COMPONENTS, ...PIPES],
|
||||
declarations: [...COMPONENTS, ...PIPES],
|
||||
})
|
||||
export class ThemeModule {
|
||||
static forRoot(): ModuleWithProviders {
|
||||
return <ModuleWithProviders>{
|
||||
ngModule: ThemeModule,
|
||||
providers: [...NGA_THEME_PROVIDERS],
|
||||
providers: [...NB_THEME_PROVIDERS],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-bar-horizontal',
|
||||
|
|
@ -26,7 +26,7 @@ export class ChartjsBarHorizontalComponent {
|
|||
chartType: string = 'horizontalBar';
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-bar',
|
||||
|
|
@ -29,7 +29,7 @@ export class ChartjsBarComponent {
|
|||
];
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-line',
|
||||
|
|
@ -30,7 +30,7 @@ export class ChartjsLineComponent {
|
|||
chatyType: string = 'line';
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-multiple-xaxis',
|
||||
|
|
@ -94,7 +94,7 @@ export class ChartjsMultipleXaxisComponent {
|
|||
];
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-pie',
|
||||
|
|
@ -24,7 +24,7 @@ export class ChartjsPieComponent {
|
|||
chartData: number[] = [300, 500, 100];
|
||||
chartOptions: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-chartjs-radar',
|
||||
|
|
@ -24,7 +24,7 @@ export class ChartjsRadarComponent {
|
|||
chartOptions: any;
|
||||
chartData: any[];
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const chartjs: any = config.variables.chartjs;
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Pie</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-pie></ngx-chartjs-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Bar</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-bar></ngx-chartjs-bar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Line</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Line</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-line></ngx-chartjs-line>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Multiple x-axis</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Multiple x-axis</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar Horizontal</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Bar Horizontal</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Radar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Radar</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-chartjs-radar></ngx-chartjs-radar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-advanced-pie',
|
||||
|
|
@ -29,7 +29,7 @@ export class D3AdvancedPieComponent {
|
|||
view: any[] = [700, 400];
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).advancedPie,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-area-stack',
|
||||
|
|
@ -74,7 +74,7 @@ export class D3AreaStackComponent {
|
|||
yAxisLabel = 'Population';
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).areaStack,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-bar',
|
||||
|
|
@ -44,7 +44,7 @@ export class D3BarComponent {
|
|||
yAxisLabel = 'Population';
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).bar,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-line',
|
||||
|
|
@ -71,7 +71,7 @@ export class D3LineComponent {
|
|||
yAxisLabel = 'Population';
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).line,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-pie',
|
||||
|
|
@ -39,7 +39,7 @@ export class D3PieComponent {
|
|||
yAxisLabel = 'Population';
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).pie,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-d3-polar',
|
||||
|
|
@ -84,7 +84,7 @@ export class D3PolarComponent {
|
|||
yAxisLabel = 'Population';
|
||||
colorScheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colorScheme = {
|
||||
domain: (<any>config.variables.d3).polar,
|
||||
|
|
|
|||
|
|
@ -1,50 +1,50 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Pie</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-pie></ngx-d3-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Bar</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-bar></ngx-d3-bar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Line</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Line</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-line></ngx-d3-line>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Advanced Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Advanced Pie</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-advanced-pie></ngx-d3-advanced-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Area Chart</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Area Chart</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-area-stack></ngx-d3-area-stack>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Polar Chart</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Polar Chart</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-d3-polar></ngx-d3-polar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-area-stack',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsAreaStackComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-bar-animation',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsBarAnimationComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
const xAxisData = [];
|
||||
const data1 = [];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-bar',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsBarComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-line',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsLineComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-multiple-xaxis',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsMultipleXaxisComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-pie',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsPieComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-echarts-radar',
|
||||
|
|
@ -10,7 +10,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
|
|||
export class EchartsRadarComponent {
|
||||
options: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const echarts: any = config.variables.echarts;
|
||||
|
|
|
|||
|
|
@ -1,58 +1,58 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Pie</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Pie</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-pie></ngx-echarts-pie>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Bar</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-bar></ngx-echarts-bar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Line</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Line</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-line></ngx-echarts-line>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Multiple x-axis</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Multiple x-axis</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Area Stack</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Area Stack</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-area-stack></ngx-echarts-area-stack>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Bar Animation</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Bar Animation</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-bar-animation></ngx-echarts-bar-animation>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<nga-card size="large">
|
||||
<nga-card-header>Radar</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="large">
|
||||
<nb-card-header>Radar</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-echarts-radar></ngx-echarts-radar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
ngx-echarts-pie,
|
||||
ngx-echarts-bar,
|
||||
ngx-echarts-line {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgaCheckboxModule } from '@akveo/nga-theme';
|
||||
import { NbCheckboxModule } from '@nebular/theme';
|
||||
|
||||
import { TreeModule } from 'ng2-tree';
|
||||
import { ToasterModule } from 'angular2-toaster';
|
||||
|
|
@ -14,7 +14,7 @@ import { ComponentsRoutingModule, routedComponents } from './components-routing.
|
|||
ComponentsRoutingModule,
|
||||
TreeModule,
|
||||
ToasterModule,
|
||||
NgaCheckboxModule,
|
||||
NbCheckboxModule,
|
||||
],
|
||||
declarations: [
|
||||
...routedComponents,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Toaster configuration
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<toaster-container [toasterconfig]="config"></toaster-container>
|
||||
|
||||
<div class="row">
|
||||
|
|
@ -66,17 +66,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div><nga-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nga-checkbox></div>
|
||||
<div><nga-checkbox [(ngModel)]="isHideOnClick">Hide on click</nga-checkbox></div>
|
||||
<div><nga-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nga-checkbox></div>
|
||||
<div><nga-checkbox [(ngModel)]="isCloseButton">Close button</nga-checkbox></div>
|
||||
<div><nb-checkbox [(ngModel)]="isNewestOnTop">Newest on top</nb-checkbox></div>
|
||||
<div><nb-checkbox [(ngModel)]="isHideOnClick">Hide on click</nb-checkbox></div>
|
||||
<div><nb-checkbox [(ngModel)]="isDuplicatesPrevented">Prevent arising of duplicate toast</nb-checkbox></div>
|
||||
<div><nb-checkbox [(ngModel)]="isCloseButton">Close button</nb-checkbox></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-success" (click)="openRandomToast()">Random toast</button>
|
||||
<button class="btn btn-danger" (click)="clearToasts()">Clear all toasts</button>
|
||||
</nga-card-footer>
|
||||
</nga-card>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card-footer {
|
||||
nb-card-footer {
|
||||
padding-bottom: 0.25rem;
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>Tree</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Tree</nb-card-header>
|
||||
<nb-card-body>
|
||||
<tree [tree]="tree"></tree>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<nga-card size="large">
|
||||
<nga-tabset fullWidth>
|
||||
<nga-tab tabTitle="Contacts">
|
||||
<nb-card size="large">
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab tabTitle="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>
|
||||
</div>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Recent">
|
||||
</nb-tab>
|
||||
<nb-tab tabTitle="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>
|
||||
</div>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@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() {
|
||||
nga-tabset {
|
||||
@include nb-install-component() {
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nga-tab {
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
|
|
@ -18,9 +18,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
}
|
||||
|
||||
.i-contact {
|
||||
|
|
@ -30,24 +30,24 @@
|
|||
|
||||
.time {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
nga-user /deep/ {
|
||||
nb-user /deep/ {
|
||||
.info-container {
|
||||
margin-left: 0.875rem;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.user-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<nga-card size="xsmall" class="solar-card">
|
||||
<nga-card-header>Solar Energy Consumption</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="xsmall" class="solar-card">
|
||||
<nb-card-header>Solar Energy Consumption</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-solar [chartValue]="72"></ngx-solar>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<ngx-team></ngx-team>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import '../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
.solar-card nga-card-header {
|
||||
@include nb-install-component() {
|
||||
.solar-card nb-card-header {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
|
||||
import { NbTabsetModule, NbUserModule } from '@nebular/theme';
|
||||
import { AngularEchartsModule } from 'ngx-echarts';
|
||||
|
||||
import { SharedModule } from '../../shared.module';
|
||||
|
|
@ -22,8 +22,8 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
|||
|
||||
@NgModule({
|
||||
imports: [
|
||||
NgaTabsetModule,
|
||||
NgaUserModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
SharedModule,
|
||||
AngularEchartsModule,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
declare const echarts: any;
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ export class ElectricityChartComponent {
|
|||
|
||||
option: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<nga-card size="large">
|
||||
<nb-card size="large">
|
||||
<div class="consumption-table">
|
||||
<div class="table-header">
|
||||
<div>Electricity</div>
|
||||
<div class="subtitle">Consumption</div>
|
||||
</div>
|
||||
|
||||
<nga-tabset fullWidth>
|
||||
<nga-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
|
||||
<div class="stats-month" *ngFor="let month of year.months">
|
||||
<div>
|
||||
<span class="month">{{ month.month }}</span>
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
<b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD
|
||||
</div>
|
||||
</div>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
|
|
@ -53,4 +53,4 @@
|
|||
</div>
|
||||
<ngx-electricity-chart></ngx-electricity-chart>
|
||||
</div>
|
||||
</nga-card>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
@import '~@akveo/nga-theme/components/card/card.component.theme';
|
||||
@import '~@akveo/nga-theme/styles/global/typography/typography';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card {
|
||||
nb-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -15,22 +15,22 @@
|
|||
width: 20rem;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
box-shadow: nga-theme(card-shadow);
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@include nga-card-header();
|
||||
@include nb-card-header();
|
||||
font-size: 1.5rem;
|
||||
|
||||
.subtitle {
|
||||
color: nga-theme(color-fg);
|
||||
font-family: nga-theme(font-primary);
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-primary);
|
||||
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;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -42,13 +42,13 @@
|
|||
}
|
||||
|
||||
ul li a {
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
ul li.active {
|
||||
background-color: nga-theme(color-primary);
|
||||
border-radius: nga-theme(radius);
|
||||
background-color: nb-theme(color-primary);
|
||||
border-radius: nb-theme(radius);
|
||||
|
||||
a {
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
nga-tab {
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -71,16 +71,16 @@
|
|||
padding: 1rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid nga-theme(separator);
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
}
|
||||
|
||||
.month {
|
||||
display: inline-block;
|
||||
width: 2.75rem;
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.delta {
|
||||
|
|
@ -115,13 +115,13 @@
|
|||
|
||||
.results {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
|
||||
b {
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@
|
|||
.chart-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-image: nga-theme(radial-gradient);
|
||||
background-image: nb-theme(radial-gradient);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -151,24 +151,24 @@
|
|||
|
||||
.subtitle {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 2rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
|
||||
&.dollar {
|
||||
color: nga-theme(color-fg-highlight);
|
||||
color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.player {
|
||||
flex: 1;
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
display: flex;
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
padding: 1.25rem;
|
||||
|
||||
.player-menu {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
background-position: center;
|
||||
height: 94px;
|
||||
width: 30%;
|
||||
box-shadow: nga-theme(card-shadow);
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
}
|
||||
|
||||
.artist-details {
|
||||
|
|
@ -43,16 +43,16 @@
|
|||
margin-left: 1.25rem;
|
||||
|
||||
.artist-name {
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-size: 1.5rem;
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.song-name {
|
||||
font-family: nga-theme(font-main);
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1.125rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -86,12 +86,12 @@
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 4rem;
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
padding: 2.5rem 0;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
|
||||
.prev {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,16 +99,16 @@
|
|||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 4rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
padding: 2rem 0;
|
||||
border-bottom: 1px solid nga-theme(separator);
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
|
||||
.minus:hover {
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.plus:hover {
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.volume-items {
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
.volume-item::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
background-color: nga-theme(separator);
|
||||
background-color: nb-theme(separator);
|
||||
height: 30%;
|
||||
border-radius: 1rem;
|
||||
transition: 0.3s;
|
||||
|
|
@ -166,8 +166,8 @@
|
|||
}
|
||||
|
||||
.btn.active {
|
||||
background-color: nga-theme(card-bg);
|
||||
color: nga-theme(color-fg);
|
||||
background-color: nb-theme(card-bg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn:first-child {
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
|
||||
.btn:last-child {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: nga-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
:host {
|
||||
display: block;
|
||||
align-items: center;
|
||||
|
|
@ -81,9 +81,9 @@
|
|||
.rooms-card-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
ngx-room-selector {
|
||||
width: 65%;
|
||||
background-image: nga-theme(radial-gradient);
|
||||
background-image: nb-theme(radial-gradient);
|
||||
}
|
||||
|
||||
ngx-player {
|
||||
flex: 1;
|
||||
box-shadow: nga-theme(card-shadow);
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
}
|
||||
|
||||
nga-card {
|
||||
nb-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-rooms',
|
||||
styleUrls: ['./rooms.component.scss'],
|
||||
template: `
|
||||
<nga-card size="large">
|
||||
<nb-card size="large">
|
||||
<ngx-room-selector></ngx-room-selector>
|
||||
<ngx-player></ngx-player>
|
||||
</nga-card>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class RoomsComponent {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<nga-card size="xlarge">
|
||||
<nga-card-header>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-header>
|
||||
<div class="cameras-card-header">
|
||||
<span class="cameras-card-title">Security Cameras</span>
|
||||
<span class="cameras-filter">
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="cameras single-view" *ngIf="isSingleView">
|
||||
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
||||
<span>{{ selectedCamera.title }}</span>
|
||||
|
|
@ -24,21 +24,21 @@
|
|||
<span>{{ camera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
<nga-card-footer>
|
||||
<nga-actions size="medium" fullWidth>
|
||||
<nga-action>
|
||||
</nb-card-body>
|
||||
<nb-card-footer>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-action>
|
||||
<i class="ion-ios-pause-outline"></i><span>Pause</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-navicon"></i><span>Log View</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-ios-search"></i><span>Search</span>
|
||||
</nga-action>
|
||||
<nga-action>
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="ion-ios-gear-outline"></i><span>Setup</span>
|
||||
</nga-action>
|
||||
</nga-actions>
|
||||
</nga-card-footer>
|
||||
</nga-card>
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-card-header {
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nga-card-footer {
|
||||
nb-card-footer {
|
||||
padding: 1rem 0;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -33,21 +33,21 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
border-left: 1px solid nga-theme(separator);
|
||||
border-left: 1px solid nb-theme(separator);
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
border-top-right-radius: nga-theme(card-border-radius);
|
||||
border-top-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
|
||||
a.active {
|
||||
background-color: nga-theme(color-bg-active);
|
||||
color: nga-theme(color-fg-highlight);
|
||||
text-shadow: 0 0 12px rgba(nga-theme(color-fg-highlight), 0.4);
|
||||
background-color: nb-theme(color-bg-active);
|
||||
color: nb-theme(color-fg-highlight);
|
||||
text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -101,17 +101,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
nga-action {
|
||||
nb-action {
|
||||
i {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nga-theme(font-family-secondary);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-family-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
declare const echarts: any;
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ export class SolarComponent {
|
|||
this.option.series[1].data[0].value = value;
|
||||
}
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const solarTheme: any = config.variables.solar;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@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() {
|
||||
nga-card {
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
overflow: visible;
|
||||
|
||||
$bevel: btn-hero-bevel(nga-theme(card-bg));
|
||||
$bevel: btn-hero-bevel(nb-theme(card-bg));
|
||||
$shadow: btn-hero-shadow();
|
||||
box-shadow: $bevel, $shadow;
|
||||
transition: all 0.1s ease-out;
|
||||
|
||||
$border-radius: nga-theme(card-border-radius);
|
||||
$border-radius: nb-theme(card-border-radius);
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
font-size: 4em;
|
||||
border-radius: $border-radius 0 0 $border-radius;
|
||||
transition: all 0.1s ease-out, color 0s;
|
||||
color: nga-theme(color-white);
|
||||
color: nb-theme(color-white);
|
||||
|
||||
&.primary {
|
||||
@include btn-hero-primary-gradient();
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten(nga-theme(card-bg), 5%);
|
||||
background: lighten(nb-theme(card-bg), 5%);
|
||||
|
||||
.icon-container {
|
||||
&.primary {
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
background: nga-theme(card-bg);
|
||||
background: nb-theme(card-bg);
|
||||
|
||||
.icon-container {
|
||||
&.primary, &.success, &.info, &.warning {
|
||||
|
|
@ -86,10 +86,10 @@
|
|||
}
|
||||
|
||||
&.off {
|
||||
color: nga-theme(card-fg);
|
||||
color: nb-theme(card-fg);
|
||||
|
||||
.icon-container {
|
||||
color: nga-theme(card-fg);
|
||||
color: nb-theme(card-fg);
|
||||
|
||||
&.primary, &.success, &.info, &.warning {
|
||||
box-shadow: none;
|
||||
|
|
@ -98,10 +98,10 @@
|
|||
}
|
||||
|
||||
.details {
|
||||
border-left: 1px solid nga-theme(separator);
|
||||
border-left: 1px solid nb-theme(separator);
|
||||
}
|
||||
.title {
|
||||
color: nga-theme(card-fg);
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -115,17 +115,17 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.5rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(card-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(card-fg-heading);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
color: nga-theme(card-fg);
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
|
|||
selector: 'ngx-status-card',
|
||||
styleUrls: ['./status-card.component.scss'],
|
||||
template: `
|
||||
<nga-card (click)="on = !on" [ngClass]="{'off': !on}">
|
||||
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
|
||||
<div class="icon-container {{ type }}">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
|
@ -13,7 +13,7 @@ import { Component, Input } from '@angular/core';
|
|||
<div class="title">{{ title }}</div>
|
||||
<div class="status">{{ on ? 'ON' : 'OFF' }}</div>
|
||||
</div>
|
||||
</nga-card>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class StatusCardComponent {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<nga-card size="medium">
|
||||
<nb-card size="medium">
|
||||
<div class="team-photo">
|
||||
<a href="mailto:contact@akveo.com">
|
||||
<button type="button" class="btn btn-success btn-icon team-link">
|
||||
|
|
@ -32,4 +32,4 @@
|
|||
<i class="ion-social-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nga-card>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.team-photo {
|
||||
background-image: url('~/assets/images/team.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
border-top-left-radius: nga-theme(card-border-radius);
|
||||
border-top-right-radius: nga-theme(card-border-radius);
|
||||
border-top-left-radius: nb-theme(card-border-radius);
|
||||
border-top-right-radius: nb-theme(card-border-radius);
|
||||
|
||||
flex: 1;
|
||||
max-height: 50%;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
bottom: -2rem;
|
||||
right: 1rem;
|
||||
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;
|
||||
|
||||
.team-title {
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
|
@ -38,14 +38,14 @@
|
|||
|
||||
.team-subtitle {
|
||||
margin-bottom: 1rem;
|
||||
color: nga-theme(color-fg);
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.team-bio {
|
||||
text-align: justify;
|
||||
color: nga-theme(color-fg-text);
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
color: nb-theme(color-fg-text);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@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;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
height: 88%;
|
||||
top: 13%;
|
||||
left: 6%;
|
||||
background-color: lighten(nga-theme(layout-bg), 2%);
|
||||
background-color: lighten(nb-theme(layout-bg), 2%);
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
position: absolute;
|
||||
width: 5.25rem;
|
||||
height: 5.25rem;
|
||||
background-color: nga-theme(card-bg);
|
||||
background-color: nb-theme(card-bg);
|
||||
border-radius: 50%;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
|
|
@ -42,24 +42,24 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: nga-theme(card-shadow);
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
cursor: pointer;
|
||||
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);
|
||||
transition: all 0.1s ease-out;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(nga-theme(card-bg), 5%);
|
||||
background-color: lighten(nb-theme(card-bg), 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(nga-theme(card-bg), 5%);
|
||||
background-color: darken(nb-theme(card-bg), 5%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<nga-card size="large">
|
||||
<nga-tabset fullWidth>
|
||||
<nb-card size="large">
|
||||
<nb-tabset fullWidth>
|
||||
|
||||
<nga-tab tabTitle="Temperature">
|
||||
<nb-tab tabTitle="Temperature">
|
||||
|
||||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
|
||||
|
|
@ -34,9 +34,9 @@
|
|||
<input type="radio" value="fan"/><i class="ion-ios-loop"></i>
|
||||
</label>
|
||||
</div>
|
||||
</nga-tab>
|
||||
</nb-tab>
|
||||
|
||||
<nga-tab tabTitle="Humidity">
|
||||
<nb-tab tabTitle="Humidity">
|
||||
|
||||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
|
||||
|
|
@ -66,6 +66,6 @@
|
|||
<input type="radio" value="fan"/><i class="ion-ios-loop"></i>
|
||||
</label>
|
||||
</div>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card {
|
||||
background-image: nga-theme(radial-gradient);
|
||||
nb-card {
|
||||
background-image: nb-theme(radial-gradient);
|
||||
}
|
||||
|
||||
nga-tabset {
|
||||
nb-tabset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
nga-tab.content-active {
|
||||
nb-tab.content-active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
|
||||
.value {
|
||||
position: relative;
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 4rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
|
||||
&.temperature::before {
|
||||
position: absolute;
|
||||
|
|
@ -60,20 +60,20 @@
|
|||
content: '%';
|
||||
bottom: 0.5rem;
|
||||
right: -2.5rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: nga-theme(color-fg);
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
&.off {
|
||||
.value {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
letter-spacing: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
|
|
@ -97,15 +97,15 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-color: nga-theme(form-control-border-color);
|
||||
border-color: nb-theme(form-control-border-color);
|
||||
height: 4.5rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.active {
|
||||
border-color: nga-theme(color-fg-highlight);
|
||||
box-shadow: 0 2px 12px 0 rgba(nga-theme(color-fg-highlight), 0.25);
|
||||
background-color: rgba(nga-theme(color-fg-highlight), 0.25);
|
||||
border-color: nb-theme(color-fg-highlight);
|
||||
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
|
||||
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-temperature',
|
||||
|
|
@ -18,7 +18,7 @@ export class TemperatureComponent {
|
|||
|
||||
colors: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
this.colors = config.variables;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
declare const echarts: any;
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ export class TrafficChartComponent {
|
|||
types = ['week', 'month', 'year'];
|
||||
option: any = {};
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
this.theme.getJsTheme().subscribe(config => {
|
||||
|
||||
const trafficTheme: any = config.variables.traffic;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card-header {
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -10,13 +10,13 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ canvas {
|
||||
border-bottom-left-radius: nga-theme(card-border-radius);
|
||||
border-bottom-right-radius: nga-theme(card-border-radius);
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
|
||||
.echart {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-traffic',
|
||||
styleUrls: ['./traffic.component.scss'],
|
||||
template: `
|
||||
<nga-card size="xsmall">
|
||||
<nga-card-header>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card-header>
|
||||
<span>Traffic Consumption</span>
|
||||
<div class="ghost-dropdown" ngbDropdown>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</nga-card-header>
|
||||
<nga-card-body class="p-0">
|
||||
</nb-card-header>
|
||||
<nb-card-body class="p-0">
|
||||
<ngx-traffic-chart></ngx-traffic-chart>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class TrafficComponent {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<nga-card size="medium">
|
||||
<nga-card-body>
|
||||
<nb-card size="medium">
|
||||
<nb-card-body>
|
||||
<div class="location">
|
||||
<span>Minsk</span>
|
||||
</div>
|
||||
|
|
@ -56,5 +56,5 @@
|
|||
<span class="temperature">21°</span>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card {
|
||||
background-image: nga-theme(radial-gradient);
|
||||
nb-card {
|
||||
background-image: nb-theme(radial-gradient);
|
||||
}
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.location {
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: nga-theme(font-main);
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.daily-forecast {
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
|
||||
.temperature {
|
||||
font-size: 5rem;
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
font-family: nb-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -66,16 +66,16 @@
|
|||
text-align: center;
|
||||
|
||||
.parameter-name {
|
||||
font-family: nga-theme(font-main);
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.parameter-value {
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
font-family: nb-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -93,9 +93,9 @@
|
|||
|
||||
.caption {
|
||||
text-transform: uppercase;
|
||||
font-family: nga-theme(font-secondary);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
font-family: nb-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
|
|
@ -105,9 +105,9 @@
|
|||
}
|
||||
|
||||
.temperature {
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-weight: nga-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@ import 'ckeditor';
|
|||
@Component({
|
||||
selector: 'ngx-ckeditor',
|
||||
template: `
|
||||
<nga-card size="xlarge">
|
||||
<nga-card-body>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-body>
|
||||
<ckeditor [config]="{ extraPlugins: 'divarea', height: '515' }"></ckeditor>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class CKEditorComponent {
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { Component } from '@angular/core';
|
|||
@Component({
|
||||
selector: 'ngx-tiny-mce-page',
|
||||
template: `
|
||||
<nga-card size="xlarge">
|
||||
<nga-card-body>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-body>
|
||||
<ngx-tiny-mce></ngx-tiny-mce>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class TinyMCEComponent {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>Default Inputs</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Default Inputs</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Project" class="form-control" />
|
||||
</div>
|
||||
|
|
@ -39,11 +39,11 @@
|
|||
<div class="input-group input-group-lg">
|
||||
<input type="text" placeholder="Large Input" class="form-control" />
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>Input Groups</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>Input Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon success">@</span>
|
||||
<input type="text" class="form-control" placeholder="Username" />
|
||||
|
|
@ -84,11 +84,11 @@
|
|||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>Selects</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>Selects</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<label>Simple Select</label>
|
||||
<select class="form-control">
|
||||
|
|
@ -109,13 +109,13 @@
|
|||
<option>Item 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>Input Styles</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Input Styles</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="input-group input-group-border-only">
|
||||
<input type="text" placeholder="Border Only" class="form-control" />
|
||||
</div>
|
||||
|
|
@ -125,11 +125,11 @@
|
|||
<div class="input-group input-group-fill-only">
|
||||
<input type="text" placeholder="Fill Only" class="form-control">
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>Validation States</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>Validation States</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Success" class="form-control form-control-success">
|
||||
</div>
|
||||
|
|
@ -140,9 +140,9 @@
|
|||
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes">
|
||||
<nga-checkbox status="success">Checkbox with Success</nga-checkbox>
|
||||
<nga-checkbox status="warning">Checkbox with Warning</nga-checkbox>
|
||||
<nga-checkbox status="danger">Checkbox with Danger</nga-checkbox>
|
||||
<nb-checkbox status="success">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger">Checkbox with Danger</nb-checkbox>
|
||||
</div>
|
||||
<div class="form-group has-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">
|
||||
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>Checkboxes & Radios</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes">
|
||||
<label class="custom-control custom-checkbox">
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<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">
|
||||
<input type="radio" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
|
|
@ -202,10 +202,10 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-body class="demo-rating">
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-body class="demo-rating">
|
||||
<span class="rating-header">Rating</span>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="starRate" max=5>
|
||||
|
|
@ -229,7 +229,7 @@
|
|||
</ngb-rating>
|
||||
<span class="current-rate">{{ heartRate | number : '1.1' }}</span>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -46,26 +46,26 @@
|
|||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nga-theme(color-fg);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
font-family: nga-theme(font-secondary);
|
||||
font-weight: nga-theme(font-weight-bolder);
|
||||
color: nga-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.current-rate {
|
||||
font-size: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
color: nga-theme(color-fg-heading);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Inline form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form class="form-inline">
|
||||
<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">
|
||||
|
|
@ -12,19 +12,19 @@
|
|||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>Using the Grid</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Using the Grid</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
<label class="col-sm-2">Checkbox</label>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<nga-checkbox>Check me out</nga-checkbox>
|
||||
<nb-checkbox>Check me out</nb-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -78,13 +78,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Form without labels
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Recipients">
|
||||
|
|
@ -97,15 +97,15 @@
|
|||
</div>
|
||||
<button type="submit" class="btn btn-success">Send</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Basic form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail1">Email address</label>
|
||||
|
|
@ -116,17 +116,17 @@
|
|||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<nga-checkbox>Check me out</nga-checkbox>
|
||||
<nb-checkbox>Check me out</nb-checkbox>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger">Submit</button>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Block form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
|
|
@ -156,17 +156,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
Horizontal form
|
||||
</nga-card-header>
|
||||
<nga-card-body>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
<div class="form-group row">
|
||||
<div class="offset-sm-2 col-sm-10">
|
||||
<div class="checkbox">
|
||||
<nga-checkbox>Remember me</nga-checkbox>
|
||||
<nb-checkbox>Remember me</nb-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { NgaCheckboxModule } from '@akveo/nga-theme';
|
||||
import { NbCheckboxModule } from '@nebular/theme';
|
||||
|
||||
import { SharedModule } from '../../shared.module';
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ import { FormsRoutingModule, routedComponents } from './forms-routing.module';
|
|||
SharedModule,
|
||||
FormsRoutingModule,
|
||||
NgbModule,
|
||||
NgaCheckboxModule,
|
||||
NbCheckboxModule,
|
||||
],
|
||||
declarations: [
|
||||
...routedComponents,
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
$card-header-border: 1px;
|
||||
|
||||
nga-card-body {
|
||||
padding: nga-theme(card-padding) 0 0 0;
|
||||
nb-card-body {
|
||||
padding: nb-theme(card-padding) 0 0 0;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: calc(#{nga-theme(card-height-xlarge)} - (#{nga-theme(card-padding) * 2}) -
|
||||
(#{nga-theme(card-header-font-size)} * #{nga-theme(card-line-height)}) -
|
||||
#{$card-header-border} - #{nga-theme(card-padding)});
|
||||
height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) -
|
||||
(#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) -
|
||||
#{$card-header-border} - #{nb-theme(card-padding)});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgaThemeService } from '@akveo/nga-theme';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-bubble-map',
|
||||
styleUrls: ['./bubble-map.component.scss'],
|
||||
template: `
|
||||
<nga-card size="xlarge">
|
||||
<nga-card-header>Bubble Maps</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-header>Bubble Maps</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div echarts [options]="options" class="echarts"></div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class BubbleMapComponent {
|
||||
|
|
@ -23,7 +23,7 @@ export class BubbleMapComponent {
|
|||
|
||||
bubbleTheme: any;
|
||||
|
||||
constructor(private theme: NgaThemeService) {
|
||||
constructor(private theme: NbThemeService) {
|
||||
|
||||
this.theme.getJsTheme()
|
||||
.subscribe(config => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-gmaps',
|
||||
styleUrls: ['./gmaps.component.scss'],
|
||||
template: `
|
||||
<nga-card size="xlarge">
|
||||
<nga-card-header>Google Maps</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-header>Google Maps</nb-card-header>
|
||||
<nb-card-body>
|
||||
<agm-map [latitude]="lat" [longitude]="lng">
|
||||
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
|
||||
</agm-map>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class GmapsComponent {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import '../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
$card-header-border: 1px;
|
||||
|
||||
nga-card-body {
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-container {
|
||||
width: 100%;
|
||||
height: calc(#{nga-theme(card-height-xlarge)} - (#{nga-theme(card-padding) * 2}) -
|
||||
(#{nga-theme(card-header-font-size)} * #{nga-theme(card-line-height)}) - #{$card-header-border});
|
||||
height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) -
|
||||
(#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) - #{$card-header-border});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ import 'style-loader!leaflet/dist/leaflet.css';
|
|||
selector: 'ngx-leaflet',
|
||||
styleUrls: ['./leaflet.component.scss'],
|
||||
template: `
|
||||
<nga-card size="xlarge">
|
||||
<nga-card-header>Leaflet Maps</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card size="xlarge">
|
||||
<nb-card-header>Leaflet Maps</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div leaflet [leafletOptions]="options"></div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class LeafletComponent {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { NgaMenuItem } from '@akveo/nga-theme';
|
||||
import { NbMenuItem } from '@nebular/theme';
|
||||
|
||||
import { List } from 'immutable';
|
||||
|
||||
export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
||||
export const MENU_ITEMS: List<NbMenuItem> = List([{
|
||||
title: 'Dashboard',
|
||||
icon: 'ion ion-ios-home-outline',
|
||||
link: '/pages/dashboard',
|
||||
|
|
@ -14,7 +14,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
title: 'UI Features',
|
||||
icon: 'ion ion-ios-keypad-outline',
|
||||
link: '/pages/ui-features',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Buttons',
|
||||
link: '/pages/ui-features/buttons',
|
||||
}, {
|
||||
|
|
@ -39,7 +39,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Forms',
|
||||
icon: 'ion-compose',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Form Inputs',
|
||||
link: '/pages/forms/inputs',
|
||||
}, {
|
||||
|
|
@ -49,7 +49,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Components',
|
||||
icon: 'ion ion-ios-gear-outline',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Tree',
|
||||
link: '/pages/components/tree',
|
||||
}, {
|
||||
|
|
@ -59,7 +59,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Maps',
|
||||
icon: 'ion ion-ios-location-outline',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Google Maps',
|
||||
link: '/pages/maps/gmaps',
|
||||
}, {
|
||||
|
|
@ -72,7 +72,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Charts',
|
||||
icon: 'ion ion-arrow-graph-up-right',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Echarts',
|
||||
link: '/pages/charts/echarts',
|
||||
}, {
|
||||
|
|
@ -85,7 +85,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Editors',
|
||||
icon: 'ion ion-edit',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'TinyMCE',
|
||||
link: '/pages/editors/tinymce',
|
||||
}, {
|
||||
|
|
@ -95,7 +95,7 @@ export const MENU_ITEMS: List<NgaMenuItem> = List([{
|
|||
}, {
|
||||
title: 'Tables',
|
||||
icon: 'ion-ios-grid-view',
|
||||
children: List<NgaMenuItem>([{
|
||||
children: List<NbMenuItem>([{
|
||||
title: 'Smart Table',
|
||||
link: '/pages/tables/smart-table',
|
||||
}]),
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { MENU_ITEMS } from './pages-menu';
|
|||
selector: 'ngx-pages',
|
||||
template: `
|
||||
<ngx-sample-layout>
|
||||
<nga-menu [items]="menu"></nga-menu>
|
||||
<nb-menu [items]="menu"></nb-menu>
|
||||
<router-outlet></router-outlet>
|
||||
</ngx-sample-layout>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<nga-card>
|
||||
<nga-card-header>
|
||||
<nb-card>
|
||||
<nb-card-header>
|
||||
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>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="action-groups-header">
|
||||
<span>Action Groups</span>
|
||||
</div>
|
||||
<nga-actions size="medium">
|
||||
<nga-action icon="ion-navicon"></nga-action>
|
||||
<nga-action>
|
||||
<nga-search type="rotate-layout"></nga-search>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-email-outline"></nga-action>
|
||||
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
|
||||
<nga-action>
|
||||
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
|
||||
</nga-action>
|
||||
<nga-action icon="ion-ios-gear-outline"></nga-action>
|
||||
</nga-actions>
|
||||
<nb-actions size="medium">
|
||||
<nb-action icon="ion-navicon"></nb-action>
|
||||
<nb-action>
|
||||
<nb-search type="rotate-layout"></nb-search>
|
||||
</nb-action>
|
||||
<nb-action icon="ion-ios-email-outline"></nb-action>
|
||||
<nb-action disabled icon="ion-ios-bell-outline"></nb-action>
|
||||
<nb-action>
|
||||
<nb-user [menu]="userMenu" name="Han Solo"></nb-user>
|
||||
</nb-action>
|
||||
<nb-action icon="ion-ios-gear-outline"></nb-action>
|
||||
</nb-actions>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@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 {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -9,6 +9,6 @@
|
|||
.action-groups-header {
|
||||
flex: 1;
|
||||
|
||||
@include nga-card-header();
|
||||
@include nb-card-header();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Block Level Buttons</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Block Level Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row block-level-buttons">
|
||||
<div class="col-md-12">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<nga-card>
|
||||
<nga-card-header>Button Groups</nga-card-header>
|
||||
<nga-card-body>
|
||||
<nb-card>
|
||||
<nb-card-header>Button Groups</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="example-container toggle-types">
|
||||
|
|
@ -120,5 +120,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../../../@theme/styles/variables';
|
||||
|
||||
@include nga-install-component() {
|
||||
@include nb-install-component() {
|
||||
|
||||
.toolbars-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
</div>
|
||||
<div class="col-lg-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
<nga-card>
|
||||
<nb-card>
|
||||
<ngx-action-groups></ngx-action-groups>
|
||||
</nga-card>
|
||||
<nga-card>
|
||||
<nga-card-body>
|
||||
</nb-card>
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<ngx-labeled-actions-group></ngx-labeled-actions-group>
|
||||
</nga-card-body>
|
||||
</nga-card>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue