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

refactor(temperature): use Nebular button and icon

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-22 12:35:43 +03:00
parent 55a40716a2
commit 1fc919c27a
3 changed files with 17 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -44,6 +44,7 @@ import { FormsModule } from '@angular/forms';
NbSelectModule, NbSelectModule,
NbListModule, NbListModule,
NbIconModule, NbIconModule,
NbButtonModule,
NgxEchartsModule, NgxEchartsModule,
], ],
declarations: [ declarations: [

17
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
View file

@ -21,14 +21,19 @@
<g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'"> <g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
<g class="toFilter" [attr.filter]="'url(#blurFilter' + 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> <path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
</g> </g>
<!-- ngFor is a quirk fix for webkit rendering issues --> <!-- 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> <path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
</g> </g>
<circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius" <circle [attr.cx]="styles.thumbPosition.x"
[attr.stroke-width]="thumbBorder / scaleFactor" [attr.fill]="thumbBg" [attr.stroke]="thumbBorderColor"></circle> [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> </g>
</svg> </svg>
</div> </div>
@ -37,6 +42,6 @@
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
<div class="power-bg" [ngClass]="{'off': off}" (click)="switchPower()"> <button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<i class="nb-power-circled"></i> <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</div> </button>

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

@ -50,23 +50,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
font-size: 3rem;
color: nb-theme(text-basic-color);
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color); border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&:hover { &.on {
background-color: nb-theme(color-basic-hover);
color: nb-theme(text-basic-color);
}
&:active {
background-color: nb-theme(color-basic-default);
box-shadow: none;
}
&.off:not(:hover) {
color: nb-theme(text-hint-color); color: nb-theme(text-hint-color);
text-shadow: none;
} }
} }
.power-icon {
font-size: 3rem;
}
} }