mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-09 23:22:34 +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
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue