mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-21 08:46:10 +01:00
Implement ripple effect for material themes
This commit is contained in:
eugene-sinitsyn
Maksim Karatkevich
parent
c7bcbca7bd
commit
2f7d61ded1
12 changed files with 334 additions and 15 deletions
|
|
@ -1,8 +1,103 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Component, OnDestroy} from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators' ;
|
||||
import { SolarData } from '../../@core/data/solar';
|
||||
|
||||
interface CardSettings {
|
||||
title: string;
|
||||
iconClass: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dashboard',
|
||||
styleUrls: ['./dashboard.component.scss'],
|
||||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent {
|
||||
export class DashboardComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
solarValue: number;
|
||||
lightCard: CardSettings = {
|
||||
title: 'Light',
|
||||
iconClass: 'nb-lightbulb',
|
||||
type: 'primary',
|
||||
};
|
||||
rollerShadesCard: CardSettings = {
|
||||
title: 'Roller Shades',
|
||||
iconClass: 'nb-roller-shades',
|
||||
type: 'success',
|
||||
};
|
||||
wirelessAudioCard: CardSettings = {
|
||||
title: 'Wireless Audio',
|
||||
iconClass: 'nb-audio',
|
||||
type: 'info',
|
||||
};
|
||||
coffeeMakerCard: CardSettings = {
|
||||
title: 'Coffee Maker',
|
||||
iconClass: 'nb-coffee-maker',
|
||||
type: 'warning',
|
||||
};
|
||||
|
||||
statusCards: string;
|
||||
|
||||
commonStatusCardsSet: CardSettings[] = [
|
||||
this.lightCard,
|
||||
this.rollerShadesCard,
|
||||
this.wirelessAudioCard,
|
||||
this.coffeeMakerCard,
|
||||
];
|
||||
|
||||
statusCardsByThemes: {
|
||||
default: CardSettings[];
|
||||
cosmic: CardSettings[];
|
||||
corporate: CardSettings[];
|
||||
dark: CardSettings[];
|
||||
'material-dark': CardSettings[];
|
||||
'material-light': CardSettings[];
|
||||
} = {
|
||||
default: this.commonStatusCardsSet,
|
||||
cosmic: this.commonStatusCardsSet,
|
||||
corporate: [
|
||||
{
|
||||
...this.lightCard,
|
||||
type: 'warning',
|
||||
},
|
||||
{
|
||||
...this.rollerShadesCard,
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
...this.wirelessAudioCard,
|
||||
type: 'danger',
|
||||
},
|
||||
{
|
||||
...this.coffeeMakerCard,
|
||||
type: 'info',
|
||||
},
|
||||
],
|
||||
dark: this.commonStatusCardsSet,
|
||||
'material-dark': this.commonStatusCardsSet,
|
||||
'material-light': this.commonStatusCardsSet,
|
||||
};
|
||||
|
||||
constructor(private themeService: NbThemeService,
|
||||
private solarService: SolarData) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.statusCards = this.statusCardsByThemes[theme.name];
|
||||
});
|
||||
|
||||
this.solarService.getSolarData()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((data) => {
|
||||
this.solarValue = data;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
|
||||
.icon-container {
|
||||
height: 100%;
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 5.75rem;
|
||||
height: 4.75rem;
|
||||
font-size: 3.75rem;
|
||||
border-radius: nb-theme(card-border-radius);
|
||||
transition: width 0.4s ease;
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-backface-visibility: hidden;
|
||||
color: nb-theme(text-control-color);
|
||||
|
||||
@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);
|
||||
|
||||
&: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(text-hint-color);
|
||||
|
||||
.status,
|
||||
.title,
|
||||
.icon {
|
||||
color: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
@each $status in nb-get-statuses() {
|
||||
.icon.status-#{$status} {
|
||||
box-shadow: none;
|
||||
background-image: linear-gradient(to right, transparent, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
@include nb-ltr(padding, 0 0.5rem 0 0.75rem);
|
||||
@include nb-rtl(padding, 0 0.75rem 0 0.5rem);
|
||||
border-left: 1px solid transparent;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
src/app/pages/dashboard/status-card/status-card.component.ts
Normal file
26
src/app/pages/dashboard/status-card/status-card.component.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-status-card',
|
||||
styleUrls: ['./status-card.component.scss'],
|
||||
template: `
|
||||
<nb-card matRipple (click)="on = !on" [ngClass]="{'off': !on}">
|
||||
<div class="icon-container">
|
||||
<div class="icon status-{{ type }}">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<div class="title h5">{{ title }}</div>
|
||||
<div class="status paragraph-2">{{ on ? 'ON' : 'OFF' }}</div>
|
||||
</div>
|
||||
</nb-card>
|
||||
`,
|
||||
})
|
||||
export class StatusCardComponent {
|
||||
|
||||
@Input() title: string;
|
||||
@Input() type: string;
|
||||
@Input() on = true;
|
||||
}
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<nb-card size="large">
|
||||
<nb-tabset fullWidth>
|
||||
|
||||
<nb-tab tabTitle="Temperature">
|
||||
|
||||
<div class="slider-container">
|
||||
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
|
||||
[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 h1">
|
||||
{{ temperatureOff ? '--' : (temperature | ngxRound) }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
Celsius
|
||||
</div>
|
||||
</div>
|
||||
</ngx-temperature-dragger>
|
||||
</div>
|
||||
|
||||
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
|
||||
<nb-radio matRipple value="cool">
|
||||
<i class="nb-snowy-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio matRipple value="warm">
|
||||
<i class="nb-sunny-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio matRipple value="heat">
|
||||
<i class="nb-flame-circled"></i>
|
||||
</nb-radio>
|
||||
<nb-radio matRipple 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]="theme.arcEmpty"
|
||||
[fillColors]="theme.arcFill" [thumbBg]="theme.thumbBg" [thumbBorderColor]="theme.thumbBorder">
|
||||
|
||||
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
|
||||
<div class="value humidity h1">
|
||||
{{ humidityOff ? '--' : (humidity | ngxRound) }}
|
||||
</div>
|
||||
</div>
|
||||
</ngx-temperature-dragger>
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue