mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-15 12:38:06 +01:00
feat: update to Angular 8, Nebular 4 (#2114)
This commit is contained in:
Dmitry Nehaychik
Sergey Andrievskiy
parent
537e6a77b0
commit
e9600b4a07
323 changed files with 7421 additions and 14161 deletions
|
|
@ -1,33 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ButtonsComponent } from './buttons/buttons.component';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: BootstrapComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'inputs',
|
||||
component: FormInputsComponent,
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
component: ButtonsComponent,
|
||||
},
|
||||
{
|
||||
path: 'modal',
|
||||
component: ModalsComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class BootstrapRoutingModule { }
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
||||
import { BootstrapRoutingModule } from './bootstrap-routing.module';
|
||||
import { ModalsComponent } from './modals/modals.component';
|
||||
import { ModalComponent } from './modals/modal/modal.component';
|
||||
import { BootstrapComponent } from './bootstrap.component';
|
||||
import { ButtonsModule } from './buttons/buttons.module';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
|
||||
const COMPONENTS = [
|
||||
BootstrapComponent,
|
||||
ModalsComponent,
|
||||
ModalComponent,
|
||||
FormInputsComponent,
|
||||
];
|
||||
|
||||
const ENTRY_COMPONENTS = [
|
||||
ModalComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
BootstrapRoutingModule,
|
||||
ButtonsModule,
|
||||
],
|
||||
declarations: [
|
||||
...COMPONENTS,
|
||||
],
|
||||
entryComponents: [
|
||||
...ENTRY_COMPONENTS,
|
||||
],
|
||||
})
|
||||
export class BootstrapModule { }
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<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">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider btn-fixed">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Block Button</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-block">Block Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-block-level-buttons',
|
||||
templateUrl: './block-level-buttons.component.html',
|
||||
})
|
||||
export class BlockLevelButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
<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">
|
||||
<div class="container-title">Toggle Types</div>
|
||||
<div [(ngModel)]="radioModel" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-primary" [class.active]="checkboxModel.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="checkboxModel.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container toolbars-container">
|
||||
<div class="pagination-container">
|
||||
<div class="container-title">Pagination</div>
|
||||
<div class="btn-group btn-group-toggle btn-outline-toggle-group" data-toggle="buttons"
|
||||
[(ngModel)]="paginationModel" ngbRadioGroup>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="1"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="2"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="3"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="4"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success">
|
||||
<input ngbButton type="radio" [value]="5"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-toolbar-container">
|
||||
<div class="container-title">Icon Toolbar</div>
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.one">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.one"> 1
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.two">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.two"> 2
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.three">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.three"> 3
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.four">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.four"> 4
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-success" [class.active]="iconToolbarModel.five">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="iconToolbarModel.five"> 5
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title divided-button-group">Divided Button Group</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width btn-divided-checkbox-group "
|
||||
data-toggle="buttons">
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"> <i
|
||||
class="nb-arrow-thin-down"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.tuesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.tuesday"> <i
|
||||
class="nb-arrow-thin-up"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.wednesday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.wednesday"> <i class="nb-arrow-thin-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.thursday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.thursday"> <i
|
||||
class="nb-arrow-thin-right"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.friday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.friday"> <i class="nb-arrow-left"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.saturday">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedCheckboxModel.saturday"> <i
|
||||
class="nb-arrow-right"></i>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<div class="container-title">Divided Button Group</div>
|
||||
<div class="row">
|
||||
<div [(ngModel)]="dividedButtonGroupOne" ngbRadioGroup
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width col-md-12">
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-outline-primary">
|
||||
<input ngbButton type="radio" value="right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group btn-group-toggle btn-divided-group btn-group-full-width" data-toggle="buttons">
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.left"
|
||||
[class.focus]="dividedButtonGroupTwo.left">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.left"> Left
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.middle"
|
||||
[class.focus]="dividedButtonGroupTwo.middle">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.middle"> Middle
|
||||
</label>
|
||||
<label ngbButtonLabel
|
||||
class="btn btn-primary"
|
||||
[class.active]="dividedButtonGroupTwo.right"
|
||||
[class.focus]="dividedButtonGroupTwo.right">
|
||||
<input ngbButton type="checkbox" [(ngModel)]="dividedButtonGroupTwo.right"> Right
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
.toolbars-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-toolbar-container {
|
||||
.btn-group > .btn {
|
||||
padding-left: 1.125rem;
|
||||
padding-right: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-types {
|
||||
.btn-toggle-radio-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.divided-button-group {
|
||||
.btn-divided-checkbox-group {
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.example-container > div {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container > .btn-divided-checkbox-group {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> label {
|
||||
flex-basis: 10%;
|
||||
@include nb-ltr(margin, 0 0.25rem 0.5rem 0);
|
||||
@include nb-rtl(margin, 0 0 0.5rem 0.25rem);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.btn {
|
||||
padding: 0.75rem 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-button-groups',
|
||||
styleUrls: ['./button-groups.component.scss'],
|
||||
templateUrl: './button-groups.component.html',
|
||||
})
|
||||
export class ButtonGroupsComponent {
|
||||
|
||||
radioModel = 'left';
|
||||
|
||||
checkboxModel = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
|
||||
dividedCheckboxModel = {
|
||||
monday: true,
|
||||
tuesday: true,
|
||||
wednesday: false,
|
||||
thursday: false,
|
||||
friday: false,
|
||||
saturday: false,
|
||||
};
|
||||
|
||||
paginationModel = 1;
|
||||
|
||||
iconToolbarModel = {
|
||||
one: false,
|
||||
two: false,
|
||||
three: true,
|
||||
four: false,
|
||||
five: false,
|
||||
};
|
||||
|
||||
dividedButtonGroupOne = 'left';
|
||||
|
||||
dividedButtonGroupTwo = {
|
||||
left: false,
|
||||
middle: false,
|
||||
right: false,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<ngx-hero-buttons></ngx-hero-buttons>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-shape-buttons></ngx-shape-buttons>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-5">
|
||||
<ngx-dropdown-buttons></ngx-dropdown-buttons>
|
||||
<ngx-icon-buttons></ngx-icon-buttons>
|
||||
</div>
|
||||
<div class="col-lg-7">
|
||||
<ngx-button-groups></ngx-button-groups>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-12 col-xxxl-6">
|
||||
<ngx-size-buttons></ngx-size-buttons>
|
||||
<ngx-default-buttons></ngx-default-buttons>
|
||||
<ngx-block-level-buttons></ngx-block-level-buttons>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
/deep/ {
|
||||
$button-size: 50px;
|
||||
|
||||
.container-title {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: nb-theme(color-fg-header);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 0.75rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.btn-demo {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.state-container {
|
||||
display: flex;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
width: $button-size;
|
||||
height: $button-size;
|
||||
border-radius: nb-theme(btn-border-radius);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-radius: nb-theme(btn-semi-round-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.state-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
height: $button-size;
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
@include nb-ltr(padding-right, 0);
|
||||
@include nb-rtl(padding-left, 0);
|
||||
}
|
||||
|
||||
.example-container .container-btn {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.block-level-buttons .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
|
||||
span {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
/deep/.icon-buttons .icon-button-examples {
|
||||
button {
|
||||
@include nb-ltr(margin-right, 1rem);
|
||||
@include nb-rtl(margin-left, 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-default-buttons /deep/ nb-card-header {
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
ngx-block-level-buttons /deep/ {
|
||||
.btn-primary {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-buttons',
|
||||
styleUrls: ['./buttons.component.scss'],
|
||||
templateUrl: './buttons.component.html',
|
||||
})
|
||||
export class ButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { ThemeModule } from '../../../@theme/theme.module';
|
||||
import { DefaultButtonsComponent } from './default-buttons/default-buttons.component';
|
||||
import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
|
||||
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
|
||||
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
|
||||
import { ButtonsComponent } from './buttons.component';
|
||||
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
|
||||
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
|
||||
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
|
||||
import { IconButtonsComponent } from './icon-buttons/icon-buttons.component';
|
||||
|
||||
const components = [
|
||||
ButtonsComponent,
|
||||
DefaultButtonsComponent,
|
||||
HeroButtonComponent,
|
||||
ShapeButtonsComponent,
|
||||
SizeButtonsComponent,
|
||||
DropdownButtonsComponent,
|
||||
BlockLevelButtonsComponent,
|
||||
ButtonGroupsComponent,
|
||||
IconButtonsComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
],
|
||||
exports: [
|
||||
...components,
|
||||
],
|
||||
declarations: [
|
||||
...components,
|
||||
],
|
||||
providers: [],
|
||||
})
|
||||
export class ButtonsModule { }
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>
|
||||
<span>Default Buttons</span>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
{{ selectedView.title }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let v of buttonsViews" (click)="this.selectedView = v">{{ v.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-md-4" *ngFor="let b of buttons[selectedView.key]">
|
||||
<div class="container-title">
|
||||
<span>{{ b.containerTitle }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
|
||||
</div>
|
||||
<div class="{{ b.container }}">
|
||||
<div class="state-container">
|
||||
<div class="state-value original"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Default</span>
|
||||
<span class="subheader">{{ b.default }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value hover"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Hover</span>
|
||||
<span class="subheader">14% white</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value active"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Active</span>
|
||||
<span class="subheader">14% black</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.dropdown {
|
||||
flex-basis: 30%;
|
||||
min-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-primary-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-primary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-primary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.primary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-primary-bg);
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-success-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-success-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-success-active();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-success-bg);
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-warning-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-warning-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-warning-active();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-warning-bg);
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-info-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-info-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-info-active();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-info-bg);
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.original {
|
||||
background-color: nb-theme(btn-danger-bg);
|
||||
}
|
||||
.hover {
|
||||
@include btn-danger-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-danger-active();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-danger-bg);
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.original {
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.hover {
|
||||
@include btn-secondary-hover();
|
||||
}
|
||||
.active {
|
||||
@include btn-secondary-active();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container.outline .original {
|
||||
background-color: transparent;
|
||||
border: 2px solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-default-buttons',
|
||||
styleUrls: ['./default-buttons.component.scss'],
|
||||
templateUrl: './default-buttons.component.html',
|
||||
})
|
||||
export class DefaultButtonsComponent {
|
||||
|
||||
buttonsViews = [{
|
||||
title: 'Default Buttons',
|
||||
key: 'default',
|
||||
}, {
|
||||
title: 'Outline Buttons',
|
||||
key: 'outline',
|
||||
}];
|
||||
|
||||
selectedView = this.buttonsViews[0];
|
||||
|
||||
buttons = {
|
||||
'default': [
|
||||
{
|
||||
class: 'btn-primary',
|
||||
container: 'primary-container',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-warning',
|
||||
container: 'warning-container',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-success',
|
||||
container: 'success-container',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-danger',
|
||||
container: 'danger-container',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-secondary',
|
||||
container: 'secondary-container',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
|
||||
'outline': [
|
||||
{
|
||||
class: 'btn-outline-primary',
|
||||
container: 'primary-container outline',
|
||||
containerTitle: 'Primary Button',
|
||||
title: 'Primary',
|
||||
default: '#7659ff',
|
||||
}, {
|
||||
class: 'btn-outline-warning',
|
||||
container: 'warning-container outline',
|
||||
containerTitle: 'Warning Button',
|
||||
title: 'Warning',
|
||||
default: '#ffcb17',
|
||||
}, {
|
||||
class: 'btn-outline-success',
|
||||
container: 'success-container outline',
|
||||
containerTitle: 'Success Button',
|
||||
title: 'Success',
|
||||
default: '#00d977',
|
||||
}, {
|
||||
class: 'btn-outline-info',
|
||||
container: 'info-container',
|
||||
containerTitle: 'Info Button',
|
||||
title: 'Info',
|
||||
default: '#0088ff',
|
||||
}, {
|
||||
class: 'btn-outline-danger',
|
||||
container: 'danger-container outline',
|
||||
containerTitle: 'Danger Button',
|
||||
title: 'Danger',
|
||||
default: '#ff386a',
|
||||
}, {
|
||||
class: 'btn-outline-secondary',
|
||||
container: 'secondary-container outline',
|
||||
containerTitle: 'Default Button',
|
||||
title: 'Default',
|
||||
default: '#bdbaff',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Dropdowns</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="dropdown btn-group" ngbDropdown>
|
||||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||||
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown" placement="top" ngbDropdown>
|
||||
<button class="btn btn-outline-primary" type="button" ngbDropdownToggle>
|
||||
Dropup
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button class="btn btn-primary" type="button" ngbDropdownToggle>
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Icon Button</li>
|
||||
<li class="dropdown-item">Hero Button</li>
|
||||
<li class="dropdown-item">Default</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
text-align: center;
|
||||
|
||||
.dropdown, .dropup, .btn-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dropdown-buttons',
|
||||
styleUrls: ['./dropdown-button.component.scss'],
|
||||
templateUrl: './dropdown-button.component.html',
|
||||
})
|
||||
|
||||
export class DropdownButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Hero Buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row">
|
||||
<div class="example-container col-sm-6 col-md-4 col-xl-3 col-xxxl-2" *ngFor="let hb of settings">
|
||||
<div class="container-title">
|
||||
<span>{{ hb.title }}</span>
|
||||
</div>
|
||||
<div class="container-btn">
|
||||
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
|
||||
</div>
|
||||
<div class="{{ hb.container }}">
|
||||
<div class="state-container" *ngIf="hb[themeName].border">
|
||||
<div class="state-value border"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Border</span>
|
||||
<span class="subheader">{{ hb[themeName].border }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].color">
|
||||
<div class="state-value color"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Color</span>
|
||||
<span class="subheader">{{ hb[themeName].color }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container" *ngIf="hb[themeName].gradientLeft">
|
||||
<div class="state-value gradient"></div>
|
||||
<div class="state-details">
|
||||
<span class="header">Linear Gradient</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientLeft }}</span>
|
||||
<span class="subheader">{{ hb[themeName].gradientRight }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value bevel" [ngClass]="{ 'none': !hb[themeName].bevel }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].bevel">
|
||||
<span class="header">Bevel</span>
|
||||
<span class="subheader">0 3px 0 0</span>
|
||||
<span class="subheader">{{ hb[themeName].bevel }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].bevel">
|
||||
<span class="header">No Bevel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value shadow" [ngClass]="{ 'none': !hb[themeName].shadow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].shadow">
|
||||
<span class="header">Shadow</span>
|
||||
<span class="subheader">0 4px 10px 0</span>
|
||||
<span class="subheader">{{ hb[themeName].shadow }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].shadow">
|
||||
<span class="header">No Shadow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="state-container">
|
||||
<div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
|
||||
<div class="state-details" *ngIf="hb[themeName].glow">
|
||||
<span class="header">Glow</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.params }}</span>
|
||||
<span class="subheader">{{ hb[themeName].glow.color }}</span>
|
||||
</div>
|
||||
<div class="state-details" *ngIf="!hb[themeName].glow">
|
||||
<span class="header">No Glow</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.none {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: nb-theme(form-control-border-color);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translateY(-50%);
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: nb-theme(btn-hero-shadow);
|
||||
}
|
||||
|
||||
.primary-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-primary-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-primary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-primary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-warning);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-warning-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-warning-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-warning-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.success-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-success);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-success-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-success-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-success-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.info-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-info);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-info-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-info-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-info-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.danger-container {
|
||||
.color {
|
||||
background-color: nb-theme(color-danger);
|
||||
}
|
||||
.gradient {
|
||||
@include btn-hero-danger-gradient();
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-danger-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-danger-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-container {
|
||||
.color {
|
||||
background-color: nb-theme(btn-secondary-bg);
|
||||
}
|
||||
.border {
|
||||
color: nb-theme(btn-secondary-color);
|
||||
border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);
|
||||
}
|
||||
.glow {
|
||||
box-shadow: btn-hero-secondary-glow();
|
||||
}
|
||||
.bevel {
|
||||
box-shadow: btn-hero-secondary-bevel();
|
||||
}
|
||||
}
|
||||
|
||||
.example-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-hero-buttons',
|
||||
styleUrls: ['./hero-buttons.component.scss'],
|
||||
templateUrl: './hero-buttons.component.html',
|
||||
})
|
||||
export class HeroButtonComponent implements OnDestroy {
|
||||
|
||||
themeName = 'default';
|
||||
settings: Array<any>;
|
||||
themeSubscription: Subscription;
|
||||
|
||||
constructor(private themeService: NbThemeService) {
|
||||
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
|
||||
this.themeName = theme.name;
|
||||
this.init(theme.variables);
|
||||
});
|
||||
}
|
||||
|
||||
init(colors: any) {
|
||||
this.settings = [{
|
||||
class: 'btn-hero-primary',
|
||||
container: 'primary-container',
|
||||
title: 'Primary Button',
|
||||
buttonTitle: 'Primary',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.primary,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (115, 161, 255, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
|
||||
gradientRight: colors.primary,
|
||||
bevel: `shade(${colors.primary}, 14%)`,
|
||||
shadow: 'rgba (6, 7, 64, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.primary}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-warning',
|
||||
container: 'warning-container',
|
||||
title: 'Warning Button',
|
||||
buttonTitle: 'Warning',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.warning,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (256, 163, 107, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
|
||||
gradientRight: colors.warning,
|
||||
bevel: `shade(${colors.warning}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.warning}, 5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-success',
|
||||
container: 'success-container',
|
||||
title: 'Success Button',
|
||||
buttonTitle: 'Success',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.success,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (93, 207, 227, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
|
||||
gradientRight: colors.success,
|
||||
bevel: `shade(${colors.success}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.success}, 10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-info',
|
||||
container: 'info-container',
|
||||
title: 'Info Button',
|
||||
buttonTitle: 'Info',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.info,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (186, 127, 236, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
|
||||
gradientRight: colors.info,
|
||||
bevel: `shade(${colors.info}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.info}, -5deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-danger',
|
||||
container: 'danger-container',
|
||||
title: 'Danger Button',
|
||||
buttonTitle: 'Danger',
|
||||
default: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
},
|
||||
corporate: {
|
||||
color: colors.danger,
|
||||
glow: {
|
||||
params: '0 0 20px 0',
|
||||
color: 'rgba (255, 107, 131, 0.5)',
|
||||
},
|
||||
},
|
||||
cosmic: {
|
||||
gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
|
||||
gradientRight: colors.danger,
|
||||
bevel: `shade(${colors.danger}, 14%)`,
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: `adjust-hue(${colors.danger}, -10deg)`,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
class: 'btn-hero-secondary',
|
||||
container: 'secondary-container',
|
||||
title: 'Ghost Button',
|
||||
buttonTitle: 'Ghost',
|
||||
default: {
|
||||
border: '#dadfe6',
|
||||
},
|
||||
corporate: {
|
||||
color: '#edf2f5',
|
||||
},
|
||||
cosmic: {
|
||||
border: colors.primary,
|
||||
bevel: '#665ebd',
|
||||
shadow: 'rgba (33, 7, 77, 0.5)',
|
||||
glow: {
|
||||
params: '0 2px 12px 0',
|
||||
color: 'rgba (146, 141, 255, 1)',
|
||||
},
|
||||
},
|
||||
}];
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.themeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Icon buttons</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row icon-buttons">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary btn-group-icon btn-group-divider">
|
||||
<i class="nb-home"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary">Icon Button</button>
|
||||
</div>
|
||||
<div class="btn-with-icon-example">
|
||||
<button type="button" class="btn btn-primary btn-with-icon">
|
||||
<i class="nb-home"></i>
|
||||
<span>Icon Button</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-outline-primary btn-icon">
|
||||
<i class="nb-layout-centre"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success btn-icon">
|
||||
<i class="nb-layout-default"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-icon">
|
||||
<i class="nb-layout-one-column"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="icon-button-examples">
|
||||
<button type="button" class="btn btn-primary btn-icon">
|
||||
<i class="nb-shuffle"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-success btn-icon">
|
||||
<i class="nb-skip-backward-outline"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon">
|
||||
<i class="nb-skip-forward-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
nb-card-body {
|
||||
div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-with-icon-example {
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.icon-button-examples {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
min-width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button-examples:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-icon-buttons',
|
||||
styleUrls: ['./icon-buttons.component.scss'],
|
||||
templateUrl: './icon-buttons.component.html',
|
||||
})
|
||||
export class IconButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Shapes</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rectangle Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>4px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-rectangle btn-demo">Rectangle</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Semi-round Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>12px</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-semi-round btn-demo">Semi-round</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shape-container">
|
||||
<div class="container-title">
|
||||
<span>Rounded Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>Border radius:</span>
|
||||
<span>round</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-success btn-round btn-demo">Round</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 0 29px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.shape-container {
|
||||
margin: 1.25rem 1.25rem 0;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
span:nth-child(2) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-shape-buttons',
|
||||
styleUrls: ['./shape-buttons.component.scss'],
|
||||
templateUrl: './shape-buttons.component.html',
|
||||
})
|
||||
export class ShapeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<nb-card>
|
||||
<nb-card-header>Button Sizes</nb-card-header>
|
||||
|
||||
<nb-card-body>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Large Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.875rem 1.75rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-lg">Large Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Medium Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.75rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-md">Medium Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.675rem 1.5rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-sm">Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="size-container">
|
||||
<div class="container-title">
|
||||
<span>X-Small Button</span>
|
||||
</div>
|
||||
<div class="subheader">
|
||||
<span>0.5rem 1.25rem</span>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-primary btn-xs">X-Small Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
padding: 0 1.25rem 1.25rem 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.size-container {
|
||||
margin: 1.25rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-size-buttons',
|
||||
styleUrls: ['./size-buttons.component.scss'],
|
||||
templateUrl: './size-buttons.component.html',
|
||||
})
|
||||
export class SizeButtonsComponent {
|
||||
}
|
||||
|
|
@ -1,235 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<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>
|
||||
<div class="row full-name-inputs">
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Nick" class="form-control"/>
|
||||
</div>
|
||||
<div class="col-sm-6 input-group">
|
||||
<input type="text" placeholder="Last Name" class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="password" placeholder="Password" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group has-person-icon">
|
||||
<input type="text" placeholder="With Icon" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-rounded">
|
||||
<input type="text" placeholder="Rounded border" class="form-control"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Project" class="form-control"/>
|
||||
<small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
|
||||
</small>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Disabled input" class="form-control" disabled/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="text" placeholder="Small Input" class="form-control"/>
|
||||
</div>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" placeholder="Large Input" class="form-control"/>
|
||||
</div>
|
||||
</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"/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mail-btn-group">
|
||||
<span class="input-group-prepend">
|
||||
<button class="btn btn-primary btn-icon input-group-text">
|
||||
<i class="ion-ios-email-outline"></i>
|
||||
</button>
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Recipient's username">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary input-group-text">
|
||||
@example.com
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-danger input-group-text">
|
||||
Search
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<div class="dropdown input-group-prepend input-group-btn" ngbDropdown>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" ngbDropdownToggle>
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item">Action</li>
|
||||
<li class="dropdown-item">Another action</li>
|
||||
<li class="dropdown-item">Something else here</li>
|
||||
<div role="separator" class="dropdown-divider"></div>
|
||||
<li class="dropdown-item">Separated link</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</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">
|
||||
<option>Minsk</option>
|
||||
<option>Gomel</option>
|
||||
<option>Brest</option>
|
||||
<option>Grodno</option>
|
||||
<option>Mogilev</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Multiple Select</label>
|
||||
<select multiple class="form-control">
|
||||
<option>Item 1</option>
|
||||
<option>Item 2</option>
|
||||
<option>Item 3</option>
|
||||
<option>Item 4</option>
|
||||
<option>Item 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<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>
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="Default Input" class="form-control">
|
||||
</div>
|
||||
<div class="input-group input-group-fill-only">
|
||||
<input type="text" placeholder="Fill Only" class="form-control">
|
||||
</div>
|
||||
</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>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Warning" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
|
||||
</div>
|
||||
<div class="form-group validation-checkboxes row">
|
||||
<nb-checkbox status="success" class="col-sm-4">Checkbox with Success</nb-checkbox>
|
||||
<nb-checkbox status="warning" class="col-sm-4">Checkbox with Warning</nb-checkbox>
|
||||
<nb-checkbox status="danger" class="col-sm-4">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">
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<input type="text" placeholder="Input with Warning Icon" class="form-control form-control-warning">
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<input type="text" placeholder="Input with Danger Icon" class="form-control form-control-danger">
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
|
||||
<nb-card>
|
||||
<nb-card-header>Checkboxes & Radios</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="row demo-checkboxes-radio">
|
||||
<div class="demo-checkboxes col-sm-4">
|
||||
<nb-checkbox>Checkbox 1</nb-checkbox>
|
||||
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
|
||||
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="b-checkbox">
|
||||
<label class="custom-control-label" for="b-checkbox">Bootstrap Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-radio col-sm-4">
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 1</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" checked>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 2</span>
|
||||
</label>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio">
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Radio 3</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="demo-disabled-checkbox-radio col-sm-4">
|
||||
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
|
||||
<label class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" disabled>
|
||||
<span class="custom-control-indicator"></span>
|
||||
<span class="custom-control-description">Disabled Radio</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-android-star" *ngIf="fill === 100"></i>
|
||||
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ starRate }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<ngb-rating [(rate)]="heartRate" max=5>
|
||||
<ng-template let-fill="fill">
|
||||
<span class="star fill" [class.filled]="fill === 100">
|
||||
<i class="ion-ios-heart" *ngIf="fill === 100"></i>
|
||||
<i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</ngb-rating>
|
||||
<span class="current-rate">{{ heartRate }}</span>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.validation-checkboxes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.custom-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-disabled-checkbox-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-checkboxes-radio {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.demo-rating {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.star {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.filled {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
// TODO: Replace with the card header styles mixin
|
||||
.rating-header {
|
||||
line-height: 2rem;
|
||||
font-size: 1.25rem;
|
||||
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;
|
||||
@include nb-ltr(padding-left, 1rem);
|
||||
@include nb-rtl(padding-right, 1rem);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.full-name-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group.has-person-icon {
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '\F47D';
|
||||
font-family: 'Ionicons';
|
||||
font-size: 2rem;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 1rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
padding: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
ngb-rating {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ngb-rating i {
|
||||
color: nb-theme(color-success);
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
button:not(.btn-icon) {
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-form-inputs',
|
||||
styleUrls: ['./form-inputs.component.scss'],
|
||||
templateUrl: './form-inputs.component.html',
|
||||
})
|
||||
export class FormInputsComponent {
|
||||
|
||||
starRate = 2;
|
||||
heartRate = 4;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modal',
|
||||
template: `
|
||||
<div class="modal-header">
|
||||
<span>{{ modalHeader }}</span>
|
||||
<button class="close" aria-label="Close" (click)="closeModal()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ modalContent }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-md btn-primary" (click)="closeModal()">Save changes</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ModalComponent {
|
||||
|
||||
modalHeader: string;
|
||||
modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
|
||||
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
|
||||
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
|
||||
|
||||
constructor(private activeModal: NgbActiveModal) { }
|
||||
|
||||
closeModal() {
|
||||
this.activeModal.close();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nb-card>
|
||||
<nb-card-header>Modals</nb-card-header>
|
||||
<nb-card-body>
|
||||
<button class="btn btn-success" (click)="showLargeModal()">Large modal</button>
|
||||
<button class="btn btn-warning" (click)="showSmallModal()">Small modal</button>
|
||||
<button class="btn btn-primary" (click)="showStaticModal()">Static modal</button>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
:host {
|
||||
button {
|
||||
@include nb-ltr(margin, 0 0.75rem 2rem 0);
|
||||
@include nb-rtl(margin, 0 0 2rem 0.75rem);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-modals',
|
||||
styleUrls: ['./modals.component.scss'],
|
||||
templateUrl: './modals.component.html',
|
||||
})
|
||||
export class ModalsComponent {
|
||||
|
||||
constructor(private modalService: NgbModal) { }
|
||||
|
||||
showLargeModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Large Modal';
|
||||
}
|
||||
showSmallModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Small Modal';
|
||||
}
|
||||
|
||||
showStaticModal() {
|
||||
const activeModal = this.modalService.open(ModalComponent, {
|
||||
size: 'sm',
|
||||
backdrop: 'static',
|
||||
container: 'nb-layout',
|
||||
});
|
||||
|
||||
activeModal.componentInstance.modalHeader = 'Static modal';
|
||||
activeModal.componentInstance.modalContent = `This is static modal, backdrop click
|
||||
will not close it. Click × or confirmation button to close modal.`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
height: nb-theme(card-height-medium);
|
||||
width: 100%;
|
||||
|
||||
/deep/ chart {
|
||||
::ng-deep chart {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
|
|||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { ChartModule } from 'angular2-chartjs';
|
||||
import { NbCardModule } from '@nebular/theme';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
||||
|
|
@ -49,7 +50,14 @@ const components = [
|
|||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [ThemeModule, ChartsRoutingModule, NgxEchartsModule, NgxChartsModule, ChartModule],
|
||||
imports: [
|
||||
ThemeModule,
|
||||
ChartsRoutingModule,
|
||||
NgxEchartsModule,
|
||||
NgxChartsModule,
|
||||
ChartModule,
|
||||
NbCardModule,
|
||||
],
|
||||
declarations: [...routedComponents, ...components],
|
||||
})
|
||||
export class ChartsModule {}
|
||||
|
|
|
|||
|
|
@ -11,30 +11,36 @@
|
|||
width: 100%;
|
||||
height: nb-theme(card-height-medium);
|
||||
|
||||
/deep/ {
|
||||
::ng-deep {
|
||||
.pie-label {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.grid-line-path {
|
||||
stroke: nb-theme(separator);
|
||||
fill: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
text {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
fill: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
.legend-labels {
|
||||
background: nb-theme(color-bg);
|
||||
background: nb-theme(background-basic-color-2);
|
||||
}
|
||||
.legend-label {
|
||||
color: nb-theme(color-fg-heading);
|
||||
color: nb-theme(text-hint-color);
|
||||
.active .legend-label-text {
|
||||
color: nb-theme(color-fg-heading);
|
||||
color: nb-theme(text-basic-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total-value,
|
||||
.item-value,
|
||||
.item-percent {
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .echart {
|
||||
::ng-deep .echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,23 @@
|
|||
<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
|
||||
<nb-card size="giant">
|
||||
<nb-tabset fullWidth>
|
||||
|
||||
<nb-tab tabTitle="Contacts">
|
||||
<div class="contact" *ngFor="let c of contacts">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<i class="i-contact nb-phone"></i>
|
||||
</div>
|
||||
<nb-list>
|
||||
<nb-list-item class="contact" *ngFor="let c of contacts">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Recent">
|
||||
<div class="contact" *ngFor="let c of recent">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<span class="time">{{ c.time | date: 'shortTime' }}</span>
|
||||
</div>
|
||||
<nb-list>
|
||||
<nb-list-item class="contact" *ngFor="let c of recent">
|
||||
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
|
||||
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nb-tabset {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
::ng-deep ul {
|
||||
// make same size as card header
|
||||
padding-bottom: 1px;
|
||||
::ng-deep .tab-link {
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -18,50 +26,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: nb-theme(color-fg);
|
||||
padding: 1rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid nb-theme(separator);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-bottom-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.i-contact {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
nb-user /deep/ {
|
||||
.info-container {
|
||||
@include nb-ltr(margin-left, 0.875rem);
|
||||
@include nb-rtl(margin-right, 0.875rem);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-size: 1.25rem;
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
|
||||
.user-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { forkJoin } from 'rxjs';
|
||||
|
||||
|
|
@ -16,19 +15,8 @@ export class ContactsComponent implements OnDestroy {
|
|||
|
||||
contacts: any[];
|
||||
recent: any[];
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
|
||||
constructor(private userService: UserData,
|
||||
private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
|
||||
constructor(private userService: UserData) {
|
||||
forkJoin(
|
||||
this.userService.getContacts(),
|
||||
this.userService.getRecentUsers(),
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
||||
<ngx-status-card [title]="statusCard.title"
|
||||
[type]="statusCard.type">
|
||||
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
|
||||
<i [ngClass]="statusCard.iconClass"></i>
|
||||
</ngx-status-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,4 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
/deep/ nb-card.large-card {
|
||||
height: nb-theme(card-height-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export class DashboardComponent implements OnDestroy {
|
|||
default: CardSettings[];
|
||||
cosmic: CardSettings[];
|
||||
corporate: CardSettings[];
|
||||
dark: CardSettings[];
|
||||
} = {
|
||||
default: this.commonStatusCardsSet,
|
||||
cosmic: this.commonStatusCardsSet,
|
||||
|
|
@ -71,9 +72,10 @@ export class DashboardComponent implements OnDestroy {
|
|||
},
|
||||
{
|
||||
...this.coffeeMakerCard,
|
||||
type: 'secondary',
|
||||
type: 'info',
|
||||
},
|
||||
],
|
||||
dark: this.commonStatusCardsSet,
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
|
||||
import {
|
||||
NbActionsModule,
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
||||
import { ThemeModule } from '../../@theme/theme.module';
|
||||
|
|
@ -10,7 +20,6 @@ import { RoomsComponent } from './rooms/rooms.component';
|
|||
import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
|
||||
import { TemperatureComponent } from './temperature/temperature.component';
|
||||
import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
|
||||
import { TeamComponent } from './team/team.component';
|
||||
import { KittenComponent } from './kitten/kitten.component';
|
||||
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
|
||||
import { ElectricityComponent } from './electricity/electricity.component';
|
||||
|
|
@ -20,10 +29,22 @@ import { SolarComponent } from './solar/solar.component';
|
|||
import { PlayerComponent } from './rooms/player/player.component';
|
||||
import { TrafficComponent } from './traffic/traffic.component';
|
||||
import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
FormsModule,
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbTabsetModule,
|
||||
NbActionsModule,
|
||||
NbRadioModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
NgxEchartsModule,
|
||||
],
|
||||
declarations: [
|
||||
|
|
@ -34,7 +55,6 @@ import { TrafficChartComponent } from './traffic/traffic-chart.component';
|
|||
RoomSelectorComponent,
|
||||
TemperatureComponent,
|
||||
RoomsComponent,
|
||||
TeamComponent,
|
||||
KittenComponent,
|
||||
SecurityCamerasComponent,
|
||||
ElectricityComponent,
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
|
|||
position: 'top',
|
||||
backgroundColor: eTheme.tooltipBg,
|
||||
borderColor: eTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: '{c0} kWh',
|
||||
extraCssText: eTheme.tooltipExtraCss,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,57 +1,47 @@
|
|||
<nb-card size="large">
|
||||
<div class="consumption-table">
|
||||
<div class="table-header">
|
||||
<div>Electricity</div>
|
||||
<div class="subtitle">Consumption</div>
|
||||
</div>
|
||||
<nb-card class="cards-container">
|
||||
<nb-card size="large" class="table-card">
|
||||
<nb-card-header>
|
||||
Electricity Consumption
|
||||
</nb-card-header>
|
||||
|
||||
<nb-tabset fullWidth>
|
||||
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
|
||||
<div class="stats-month" *ngFor="let month of year.months">
|
||||
<div>
|
||||
<nb-list>
|
||||
<nb-list-item *ngFor="let month of year.months">
|
||||
<span class="month">{{ month.month }}</span>
|
||||
<span class="delta" [ngClass]="{ 'down': month.down }">{{ month.delta }}</span>
|
||||
</div>
|
||||
<div class="results">
|
||||
<b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD
|
||||
</div>
|
||||
</div>
|
||||
<span>
|
||||
<nb-icon
|
||||
[class.down]="month.down"
|
||||
[class.up]="!month.down"
|
||||
[icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
|
||||
</nb-icon>
|
||||
{{ month.delta }}
|
||||
</span>
|
||||
<span class="results">
|
||||
{{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
|
||||
</span>
|
||||
</nb-list-item>
|
||||
</nb-list>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</div>
|
||||
</nb-card>
|
||||
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<div class="header-stats">
|
||||
<div class="stats-block">
|
||||
<div class="subtitle">Consumed</div>
|
||||
<div>
|
||||
<span class="value">816</span>
|
||||
<span class="unit">kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
<nb-card size="large" class="chart-card">
|
||||
<nb-card-header>
|
||||
<span class="stats">
|
||||
<span class="caption">Consumed</span>
|
||||
<span>816 <span class="caption">kWh</span></span>
|
||||
</span>
|
||||
<span class="stats">
|
||||
<span class="caption">Spent</span>
|
||||
<span>291 <span class="caption">USD</span></span>
|
||||
</span>
|
||||
|
||||
<div class="stats-block currency">
|
||||
<div class="subtitle">Spent</div>
|
||||
<div>
|
||||
<span class="value">291</span>
|
||||
<span class="unit">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nb-select [(selected)]="type" class="type-select">
|
||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
|
||||
<div class="dropdown"
|
||||
[ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
|
||||
ngbDropdown>
|
||||
<button type="button" ngbDropdownToggle class="btn"
|
||||
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
|
||||
</div>
|
||||
</nb-card>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,328 +1,90 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/styles/global/typography/typography';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card {
|
||||
.cards-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.consumption-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 20rem;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-right: 1px solid nb-theme(card-border-color);
|
||||
}
|
||||
.table-card,
|
||||
.chart-card {
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@include nb-card-header();
|
||||
font-size: 1.25rem;
|
||||
|
||||
.subtitle {
|
||||
color: nb-theme(color-fg);
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
.table-card {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
nb-tabset /deep/ {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
ul li.active {
|
||||
position: relative;
|
||||
background-color: nb-theme(layout-bg);
|
||||
border-radius: nb-theme(radius) nb-theme(radius) 0 0;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 2.5px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: nb-theme(color-success);
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
a::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.chart-card {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.stats-month {
|
||||
.chart-card nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: nb-theme(padding);
|
||||
color: nb-theme(color-fg);
|
||||
position: relative;
|
||||
padding-top: nb-theme(card-header-with-select-padding-top);
|
||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
// prevents double border from chart yAxisSplitLine
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
border-top-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
.type-select {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: nb-theme(layout-bg);
|
||||
.stats {
|
||||
margin-right: 1rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 6px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: nb-theme(color-success);
|
||||
border-radius: nb-theme(radius);
|
||||
}
|
||||
}
|
||||
|
||||
.month {
|
||||
display: inline-block;
|
||||
width: 2.75rem;
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.delta {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 1rem;
|
||||
font-size: 0.75rem;
|
||||
|
||||
color: text-danger();
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 3px;
|
||||
left: 2px;
|
||||
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 8px solid text-danger();
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: text-success();
|
||||
|
||||
&::before {
|
||||
top: 3px;
|
||||
border-top: 8px solid text-success();
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
font-size: 0.875rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
|
||||
b {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
> .caption {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-image: nb-theme(radial-gradient);
|
||||
nb-tabset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
nb-tab {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
nb-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.75rem 1rem 1rem;
|
||||
}
|
||||
align-items: baseline;
|
||||
|
||||
.header-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stats-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
color: nb-theme(color-fg);
|
||||
padding: 0 1.5rem;
|
||||
border-right: 1px solid nb-theme(separator);
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.5rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 130px;
|
||||
.month {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
nb-tabset /deep/ ul li.active {
|
||||
background-color: nb-theme(color-primary);
|
||||
border-radius: nb-theme(radius);
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-block .value {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
|
||||
.stats-month {
|
||||
&:hover {
|
||||
&::before {
|
||||
$color-top: nb-theme(btn-success-bg);
|
||||
$color-bottom: btn-hero-success-left-color();
|
||||
|
||||
background-image: linear-gradient(to top, $color-top, $color-bottom);
|
||||
box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
|
||||
}
|
||||
}
|
||||
}
|
||||
nb-icon.down {
|
||||
color: nb-theme(color-danger-default);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
nb-tabset /deep/ ul li.active {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-block {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.stats-month {
|
||||
&:hover {
|
||||
&::before {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.delta {
|
||||
&.down {
|
||||
color: text-primary();
|
||||
|
||||
&::before {
|
||||
border-top: 8px solid text-primary();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
nb-icon.up {
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
.stats-block {
|
||||
border: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.results {
|
||||
margin-left: auto;
|
||||
}
|
||||
@include media-breakpoint-between(md, xl) {
|
||||
.consumption-table {
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.table-card {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.chart-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
.dropdown {
|
||||
min-width: 100px;
|
||||
button {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
.consumption-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.stats-block {
|
||||
padding: 0;
|
||||
&:first-child {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.value {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.unit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,25 @@
|
|||
<nb-card size="medium">
|
||||
<nb-card-body>
|
||||
<div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
|
||||
<div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
|
||||
|
||||
<div class="details">
|
||||
<div class="title">
|
||||
React Native UI Kitten
|
||||
</div>
|
||||
<div class="description">
|
||||
React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="h4">UI Kitten</div>
|
||||
<div class="description">
|
||||
UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
|
||||
</div>
|
||||
</nb-card-body>
|
||||
|
||||
</div>
|
||||
|
||||
<nb-card-footer>
|
||||
<a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
|
||||
<i class="ion-ios-world"></i>
|
||||
<nb-icon icon="globe" pack="eva"></nb-icon>
|
||||
</a>
|
||||
<a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
|
||||
<i class="ion-social-apple"></i>
|
||||
<i class="link-icon ion-social-apple"></i>
|
||||
</a>
|
||||
<a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
|
||||
<i class="ion-social-android"></i>
|
||||
<i class="link-icon ion-social-android"></i>
|
||||
</a>
|
||||
<a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
|
||||
<i class="ion-social-github"></i>
|
||||
<nb-icon icon="github" pack="eva"></nb-icon>
|
||||
</a>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.picture {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
|
@ -18,48 +12,28 @@
|
|||
}
|
||||
|
||||
.details {
|
||||
padding: 1.25rem 1.25rem 0;
|
||||
padding: nb-theme(card-padding);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: justify;
|
||||
color: nb-theme(color-fg-text);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: calc(1rem * 8 * #{nb-theme(line-height)});
|
||||
}
|
||||
.description {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
nb-card-footer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0.75rem 0;
|
||||
border: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: nb-theme(color-fg);
|
||||
.link-icon {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
nb-icon {
|
||||
font-size: 1.55rem;
|
||||
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,46 +1,59 @@
|
|||
<div class="header">My Playlist</div>
|
||||
<nb-card>
|
||||
<nb-card-header class="header">My Playlist</nb-card-header>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<div class="track-info">
|
||||
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
|
||||
<div class="details">
|
||||
<h4>{{ track.name }}</h4>
|
||||
<span>{{ track.artist }}</span>
|
||||
<nb-card-body class="body">
|
||||
<div class="track-info">
|
||||
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
|
||||
<div class="details">
|
||||
<h4 [class.subtitle]="collapsed">{{ track.name }}</h4>
|
||||
<span>{{ track.artist }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
(input)="setProgress(duration.value)" #duration>
|
||||
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
|
||||
</div>
|
||||
|
||||
<div class="timing">
|
||||
<small class="current">{{ player.currentTime | timing }}</small>
|
||||
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i>
|
||||
<i class="nb-skip-backward prev" (click)="prev()"></i>
|
||||
<i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i>
|
||||
<i class="nb-skip-forward next" (click)="next()"></i>
|
||||
<i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
<div class="volume">
|
||||
<i class="nb-volume-mute"></i>
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||
(input)="setVolume(volume.value)" #volume>
|
||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
(input)="setProgress(duration.value)" #duration>
|
||||
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
|
||||
</div>
|
||||
<i class="nb-volume-high"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="timing">
|
||||
<small class="current">{{ player.currentTime | timing }}</small>
|
||||
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="control-button" nbButton ghost size="tiny" (click)="toggleShuffle()" [class.on]="shuffle">
|
||||
<nb-icon icon="shuffle-2-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
<button class="control-button" nbButton ghost size="medium" (click)="prev()">
|
||||
<nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
<button class="control-button play-button" nbButton ghost size="medium" (click)="playPause()">
|
||||
<nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
|
||||
</nb-icon>
|
||||
</button>
|
||||
<button class="control-button skip-forward-button" nbButton ghost size="medium" (click)="next()">
|
||||
<nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
<button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">
|
||||
<nb-icon icon="repeat-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
|
||||
<nb-card-footer class="footer">
|
||||
<div class="volume">
|
||||
<button nbButton ghost size="small" (click)="setVolume(0)">
|
||||
<nb-icon class="volume-icon" icon="volume-down-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||
(input)="setVolume(volume.value)" #volume>
|
||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||
</div>
|
||||
<button nbButton ghost size="small" (click)="setVolume(100)">
|
||||
<nb-icon class="volume-icon" icon="volume-up-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '~@nebular/theme/styles/core/mixins';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
@include nb-card-header();
|
||||
nb-card {
|
||||
box-shadow: none;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: nb-theme(text-subtitle-font-family);
|
||||
font-size: nb-theme(text-subtitle-font-size);
|
||||
font-weight: nb-theme(text-subtitle-font-weight);
|
||||
line-height: nb-theme(text-subtitle-line-height);
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: nb-theme(card-padding);
|
||||
border-top: 1px solid nb-theme(separator);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
|
|
@ -32,83 +32,63 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: nb-theme(card-padding);
|
||||
}
|
||||
|
||||
.cover {
|
||||
border-radius: nb-theme(radius) / 2;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.cover {
|
||||
border-radius: nb-theme(card-border-radius);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.details {
|
||||
text-align: center;
|
||||
padding-top: 1.5rem;
|
||||
.details {
|
||||
text-align: center;
|
||||
padding-top: 1.5rem;
|
||||
|
||||
span {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
span {
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
position: relative;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.progress-foreground {
|
||||
background-color: nb-theme(color-success);
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: calc(0.75rem - 1px);
|
||||
width: 100px;
|
||||
.progress-foreground {
|
||||
background-color: nb-theme(color-primary-default);
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-top: calc(0.75rem - 1px);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background-color: nb-theme(link-color);
|
||||
}
|
||||
.progress {
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
height: 1.5rem;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
@include install-thumb() {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: nb-theme(color-primary-default);
|
||||
cursor: pointer;
|
||||
margin-top: calc(-0.5rem + 1px);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
-webkit-appearance: none;
|
||||
@include install-track() {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
height: 1.5rem;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
|
||||
@include install-thumb() {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background: nb-theme(color-success);
|
||||
cursor: pointer;
|
||||
margin-top: calc(-0.5rem + 1px);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@include install-track() {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background: nb-theme(separator);
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
@include install-thumb() {
|
||||
background: nb-theme(link-color);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
@include install-thumb() {
|
||||
background: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
height: 2px;
|
||||
cursor: pointer;
|
||||
background: nb-theme(border-basic-color-3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,7 +97,7 @@
|
|||
margin: 0 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: nb-theme(color-fg);
|
||||
color: nb-theme(text-hint-color);
|
||||
|
||||
.current {
|
||||
@include nb-ltr(order, 0);
|
||||
|
|
@ -134,41 +114,21 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
padding: 0.25rem 2rem 1rem;
|
||||
padding: 1rem;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.control-button {
|
||||
color: nb-theme(text-hint-color);
|
||||
|
||||
&.on {
|
||||
color: nb-theme(color-primary-default);
|
||||
}
|
||||
|
||||
.shuffle, .loop {
|
||||
font-size: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.active {
|
||||
color: nb-theme(color-success);
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(link-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev, .next {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border: 2px solid nb-theme(separator);
|
||||
border-radius: 50%;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.play {
|
||||
font-size: 2rem;
|
||||
nb-icon {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,12 +140,6 @@
|
|||
position: relative;
|
||||
max-width: 400px;
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
margin: 0.25rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
height: 2.25rem;
|
||||
margin: 0;
|
||||
|
|
@ -195,18 +149,20 @@
|
|||
left: auto;
|
||||
margin-top: calc(1rem + 1px);
|
||||
z-index: 0;
|
||||
max-width: 99.5%;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 2.25rem;
|
||||
overflow: visible;
|
||||
|
||||
@include install-thumb() {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background-color: nb-theme(color-white);
|
||||
box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4);
|
||||
border: solid 1px rgba(nb-theme(color-fg), 0.4);
|
||||
margin-top: calc(-0.875rem + 1px);
|
||||
background-color: nb-theme(background-basic-color-1);
|
||||
box-shadow: 0 0.125rem 0.5rem 0 nb-theme(border-basic-color-3);
|
||||
border: 1px solid nb-theme(border-basic-color-3);
|
||||
margin-top: -0.75rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -214,6 +170,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
font-size: 1em;
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
$player-height: 4.5rem;
|
||||
|
||||
|
|
@ -230,6 +191,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
@ -245,7 +207,6 @@
|
|||
.cover {
|
||||
height: $player-height;
|
||||
width: $player-height;
|
||||
border-radius: 0 0 0 nb-theme(radius);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
|
|
@ -279,18 +240,26 @@
|
|||
width: inherit;
|
||||
margin: 0;
|
||||
|
||||
i {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.prev, .shuffle, .loop {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
.play-button,
|
||||
.skip-forward-button {
|
||||
display: block;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.play, .next {
|
||||
font-size: 2rem;
|
||||
border: none;
|
||||
@include media-breakpoint-down(is) {
|
||||
.play-button,
|
||||
.skip-forward-button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.skip-forward-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -299,27 +268,23 @@
|
|||
}
|
||||
|
||||
.track-info .details {
|
||||
@include media-breakpoint-down(sm) {
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
span {
|
||||
font-size: 0.75rem;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: calc(0.75rem * #{nb-theme(line-height)});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(lg, lg) {
|
||||
.controls {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.control-button.size-medium {
|
||||
padding: nb-theme(button-ghost-small-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,90 @@
|
|||
<div class="header">Room Management</div>
|
||||
<div class="room-selector">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
||||
<defs>
|
||||
<nb-card>
|
||||
<nb-card-header>Room Management</nb-card-header>
|
||||
<div class="room-selector">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
|
||||
<defs>
|
||||
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="stroked-element"
|
||||
[attr.fill]="getUrlPath('#New_Pattern_Swatch_1')"
|
||||
[attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,18 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/components/card/card.component.theme';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nb-card-header {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -19,7 +29,6 @@
|
|||
stroke-width: 4px;
|
||||
stroke: #bdc4cd;
|
||||
stroke-miterlimit: 10;
|
||||
fill: url('#New_Pattern_Swatch_1');
|
||||
}
|
||||
|
||||
.room-border {
|
||||
|
|
@ -30,7 +39,7 @@
|
|||
}
|
||||
|
||||
.room-bg {
|
||||
fill: nb-theme(card-bg);
|
||||
fill: nb-theme(card-background-color);
|
||||
stroke: transparent;
|
||||
cursor: pointer;
|
||||
stroke-width: 4px;
|
||||
|
|
@ -46,58 +55,22 @@
|
|||
cursor: pointer;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
fill: nb-theme(color-fg);
|
||||
fill: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
.selected-room {
|
||||
z-index: 40;
|
||||
|
||||
.room-text {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
fill: nb-theme(text-basic-color);
|
||||
}
|
||||
.room-border {
|
||||
stroke: nb-theme(color-success);
|
||||
stroke: nb-theme(color-primary-default);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
@include nb-card-header();
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.stroke-pattern, .stroked-element, .room-border {
|
||||
stroke: #a1a1e5;
|
||||
}
|
||||
|
||||
.room-text {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.selected-room {
|
||||
.room-text {
|
||||
font-weight: nb-theme(font-weight-normal);
|
||||
}
|
||||
.room-bg {
|
||||
fill: rgba(0, 255, 170, 0.2);
|
||||
filter: url('#f2');
|
||||
}
|
||||
.room-border {
|
||||
stroke: #00f9a6;
|
||||
}
|
||||
.room-border-glow {
|
||||
filter: url('#f2');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.selected-room {
|
||||
.room-border {
|
||||
stroke: nb-theme(color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
import { Component, EventEmitter, Output } from '@angular/core';
|
||||
import { Component, EventEmitter, HostBinding, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { Location, LocationStrategy } from '@angular/common';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-room-selector',
|
||||
templateUrl: './room-selector.component.html',
|
||||
styleUrls: ['./room-selector.component.scss'],
|
||||
})
|
||||
export class RoomSelectorComponent {
|
||||
export class RoomSelectorComponent implements OnInit, OnDestroy {
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
private hideGrid: boolean;
|
||||
|
||||
@Output() select: EventEmitter<number> = new EventEmitter();
|
||||
|
||||
selectedRoom: null;
|
||||
selectedRoom = null;
|
||||
sortedRooms = [];
|
||||
viewBox = '-20 -20 618.88 407.99';
|
||||
isIE = !!(navigator.userAgent.match(/Trident/)
|
||||
|
|
@ -58,10 +66,35 @@ export class RoomSelectorComponent {
|
|||
],
|
||||
};
|
||||
|
||||
constructor() {
|
||||
@HostBinding('style.background')
|
||||
get background(): 'none' | null {
|
||||
return this.hideGrid ? 'none' : null;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private location: Location,
|
||||
private locationStrategy: LocationStrategy,
|
||||
private themeService: NbThemeService,
|
||||
) {
|
||||
this.selectRoom('2');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.hideGrid = this.themeService.currentTheme === 'corporate';
|
||||
|
||||
this.themeService.onThemeChange()
|
||||
.pipe(
|
||||
map(({ name }) => name === 'corporate'),
|
||||
takeUntil(this.destroy$),
|
||||
)
|
||||
.subscribe((hideGrid: boolean) => this.hideGrid = hideGrid);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
private sortRooms() {
|
||||
this.sortedRooms = this.roomSvg.rooms.slice(0).sort((a, b) => {
|
||||
if (a.id === this.selectedRoom) {
|
||||
|
|
@ -79,4 +112,14 @@ export class RoomSelectorComponent {
|
|||
this.selectedRoom = roomNumber;
|
||||
this.sortRooms();
|
||||
}
|
||||
|
||||
getUrlPath(id: string) {
|
||||
let baseHref = this.locationStrategy.getBaseHref();
|
||||
if (baseHref.endsWith('')) {
|
||||
baseHref = baseHref.slice(0, -1);
|
||||
}
|
||||
const path = this.location.path();
|
||||
|
||||
return `url(${baseHref}${path}${id})`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,13 @@
|
|||
@include nb-install-component() {
|
||||
ngx-room-selector {
|
||||
width: 70%;
|
||||
border-right: 2px solid nb-theme(separator);
|
||||
border-right: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
background: url('../../../../assets/images/square_pattern.svg') repeat;
|
||||
background-size: 75px;
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
&.dark-background {
|
||||
background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background: none;
|
||||
border-right-color: nb-theme(tabs-separator);
|
||||
}
|
||||
}
|
||||
|
||||
ngx-player {
|
||||
|
|
@ -33,7 +28,7 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
/deep/ .room-selector {
|
||||
::ng-deep .room-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
|
@ -62,15 +57,10 @@
|
|||
.collapse {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
top: 0.7rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 3rem;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
import { Component, HostBinding, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-rooms',
|
||||
styleUrls: ['./rooms.component.scss'],
|
||||
template: `
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : 'medium'">
|
||||
<i (click)="collapse()" class="nb-arrow-down collapse" [hidden]="isCollapsed()"></i>
|
||||
<ngx-room-selector (select)="select($event)"></ngx-room-selector>
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'giant' : ''">
|
||||
<nb-icon icon="arrow-ios-downward" pack="eva"
|
||||
(click)="collapse()"
|
||||
class="collapse"
|
||||
[hidden]="isCollapsed()">
|
||||
</nb-icon>
|
||||
<ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
|
||||
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
|
||||
</nb-card>
|
||||
`,
|
||||
|
|
@ -18,18 +23,25 @@ export class RoomsComponent implements OnDestroy {
|
|||
private expanded: boolean;
|
||||
private selected: number;
|
||||
|
||||
isDarkTheme: boolean;
|
||||
|
||||
breakpoint: NbMediaBreakpoint;
|
||||
breakpoints: any;
|
||||
themeSubscription: any;
|
||||
themeChangeSubscription: any;
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService) {
|
||||
|
||||
this.breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeSubscription = this.themeService.onMediaQueryChange()
|
||||
.subscribe(([oldValue, newValue]) => {
|
||||
.subscribe(([, newValue]) => {
|
||||
this.breakpoint = newValue;
|
||||
});
|
||||
|
||||
this.themeChangeSubscription = this.themeService.onThemeChange()
|
||||
.pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
|
||||
.subscribe((isDark: boolean) => this.isDarkTheme = isDark);
|
||||
}
|
||||
|
||||
select(roomNumber) {
|
||||
|
|
@ -60,5 +72,6 @@ export class RoomsComponent implements OnDestroy {
|
|||
|
||||
ngOnDestroy() {
|
||||
this.themeSubscription.unsubscribe();
|
||||
this.themeChangeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,60 @@
|
|||
<nb-card size="xlarge">
|
||||
<nb-card size="giant">
|
||||
|
||||
<nb-card-header>
|
||||
<div class="cameras-card-header">
|
||||
<span class="cameras-card-title">Security Cameras</span>
|
||||
<span class="cameras-filter">
|
||||
<a [class.active]="isSingleView" (click)="isSingleView = true">
|
||||
<i class="nb-square"></i>
|
||||
</a>
|
||||
<a [class.active]="!isSingleView" (click)="isSingleView = false">
|
||||
<i class="nb-grid-a"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
Security Cameras
|
||||
|
||||
<button class="single-view-button"
|
||||
nbButton
|
||||
size="small"
|
||||
[appearance]="isSingleView ? 'filled' : 'outline'"
|
||||
(click)="isSingleView = true">
|
||||
<i class="nb-square"></i>
|
||||
</button>
|
||||
<button class="grid-view-button"
|
||||
nbButton
|
||||
size="small"
|
||||
[appearance]="isSingleView ? 'outline' : 'filled'"
|
||||
(click)="isSingleView = false">
|
||||
<nb-icon icon="grid" pack="eva"></nb-icon>
|
||||
</button>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="cameras single-view" *ngIf="isSingleView">
|
||||
|
||||
<div class="grid-container">
|
||||
|
||||
<div class="single-view" *ngIf="isSingleView">
|
||||
<div class="camera" [style.background-image]="'url(' + selectedCamera.source + ')'">
|
||||
<span>{{ selectedCamera.title }}</span>
|
||||
<span class="camera-name">{{ selectedCamera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cameras" *ngIf="!isSingleView">
|
||||
<div class="camera col-sm-6" *ngFor="let camera of cameras" [style.background-image]="'url(' + camera.source + ')'"
|
||||
|
||||
<div class="grid-view" *ngIf="!isSingleView">
|
||||
<div class="camera"
|
||||
*ngFor="let camera of cameras"
|
||||
[style.background-image]="'url(' + camera.source + ')'"
|
||||
(click)="selectCamera(camera)">
|
||||
<span>{{ camera.title }}</span>
|
||||
<span class="camera-name">{{ camera.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
|
||||
</div>
|
||||
|
||||
<nb-card-footer>
|
||||
<nb-actions size="medium" fullWidth>
|
||||
<nb-actions [size]="actionSize" fullWidth>
|
||||
<nb-action>
|
||||
<i class="nb-pause-outline"></i><span>Pause</span>
|
||||
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
|
||||
Pause
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-list"></i><span>Logs</span>
|
||||
<nb-icon icon="list-outline" pack="eva"></nb-icon>
|
||||
Logs
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-search"></i><span>Search</span>
|
||||
<nb-icon icon="search-outline" pack="eva"></nb-icon>
|
||||
Search
|
||||
</nb-action>
|
||||
<nb-action>
|
||||
<i class="nb-gear"></i><span>Setup</span>
|
||||
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
|
||||
Setup
|
||||
</nb-action>
|
||||
</nb-actions>
|
||||
</nb-card-footer>
|
||||
|
|
|
|||
|
|
@ -3,96 +3,74 @@
|
|||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card-header {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nb-card-footer {
|
||||
padding: 1rem 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cameras-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.cameras-card-title {
|
||||
flex: 1;
|
||||
padding: 1.25rem;
|
||||
.single-view-button {
|
||||
.nb-square {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
@include nb-ltr {
|
||||
margin-left: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@include nb-rtl {
|
||||
margin-right: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cameras-filter {
|
||||
.grid-view-button {
|
||||
::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@include nb-ltr {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
@include nb-rtl {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
font-size: 2.5rem;
|
||||
padding: 0 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
a:first-child {
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(separator));
|
||||
}
|
||||
|
||||
a:last-child {
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(card-border-radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(card-border-radius));
|
||||
}
|
||||
|
||||
a.active {
|
||||
background-color: nb-theme(color-bg-active);
|
||||
color: nb-theme(color-fg-heading);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cameras {
|
||||
position: absolute;
|
||||
.single-view,
|
||||
.grid-view {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.grid-view {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.camera {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.single-view .camera {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cameras.single-view {
|
||||
.camera {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.camera {
|
||||
position: relative;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 50%;
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
font-size: 1.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -108,69 +86,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.camera-name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background: nb-theme(overlay-backdrop-background-color);
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
nb-action {
|
||||
padding: 0 0.5rem 0 0;
|
||||
|
||||
i {
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 3rem;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(actions-fg);
|
||||
}
|
||||
nb-icon {
|
||||
@include nb-ltr(margin-right, 0.5rem);
|
||||
@include nb-rtl(margin-left, 0.5rem);
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
text-transform: uppercase;
|
||||
::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.cameras-filter a.active {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
|
||||
.camera {
|
||||
span {
|
||||
background: rgba(88, 73, 184, 0.5);
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
nb-action span {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.cameras-filter a {
|
||||
&.active {
|
||||
color: nb-theme(color-primary);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@include nb-ltr(border-left, 1px solid nb-theme(border-color));
|
||||
@include nb-rtl(border-right, 1px solid nb-theme(border-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@include media-breakpoint-down(xl) {
|
||||
nb-action {
|
||||
padding: 0;
|
||||
i {
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,53 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { map, takeUntil } from 'rxjs/operators';
|
||||
import { Subject } from 'rxjs';
|
||||
import { NbComponentSize, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
|
||||
|
||||
import { Camera, SecurityCamerasData } from '../../../@core/data/security-cameras';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-security-cameras',
|
||||
styleUrls: ['./security-cameras.component.scss'],
|
||||
templateUrl: './security-cameras.component.html',
|
||||
})
|
||||
export class SecurityCamerasComponent implements OnDestroy {
|
||||
export class SecurityCamerasComponent implements OnInit, OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
cameras: Camera[];
|
||||
selectedCamera: Camera;
|
||||
isSingleView = false;
|
||||
actionSize: NbComponentSize = 'medium';
|
||||
|
||||
constructor(private securityCamerasService: SecurityCamerasData) {
|
||||
constructor(
|
||||
private themeService: NbThemeService,
|
||||
private breakpointService: NbMediaBreakpointsService,
|
||||
private securityCamerasService: SecurityCamerasData,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.securityCamerasService.getCamerasData()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.pipe(takeUntil(this.destroy$))
|
||||
.subscribe((cameras: Camera[]) => {
|
||||
this.cameras = cameras;
|
||||
this.selectedCamera = this.cameras[0];
|
||||
});
|
||||
|
||||
const breakpoints = this.breakpointService.getBreakpointsMap();
|
||||
this.themeService.onMediaQueryChange()
|
||||
.pipe(map(([, breakpoint]) => breakpoint.width))
|
||||
.subscribe((width: number) => {
|
||||
this.actionSize = width > breakpoints.md ? 'medium' : 'small';
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
selectCamera(camera: any) {
|
||||
this.selectedCamera = camera;
|
||||
this.isSingleView = true;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,62 +4,31 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
$padding: 1rem;
|
||||
|
||||
nb-card-body {
|
||||
overflow: hidden;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
height: calc(100% - 2 * #{$padding});
|
||||
height: calc(100% - 2 * 1rem);
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 45%;
|
||||
padding-top: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 2rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
line-height: 1;
|
||||
span {
|
||||
font-size: 1rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
.text-hint {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-fg-heading);
|
||||
|
||||
.value {
|
||||
color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
|
||||
.details span {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.value {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
color: nb-theme(text-hint-color);
|
||||
font-family: nb-theme(text-subtitle-2-font-family);
|
||||
font-size: nb-theme(text-subtitle-2-font-size);
|
||||
font-weight: nb-theme(text-subtitle-2-font-weight);
|
||||
line-height: nb-theme(text-subtitle-2-line-height);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ declare const echarts: any;
|
|||
selector: 'ngx-solar',
|
||||
styleUrls: ['./solar.component.scss'],
|
||||
template: `
|
||||
<nb-card size="xsmall" class="solar-card">
|
||||
<nb-card size="tiny" class="solar-card">
|
||||
<nb-card-header>Solar Energy Consumption</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div echarts [options]="option" class="echart">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="value">6. 421 kWh</div>
|
||||
<div class="h4 value">6.421 kWh</div>
|
||||
<div class="details"><span>out of</span> 8.421 kWh</div>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
|
|
@ -112,7 +112,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
|
|||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: config.variables.layoutBg,
|
||||
color: solarTheme.secondSeriesFill,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
|
|
@ -8,10 +7,6 @@
|
|||
height: 6rem;
|
||||
overflow: visible;
|
||||
|
||||
$bevel: btn-hero-bevel(nb-theme(card-bg));
|
||||
$shadow: nb-theme(btn-hero-shadow);
|
||||
box-shadow: $bevel, $shadow;
|
||||
|
||||
.icon-container {
|
||||
height: 100%;
|
||||
padding: 0.625rem;
|
||||
|
|
@ -29,89 +24,36 @@
|
|||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
color: nb-theme(color-white);
|
||||
color: nb-theme(text-control-color);
|
||||
|
||||
&.primary {
|
||||
@include btn-hero-primary-gradient();
|
||||
@include btn-hero-primary-bevel-glow-shadow();
|
||||
}
|
||||
&.success {
|
||||
@include btn-hero-success-gradient();
|
||||
@include btn-hero-success-bevel-glow-shadow();
|
||||
}
|
||||
&.info {
|
||||
@include btn-hero-info-gradient();
|
||||
@include btn-hero-info-bevel-glow-shadow();
|
||||
}
|
||||
&.warning {
|
||||
@include btn-hero-warning-gradient();
|
||||
@include btn-hero-warning-bevel-glow-shadow();
|
||||
}
|
||||
&.danger {
|
||||
@include btn-hero-danger-gradient();
|
||||
@include btn-hero-danger-bevel-glow-shadow();
|
||||
}
|
||||
&.secondary {
|
||||
@include btn-hero-secondary-bg();
|
||||
@include btn-hero-secondary-bevel-glow-shadow();
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
@each $status in nb-get-statuses() {
|
||||
&.status-#{$status} {
|
||||
$left-color: nb-theme(button-hero-#{$status}-left-background-color);
|
||||
$right-color: nb-theme(button-hero-#{$status}-right-background-color);
|
||||
background-image: linear-gradient(to right, $left-color, $right-color);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
&.primary,
|
||||
&.success,
|
||||
&.info,
|
||||
&.warning,
|
||||
&.danger,
|
||||
&.secondary {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten(nb-theme(card-bg), 5%);
|
||||
|
||||
.icon {
|
||||
&.primary {
|
||||
background-image: btn-hero-primary-light-gradient();
|
||||
}
|
||||
&.success {
|
||||
background-image: btn-hero-success-light-gradient();
|
||||
}
|
||||
&.info {
|
||||
background-image: btn-hero-info-light-gradient();
|
||||
}
|
||||
&.warning {
|
||||
background-image: btn-hero-warning-light-gradient();
|
||||
}
|
||||
&.danger {
|
||||
background-image: btn-hero-danger-light-gradient();
|
||||
}
|
||||
&.secondary {
|
||||
background-image: btn-hero-secondary-light-gradient();
|
||||
&:hover {
|
||||
$left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
|
||||
$right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
|
||||
background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: nb-theme(card-fg);
|
||||
color: nb-theme(text-hint-color);
|
||||
|
||||
.title,
|
||||
.icon {
|
||||
color: nb-theme(card-fg);
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
&.primary, &.success, &.info, &.warning, &.danger {
|
||||
@each $status in nb-get-statuses() {
|
||||
.icon.status-#{$status} {
|
||||
box-shadow: none;
|
||||
background-image: linear-gradient(to right, transparent, transparent);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,59 +68,15 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(card-fg-heading);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
color: nb-theme(card-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
nb-card {
|
||||
&.off .icon-container {
|
||||
@include nb-ltr(border-right, 1px solid nb-theme(separator));
|
||||
@include nb-rtl(border-left, 1px solid nb-theme(separator));
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
@include nb-ltr(padding-left, 1.25rem);
|
||||
@include nb-rtl(padding-right, 1.25rem);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 7rem;
|
||||
height: 100%;
|
||||
font-size: 4.5rem;
|
||||
@include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
|
||||
@include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
|
||||
.status {
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
nb-card {
|
||||
.icon-container {
|
||||
height: auto;
|
||||
}
|
||||
font-family: nb-theme(text-paragraph-2-font-family);
|
||||
font-size: nb-theme(text-paragraph-2-font-size);
|
||||
font-weight: nb-theme(text-paragraph-2-font-weight);
|
||||
line-height: nb-theme(text-paragraph-2-line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@ import { Component, Input } from '@angular/core';
|
|||
template: `
|
||||
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
|
||||
<div class="icon-container">
|
||||
<div class="icon {{ type }}">
|
||||
<div class="icon status-{{ type }}">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="title h5">{{ title }}</div>
|
||||
<div class="status">{{ on ? 'ON' : 'OFF' }}</div>
|
||||
</div>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
<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">
|
||||
<i class="ion-paper-airplane"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="team-info">
|
||||
<div class="team-title">
|
||||
<h2>Akveo Team</h2>
|
||||
</div>
|
||||
<div class="team-subtitle">Design & Development</div>
|
||||
<div class="team-bio">
|
||||
We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
|
||||
your product amazing.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://www.akveo.com" target="_blank">
|
||||
<i class="ion-ios-world-outline"></i>
|
||||
</a>
|
||||
<a href="https://www.facebook.com/akveo" target="_blank">
|
||||
<i class="ion-social-facebook"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/akveo_inc" target="_blank">
|
||||
<i class="ion-social-twitter"></i>
|
||||
</a>
|
||||
<a href="https://github.com/akveo" target="_blank">
|
||||
<i class="ion-social-github"></i>
|
||||
</a>
|
||||
</div>
|
||||
</nb-card>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@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: nb-theme(card-border-radius);
|
||||
border-top-right-radius: nb-theme(card-border-radius);
|
||||
|
||||
flex: 1;
|
||||
max-height: 50%;
|
||||
|
||||
.team-link {
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
bottom: -2rem;
|
||||
right: 1rem;
|
||||
border-radius: 50%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.team-info {
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
|
||||
.team-title {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.team-subtitle {
|
||||
margin-bottom: 1rem;
|
||||
color: nb-theme(color-fg);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
.team-bio {
|
||||
text-align: justify;
|
||||
color: nb-theme(color-fg-text);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1rem 0;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-team',
|
||||
styleUrls: ['./team.component.scss'],
|
||||
templateUrl: './team.component.html',
|
||||
})
|
||||
export class TeamComponent {
|
||||
}
|
||||
|
|
@ -19,16 +19,21 @@
|
|||
</defs>
|
||||
<g [attr.transform]="styles.arcTranslateStr">
|
||||
|
||||
<g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
|
||||
<g class="toFilter" [attr.filter]="'url(#blurFilter' + svgControlId +')'">
|
||||
<path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
|
||||
<g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
|
||||
<g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
|
||||
<path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
|
||||
</g>
|
||||
<!-- ngFor is a quirk fix for webkit rendering issues -->
|
||||
<path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
|
||||
</g>
|
||||
|
||||
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
|
||||
[attr.stroke-width]="thumbBorder / scaleFactor" class="circle"></circle>
|
||||
<circle [attr.cx]="styles.thumbPosition.x"
|
||||
[attr.cy]="styles.thumbPosition.y"
|
||||
[attr.r]="pinRadius"
|
||||
[attr.stroke-width]="thumbBorder / scaleFactor"
|
||||
[attr.fill]="off ? 'none' : thumbBg"
|
||||
[attr.stroke]="off ? 'none' : thumbBorderColor">
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -37,6 +42,6 @@
|
|||
<ng-content></ng-content>
|
||||
</div>
|
||||
|
||||
<div class="power-bg" [ngClass]="{'off': off}" (click)="switchPower()">
|
||||
<i class="nb-power-circled"></i>
|
||||
</div>
|
||||
<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
|
||||
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~@nebular/bootstrap/styles/hero-buttons';
|
||||
|
||||
@include nb-install-component() {
|
||||
position: relative;
|
||||
|
|
@ -19,11 +18,6 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.circle {
|
||||
fill: nb-theme(color-bg);
|
||||
stroke: nb-theme(color-success);
|
||||
}
|
||||
|
||||
.temperature-bg {
|
||||
position: absolute;
|
||||
width: 88%;
|
||||
|
|
@ -38,18 +32,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 2px solid nb-theme(separator);
|
||||
@include nb-for-theme(cosmic) {
|
||||
background-color: lighten(nb-theme(layout-bg), 2%);
|
||||
border: none;
|
||||
}
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
position: absolute;
|
||||
width: 5.25rem;
|
||||
height: 5.25rem;
|
||||
background-color: nb-theme(card-bg);
|
||||
background-color: nb-theme(card-background-color);
|
||||
border-radius: 50%;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
|
|
@ -60,45 +50,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
|
||||
|
||||
&.on {
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
}
|
||||
|
||||
.power-icon {
|
||||
font-size: 3rem;
|
||||
color: nb-theme(color-fg-heading);
|
||||
border: 2px solid nb-theme(separator);
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(nb-theme(card-bg), 5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(nb-theme(card-bg), 5%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.off {
|
||||
color: nb-theme(color-fg);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.circle {
|
||||
fill: nb-theme(color-fg-heading);
|
||||
stroke: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
border: none;
|
||||
box-shadow: nb-theme(card-shadow);
|
||||
text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.circle {
|
||||
stroke: nb-theme(color-warning);
|
||||
}
|
||||
|
||||
.power-bg {
|
||||
color: nb-theme(separator);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import {
|
||||
Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, OnChanges,
|
||||
Component,
|
||||
HostListener,
|
||||
ViewChild,
|
||||
ElementRef,
|
||||
Input,
|
||||
Output,
|
||||
EventEmitter,
|
||||
AfterViewInit,
|
||||
OnChanges,
|
||||
} from '@angular/core';
|
||||
import { Location, LocationStrategy } from '@angular/common';
|
||||
|
||||
let uniqueId = 0;
|
||||
const VIEW_BOX_SIZE = 300;
|
||||
|
||||
@Component({
|
||||
|
|
@ -11,14 +21,16 @@ const VIEW_BOX_SIZE = 300;
|
|||
})
|
||||
export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
|
||||
|
||||
@ViewChild('svgRoot') svgRoot: ElementRef;
|
||||
@ViewChild('svgRoot', { static: true }) svgRoot: ElementRef;
|
||||
|
||||
@Input() fillColors: string|string[] = '#2ec6ff';
|
||||
@Input() disableArcColor = '#999999';
|
||||
@Input() fillColors: string|string[];
|
||||
@Input() disableArcColor;
|
||||
@Input() bottomAngle = 90;
|
||||
@Input() arcThickness = 18; // CSS pixels
|
||||
@Input() thumbRadius = 16; // CSS pixels
|
||||
@Input() thumbBorder = 3;
|
||||
@Input() thumbBg;
|
||||
@Input() thumbBorderColor;
|
||||
@Input() maxLeap = 0.4;
|
||||
|
||||
value = 50;
|
||||
|
|
@ -52,7 +64,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
|
|||
off = false;
|
||||
oldValue: number;
|
||||
|
||||
svgControlId = new Date().getTime();
|
||||
svgControlId = uniqueId++;
|
||||
scaleFactor = 1;
|
||||
bottomAngleRad = 0;
|
||||
radius = 100;
|
||||
|
|
@ -75,7 +87,10 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
|
|||
private isMouseDown = false;
|
||||
private init = false;
|
||||
|
||||
constructor() {
|
||||
constructor(
|
||||
private location: Location,
|
||||
private locationStrategy: LocationStrategy,
|
||||
) {
|
||||
this.oldValue = this.value;
|
||||
}
|
||||
|
||||
|
|
@ -114,6 +129,16 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
|
|||
this.invalidatePinPosition();
|
||||
}
|
||||
|
||||
getUrlPath(id: string) {
|
||||
let baseHref = this.locationStrategy.getBaseHref();
|
||||
if (baseHref.endsWith('')) {
|
||||
baseHref = baseHref.slice(0, -1);
|
||||
}
|
||||
const path = this.location.path();
|
||||
|
||||
return `url(${baseHref}${path}${id}${this.svgControlId})`;
|
||||
}
|
||||
|
||||
private invalidate(): void {
|
||||
this.bottomAngleRad = TemperatureDraggerComponent.toRad(this.bottomAngle);
|
||||
this.calculateVars();
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
|
||||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
|
||||
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="colors.layoutBg"
|
||||
[fillColors]="colors.temperature">
|
||||
[min]="temperatureData.min" [max]="temperatureData.max" [disableArcColor]="theme.arcEmpty"
|
||||
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
|
||||
<div class="value temperature">
|
||||
<div class="value temperature h1">
|
||||
{{ temperatureOff ? '--' : (temperature | ngxRound) }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
|
|
@ -19,53 +19,51 @@
|
|||
</ngx-temperature-dragger>
|
||||
</div>
|
||||
|
||||
<div [(ngModel)]="temperatureMode" ngbRadioGroup data-toggle="buttons"
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
|
||||
</label>
|
||||
</div>
|
||||
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
|
||||
<nb-radio value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="fan">
|
||||
<i class="nb-loop-circled"></i>
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</nb-tab>
|
||||
|
||||
<nb-tab tabTitle="Humidity">
|
||||
|
||||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
|
||||
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="colors.layoutBg"
|
||||
[fillColors]="colors.temperature">
|
||||
[min]="humidityData.min" [max]="humidityData.max" [disableArcColor]="theme.arcEmpty"
|
||||
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
|
||||
<div class="value humidity">
|
||||
<div class="value humidity h1">
|
||||
{{ humidityOff ? '--' : (humidity | ngxRound) }}
|
||||
</div>
|
||||
</div>
|
||||
</ngx-temperature-dragger>
|
||||
</div>
|
||||
|
||||
<div [(ngModel)]="humidityMode" ngbRadioGroup data-toggle="buttons"
|
||||
class="btn-group btn-group-toggle btn-divided-group btn-outline-divided-group btn-group-full-width">
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="cool"/><i class="nb-snowy-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="warm"/><i class="nb-sunny-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="heat"/><i class="nb-flame-circled"></i>
|
||||
</label>
|
||||
<label ngbButtonLabel class="btn btn-icon">
|
||||
<input ngbButton type="radio" value="fan"/><i class="nb-loop-circled"></i>
|
||||
</label>
|
||||
</div>
|
||||
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-mode">
|
||||
<nb-radio value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio value="fan">
|
||||
<i class="nb-loop-circled"></i>
|
||||
</nb-radio>
|
||||
</nb-radio-group>
|
||||
</nb-tab>
|
||||
</nb-tabset>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,13 @@
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
/deep/ ul {
|
||||
border: none;
|
||||
::ng-deep ul {
|
||||
// make same size as card header
|
||||
border-color: transparent;
|
||||
padding-bottom: 1px;
|
||||
.tab-link {
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +37,7 @@
|
|||
|
||||
ngx-temperature-dragger {
|
||||
margin-top: -1.5rem;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
|
|
@ -43,37 +48,27 @@
|
|||
|
||||
.value {
|
||||
position: relative;
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 4rem;
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
margin: 0;
|
||||
|
||||
&.temperature::before {
|
||||
position: absolute;
|
||||
content: '°';
|
||||
top: 0;
|
||||
right: -1.25rem;
|
||||
right: -0.85rem;
|
||||
}
|
||||
|
||||
&.humidity::before {
|
||||
position: absolute;
|
||||
content: '%';
|
||||
bottom: 0.5rem;
|
||||
right: -2.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
font-size: 2.5rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
top: 3px;
|
||||
right: -1.6rem;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: nb-theme(color-fg);
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
}
|
||||
|
||||
&.off {
|
||||
.value {
|
||||
color: nb-theme(color-fg);
|
||||
color: nb-theme(text-hint-color);
|
||||
letter-spacing: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
|
|
@ -88,82 +83,38 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
padding: 1.25rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
nb-radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
color: nb-theme(color-fg);
|
||||
|
||||
&.active {
|
||||
border-color: nb-theme(color-fg-highlight);
|
||||
color: nb-theme(color-fg-highlight);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
.btn-icon.active {
|
||||
color: nb-theme(color-fg-heading);
|
||||
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);
|
||||
}
|
||||
}
|
||||
nb-radio {
|
||||
flex: 0 0 auto;
|
||||
width: calc(3.5rem + 2px);
|
||||
height: calc(3.5rem + 2px);
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
.btn-icon.active {
|
||||
color: nb-theme(color-primary);
|
||||
border: none;
|
||||
background-color: nb-theme(layout-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
ngx-temperature-dragger {
|
||||
max-width: 250px;
|
||||
|
||||
/deep/ .power-bg {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
font-size: 3rem;
|
||||
::ng-deep {
|
||||
.outer-circle,
|
||||
.inner-circle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-value-container .value {
|
||||
font-size: 3rem;
|
||||
&.humidity::before {
|
||||
right: -2rem;
|
||||
font-size: 2rem;
|
||||
label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
.btn-icon {
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
nb-tabset /deep/ ul {
|
||||
padding: 0 0.5rem;
|
||||
a {
|
||||
padding: 1.25rem 1rem;
|
||||
.text {
|
||||
border: 1px solid transparent;
|
||||
font-size: 2.5rem;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
input:checked ~ .text {
|
||||
border-color: nb-theme(color-primary-default);
|
||||
border-radius: nb-theme(card-border-radius);
|
||||
color: nb-theme(text-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,15 +23,15 @@ export class TemperatureComponent implements OnDestroy {
|
|||
humidityOff = false;
|
||||
humidityMode = 'heat';
|
||||
|
||||
colors: any;
|
||||
theme: any;
|
||||
themeSubscription: any;
|
||||
|
||||
constructor(private theme: NbThemeService,
|
||||
constructor(private themeService: NbThemeService,
|
||||
private temperatureHumidityService: TemperatureHumidityData) {
|
||||
this.theme.getJsTheme()
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(config => {
|
||||
this.colors = config.variables;
|
||||
this.theme = config.variables.temperature;
|
||||
});
|
||||
|
||||
forkJoin(
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { LayoutService } from '../../../@core/utils';
|
|||
|
||||
@Component({
|
||||
selector: 'ngx-traffic-chart',
|
||||
styleUrls: ['./traffic.component.scss'],
|
||||
template: `
|
||||
<div echarts
|
||||
[options]="option"
|
||||
|
|
@ -69,8 +68,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
|
|||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: trafficTheme.colorBlack,
|
||||
opacity: 0.06,
|
||||
color: trafficTheme.yAxisSplitLine,
|
||||
width: '1',
|
||||
},
|
||||
},
|
||||
|
|
@ -87,7 +85,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
|
|||
position: 'top',
|
||||
backgroundColor: trafficTheme.tooltipBg,
|
||||
borderColor: trafficTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: '{c0} MB',
|
||||
extraCssText: trafficTheme.tooltipExtraCss,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,30 +2,34 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
nb-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.675rem 0.5rem 0.5rem 1.25rem;
|
||||
padding-top: nb-theme(card-header-with-select-padding-top);
|
||||
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
ngx-traffic-chart {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/deep/ canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
::ng-deep {
|
||||
.echart {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 120px;
|
||||
canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,23 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
|
||||
import { TrafficChartData } from '../../../@core/data/traffic-chart';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-traffic',
|
||||
styleUrls: ['./traffic.component.scss'],
|
||||
template: `
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<nb-card-header>
|
||||
<span>Traffic Consumption</span>
|
||||
<div class="dropdown ghost-dropdown" ngbDropdown>
|
||||
<button type="button" class="btn btn-sm" ngbDropdownToggle
|
||||
[ngClass]="{ 'btn-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul ngbDropdownMenu class="dropdown-menu">
|
||||
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<nb-select [(selected)]="type">
|
||||
<nb-option *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
|
||||
</nb-select>
|
||||
</nb-card-header>
|
||||
<nb-card-body class="p-0">
|
||||
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
|
||||
</nb-card-body>
|
||||
|
||||
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,58 +1,51 @@
|
|||
<nb-card size="medium">
|
||||
<nb-card-body>
|
||||
<div class="location">
|
||||
<span>New York</span>
|
||||
<span class="h3 location">New York</span>
|
||||
<span class="date">Mon 29 May</span>
|
||||
|
||||
<div class="today">
|
||||
<span class="today-temperature h1">20°</span>
|
||||
<nb-icon icon="sun-outline" pack="eva" class="today-icon"></nb-icon>
|
||||
</div>
|
||||
<div class="date">
|
||||
<span>Mon 29 May</span>
|
||||
</div>
|
||||
<div class="daily-forecast">
|
||||
<div class="info">
|
||||
<div class="temperature">
|
||||
<span>20°</span>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<i class="ion-ios-sunny-outline"></i>
|
||||
</div>
|
||||
|
||||
<div class="today-details">
|
||||
<div class="parameter">
|
||||
<span class="caption parameter-name">max</span>
|
||||
<span class="parameter-value">23°</span>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="parameter">
|
||||
<span class="parameter-name">max</span>
|
||||
<span class="parameter-value">23°</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="parameter-name">min</span>
|
||||
<span class="parameter-value">19°</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="parameter-name">wind</span>
|
||||
<span class="parameter-value">4 km/h</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="parameter-name">hum</span>
|
||||
<span class="parameter-value">87%</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="caption parameter-name">min</span>
|
||||
<span class="parameter-value">19°</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="caption parameter-name">wind</span>
|
||||
<span class="parameter-value">4 km/h</span>
|
||||
</div>
|
||||
<div class="parameter">
|
||||
<span class="caption parameter-name">hum</span>
|
||||
<span class="parameter-value">87%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="weekly-forecast">
|
||||
<div class="day">
|
||||
<span class="caption">Sun</span>
|
||||
<i class="ion-ios-cloudy-outline"></i>
|
||||
<i class="weather-icon ion-ios-cloudy-outline"></i>
|
||||
<span class="temperature">17°</span>
|
||||
</div>
|
||||
<div class="day">
|
||||
<span class="caption">Mon</span>
|
||||
<i class="ion-ios-sunny-outline"></i>
|
||||
<i class="weather-icon ion-ios-sunny-outline"></i>
|
||||
<span class="temperature">19°</span>
|
||||
</div>
|
||||
<div class="day">
|
||||
<span class="caption">Tue</span>
|
||||
<i class="ion-ios-rainy-outline"></i>
|
||||
<i class="weather-icon ion-ios-rainy-outline"></i>
|
||||
<span class="temperature">22°</span>
|
||||
</div>
|
||||
<div class="day">
|
||||
<span class="caption">Wed</span>
|
||||
<i class="ion-ios-partlysunny-outline"></i>
|
||||
<i class="weather-icon ion-ios-partlysunny-outline"></i>
|
||||
<span class="temperature">21°</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,132 +1,76 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
|
||||
nb-card {
|
||||
background-image: nb-theme(radial-gradient);
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nb-card-body {
|
||||
height: 100%;
|
||||
padding: 2rem;
|
||||
color: nb-theme(color-fg);
|
||||
.location,
|
||||
.date {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.location {
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-size: 2.5rem;
|
||||
font-weight: nb-theme(font-weight-normal);
|
||||
color: nb-theme(color-fg-heading);
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
.today {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.daily-forecast {
|
||||
.today-temperature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -1.5rem;
|
||||
justify-content: center;
|
||||
margin: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.today-icon {
|
||||
color: nb-theme(color-primary-default);
|
||||
font-size: 10rem;
|
||||
line-height: 1;
|
||||
margin-top: -4rem;
|
||||
margin-left: auto;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
|
||||
.temperature {
|
||||
font-size: 5rem;
|
||||
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;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.today-details {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 10rem;
|
||||
line-height: 10rem;
|
||||
color: nb-theme(color-success);
|
||||
.parameter {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
color: nb-theme(color-fg);
|
||||
text-shadow: 0 3px 0 #665ebd,
|
||||
0 4px 10px rgba(33, 7, 77, 0.5),
|
||||
0 2px 10px #928dff;
|
||||
}
|
||||
.parameter-name,
|
||||
.parameter-value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
color: nb-theme(color-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.parameter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.parameter-name {
|
||||
font-family: nb-theme(font-main);
|
||||
font-size: 1.25rem;
|
||||
font-weight: nb-theme(font-weight-light);
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.parameter-value {
|
||||
font-family: nb-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bolder);
|
||||
}
|
||||
}
|
||||
}
|
||||
.caption {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.weekly-forecast {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 2rem;
|
||||
|
||||
.day {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
.caption {
|
||||
text-transform: uppercase;
|
||||
font-family: nb-theme(font-secondary);
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.temperature {
|
||||
color: nb-theme(color-fg-heading);
|
||||
font-family: nb-theme(font-secondary);
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
nb-card-body {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.day {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,7 @@
|
|||
<div class="chart-header">
|
||||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
|
||||
|
||||
<div class="dropdown"
|
||||
[ngClass]="{ 'ghost-dropdown': currentTheme === 'corporate' }"
|
||||
ngbDropdown>
|
||||
<button type="button" ngbDropdownToggle class="btn"
|
||||
[ngClass]="{
|
||||
'btn-outline-success': currentTheme === 'default',
|
||||
'btn-primary': currentTheme !== 'default',
|
||||
'btn-sm': breakpoint.width <= breakpoints.is}">
|
||||
{{ type }}
|
||||
</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu>
|
||||
<li class="dropdown-item" *ngFor="let period of types" (click)="changePeriod(period)">
|
||||
{{ period }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
|
||||
<nb-option *ngFor="let period of types" [value]="period">
|
||||
{{ period }}
|
||||
</nb-option>
|
||||
</nb-select>
|
||||
|
|
|
|||
|
|
@ -3,39 +3,23 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2.125rem;
|
||||
align-items: center;
|
||||
padding: 1.5rem 4.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: -1rem;
|
||||
|
||||
ngx-legend-chart,
|
||||
.period-select {
|
||||
padding-top: 1rem;
|
||||
@include nb-ltr(padding-left, 0.5rem);
|
||||
@include nb-rtl(padding-right, 0.5rem);
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
min-width: 8.125rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.chart-header {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
ngx-legend-chart {
|
||||
align-self: flex-start;
|
||||
|
||||
/deep/ .legends {
|
||||
padding-left: 0;
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
|
||||
/deep/ .legend {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
align-self: flex-end;
|
||||
@include media-breakpoint-up(md) {
|
||||
.period-select {
|
||||
@include nb-ltr(margin-left, auto);
|
||||
@include nb-rtl(margin-right, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,15 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
@import '~bootstrap/scss/mixins/breakpoints';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
.summary-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
background-color: nb-theme(chart-panel-summary-background-color);
|
||||
box-shadow: nb-theme(chart-panel-summary-box-shadow);
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 4rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border:
|
||||
nb-theme(chart-panel-summary-border-width)
|
||||
solid
|
||||
nb-theme(chart-panel-summary-border-color);
|
||||
border: 1px solid nb-theme(border-basic-color-3);
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2rem;
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.value, .title {
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: nb-theme(font-size-sm);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(is) {
|
||||
.summary-container {
|
||||
padding-left: nb-theme(padding);
|
||||
padding-right: nb-theme(padding);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@ import { Component, Input } from '@angular/core';
|
|||
styleUrls: ['./chart-panel-summary.component.scss'],
|
||||
template: `
|
||||
<div class="summary-container">
|
||||
<div class="summory" *ngFor="let item of summary">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="value">{{ item.value }}</div>
|
||||
<div *ngFor="let item of summary">
|
||||
<div>{{ item.title }}</div>
|
||||
<div class="h6">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -6,19 +6,24 @@ $legend-canceled-color: #3f4fda;
|
|||
|
||||
@include nb-install-component() {
|
||||
|
||||
/deep/ nb-tabset {
|
||||
nb-tabset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
ul {
|
||||
border-bottom: none;
|
||||
::ng-deep ul {
|
||||
// make same size as card header
|
||||
border-color: transparent;
|
||||
padding-bottom: 1px;
|
||||
.tab-link {
|
||||
padding: 1.25rem 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-tab {
|
||||
flex: 1;
|
||||
padding-bottom: 1.25rem;
|
||||
padding: 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
|
|
@ -29,7 +34,8 @@ $legend-canceled-color: #3f4fda;
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
ngx-chart-panel-header, ngx-profit-chart, ngx-orders-chart {
|
||||
ngx-profit-chart,
|
||||
ngx-orders-chart {
|
||||
padding: 0 1.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ export class ECommerceChartsPanelComponent implements OnDestroy {
|
|||
ordersChartData: OrdersChart;
|
||||
profitChartData: ProfitChart;
|
||||
|
||||
@ViewChild('ordersChart') ordersChart: OrdersChartComponent;
|
||||
@ViewChild('profitChart') profitChart: ProfitChartComponent;
|
||||
@ViewChild('ordersChart', { static: true }) ordersChart: OrdersChartComponent;
|
||||
@ViewChild('profitChart', { static: true }) profitChart: ProfitChartComponent;
|
||||
|
||||
constructor(private ordersProfitChartService: OrdersProfitChartData) {
|
||||
this.ordersProfitChartService.getOrderProfitChartSummary()
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
@import '../../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
.echart {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ export class OrdersChartComponent implements AfterViewInit, OnDestroy, OnChanges
|
|||
position: 'top',
|
||||
backgroundColor: eTheme.tooltipBg,
|
||||
borderColor: eTheme.tooltipBorderColor,
|
||||
borderWidth: 3,
|
||||
borderWidth: 1,
|
||||
formatter: (params) => {
|
||||
return Math.round(parseInt(params.value, 10));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,33 +8,16 @@
|
|||
height: 100%;
|
||||
flex: 1;
|
||||
padding: nb-theme(card-padding);
|
||||
border-left:
|
||||
nb-theme(card-header-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(card-header-border-color);
|
||||
|
||||
.header {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: nb-theme(card-header-font-family);
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.echart {
|
||||
height: 85%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
height: 50%;
|
||||
border-top:
|
||||
nb-theme(card-border-width)
|
||||
nb-theme(card-header-border-type)
|
||||
nb-theme(card-header-border-color);
|
||||
|
||||
.echart {
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
|
|||
styleUrls: ['./country-orders-chart.component.scss'],
|
||||
template: `
|
||||
<div class="header">
|
||||
<span class="title">Selected Country/Region</span>
|
||||
<h2>{{countryName}}</h2>
|
||||
<span class="caption">Selected Country/Region</span>
|
||||
<h2 class="h4">{{ countryName }}</h2>
|
||||
</div>
|
||||
<div echarts
|
||||
[options]="option"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
|
|||
selector: 'ngx-country-orders',
|
||||
styleUrls: ['./country-orders.component.scss'],
|
||||
template: `
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'xxlarge'">
|
||||
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
|
||||
<nb-card-header>Country Orders Statistics</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-country-orders-map (select)="selectCountryById($event)"
|
||||
|
|
|
|||
|
|
@ -10,61 +10,44 @@
|
|||
|
||||
.leaflet-container {
|
||||
height: 100%;
|
||||
background-color: nb-theme(layout-bg);
|
||||
|
||||
@include nb-for-theme(default) {
|
||||
background-color: nb-theme(color-white);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-white);
|
||||
}
|
||||
background-color: nb-theme(background-basic-color-2);
|
||||
}
|
||||
|
||||
/deep/ .leaflet-top, /deep/ .leaflet-bottom {
|
||||
::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-bar {
|
||||
::ng-deep .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/deep/ .leaflet-control-zoom {
|
||||
::ng-deep .leaflet-control-zoom {
|
||||
border: none;
|
||||
|
||||
a {
|
||||
background-color: nb-theme(color-success);
|
||||
color: nb-theme(color-white);
|
||||
background-color: nb-theme(color-primary-default);
|
||||
color: nb-theme(text-alternate-color);
|
||||
border-bottom: none;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
@include nb-for-theme(cosmic) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
|
||||
@include nb-for-theme(corporate) {
|
||||
background-color: nb-theme(color-primary);
|
||||
}
|
||||
.leaflet-disabled {
|
||||
background-color: nb-theme(color-primary-disabled);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-in {
|
||||
border-top-left-radius: nb-theme(btn-border-radius);
|
||||
border-top-right-radius: nb-theme(btn-border-radius);
|
||||
border-top-left-radius: nb-theme(button-rectangle-border-radius);
|
||||
border-top-right-radius: nb-theme(button-rectangle-border-radius);
|
||||
}
|
||||
|
||||
.leaflet-control-zoom-out {
|
||||
margin-top: 1px;
|
||||
border-bottom-left-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-right-radius: nb-theme(btn-border-radius);
|
||||
border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
|
||||
border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .leaflet-control-attribution {
|
||||
::ng-deep .leaflet-control-attribution {
|
||||
background: transparent;
|
||||
|
||||
a {
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class CountryOrdersMapService {
|
|||
constructor(private http: HttpClient) {}
|
||||
|
||||
getCords(): Observable<any> {
|
||||
return this.http.get('./assets/leaflet-countries/countries.geo.json');
|
||||
return this.http.get('assets/leaflet-countries/countries.geo.json');
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,14 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
NbButtonModule,
|
||||
NbCardModule,
|
||||
NbProgressBarModule,
|
||||
NbTabsetModule,
|
||||
NbUserModule,
|
||||
NbIconModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
} from '@nebular/theme';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
|
|
@ -49,7 +59,15 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
|
|||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbIconModule,
|
||||
NbTabsetModule,
|
||||
NbSelectModule,
|
||||
NbListModule,
|
||||
ChartModule,
|
||||
NbProgressBarModule,
|
||||
NgxEchartsModule,
|
||||
NgxChartsModule,
|
||||
LeafletModule,
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="chart-info">
|
||||
<div class="title" [style.color]="color">{{ name }}</div>
|
||||
<div class="time-period">Last week</div>
|
||||
<div class="value">{{ value }}%</div>
|
||||
<div [style.color]="color">{{ name }}</div>
|
||||
<div class="time-period caption">Last week:</div>
|
||||
<div class="h6">{{ value }}%</div>
|
||||
</div>
|
||||
<ngx-earning-pie-chart [values]="earningPieChartData"
|
||||
(selectPie)="changeChartInfo($event)"
|
||||
|
|
|
|||
|
|
@ -3,11 +3,8 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card-header {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
ngx-earning-pie-chart, .chart-info {
|
||||
ngx-earning-pie-chart,
|
||||
.chart-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
@ -15,26 +12,18 @@
|
|||
padding-top: 0.7rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: nb-theme(font-size-xlg);
|
||||
}
|
||||
|
||||
.time-period {
|
||||
margin-top: 1.5rem;
|
||||
color: nb-theme(color-fg);
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: nb-theme(font-weight-bold);
|
||||
color: nb-theme(color-fg-heading);
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
width: calc(50% - #{nb-theme(card-padding)});
|
||||
height: calc(100% - 2 * #{nb-theme(card-padding)});
|
||||
width: calc(50% - 1.25rem);
|
||||
height: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
@include media-breakpoint-between(xl, xl) {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nb-flip-card [showToggleButton]="false" [flipped]="flipped">
|
||||
<nb-card-front>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<ngx-earning-card-front></ngx-earning-card-front>
|
||||
<i class="nb-arrow-right" (click)="toggleFlipView()"></i>
|
||||
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-front>
|
||||
<nb-card-back>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<ngx-earning-card-back></ngx-earning-card-back>
|
||||
<i class="nb-arrow-right" (click)="toggleFlipView()"></i>
|
||||
<nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
|
||||
</nb-card>
|
||||
</nb-card-back>
|
||||
</nb-flip-card>
|
||||
|
|
|
|||
|
|
@ -5,44 +5,37 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: 0.625rem;
|
||||
top: 1rem;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-rtl(left, 0);
|
||||
padding: 1.5rem;
|
||||
@include nb-rtl(left, 0.625rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/deep/ .flipped {
|
||||
::ng-deep .flipped {
|
||||
.back-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.front-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ngx-earning-card-back, ngx-earning-card-front {
|
||||
ngx-earning-card-back,
|
||||
ngx-earning-card-front {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/deep/ nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/deep/ nb-card-body {
|
||||
::ng-deep nb-card-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export class EarningCardComponent {
|
|||
|
||||
flipped = false;
|
||||
|
||||
toggleFlipView() {
|
||||
toggleView() {
|
||||
this.flipped = !this.flipped;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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