Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-24 02:06:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement ripple effect for material themes

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-04 19:31:08 +03:00
parent b03633ba9f
commit 690bd322c2
12 changed files with 70 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/pages/dashboard/dashboard.component.ts
View file

@ -54,6 +54,8 @@ export class DashboardComponent implements OnDestroy {
cosmic: CardSettings[];
corporate: CardSettings[];
dark: CardSettings[];
'material-dark': CardSettings[];
'material-light': CardSettings[];
} = {
default: this.commonStatusCardsSet,
cosmic: this.commonStatusCardsSet,
@ -76,6 +78,8 @@ export class DashboardComponent implements OnDestroy {
},
],
dark: this.commonStatusCardsSet,
'material-dark': this.commonStatusCardsSet,
'material-light': this.commonStatusCardsSet,
};
constructor(private themeService: NbThemeService,

1
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -5,7 +5,6 @@
flex-direction: row;
align-items: center;
height: 6rem;
overflow: visible;
.icon-container {
height: 100%;

2
src/app/pages/dashboard/status-card/status-card.component.ts
View file

@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
selector: 'ngx-status-card',
styleUrls: ['./status-card.component.scss'],
template: `
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
<nb-card matRipple (click)="on = !on" [ngClass]="{'off': !on}">
<div class="icon-container">
<div class="icon status-{{ type }}">
<ng-content></ng-content>

8
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -20,16 +20,16 @@
</div>
<nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
<nb-radio value="cool">
<nb-radio matRipple value="cool">
<i class="nb-snowy-circled"></i>
</nb-radio>
<nb-radio value="warm">
<nb-radio matRipple value="warm">
<i class="nb-sunny-circled"></i>
</nb-radio>
<nb-radio value="heat">
<nb-radio matRipple value="heat">
<i class="nb-flame-circled"></i>
</nb-radio>
<nb-radio value="fan">
<nb-radio matRipple value="fan">
<i class="nb-loop-circled"></i>
</nb-radio>
</nb-radio-group>