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

fix(dashboard): refactor status cards: move grid to dashboard

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-13 16:25:12 +03:00
parent 5f6f0d28d7
commit fe96d074ef
5 changed files with 51 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/app/pages/dashboard/dashboard.component.html
View file

@ -1,5 +1,28 @@
<ngx-status-cards>
</ngx-status-cards>
<div class="row">
<div class="col-lg-3">
<ngx-status-card title="Light" type="primary">
<i class="ion-ios-lightbulb-outline"></i>
</ngx-status-card>
</div>
<div class="col-lg-3">
<ngx-status-card title="Roller Shades" type="success">
<i class="ion-ios-photos-outline"></i>
</ngx-status-card>
</div>
<div class="col-lg-3">
<ngx-status-card title="Wireless Audio" type="info">
<i class="ion-ios-game-controller-b-outline"></i>
</ngx-status-card>
</div>
<div class="col-lg-3">
<ngx-status-card title="Coffee Maker" type="warning">
<i class="ion-ios-lightbulb-outline"></i>
</ngx-status-card>
</div>
</div>
<div class="row">
<div class="col-lg-3">

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

@ -3,7 +3,7 @@ import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
import { SharedModule } from '../../shared.module';
import { DashboardComponent } from './dashboard.component';
import { StatusCardsComponent } from './status-cards/status-cards.component';
import { StatusCardComponent } from './status-card/status-card.component';
import { ContactsComponent } from './contacts/contacts.component';
import { RoomsComponent } from './rooms/rooms.component';
import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
@ -22,7 +22,7 @@ import { WeatherComponent } from './weather/weather.component';
],
declarations: [
DashboardComponent,
StatusCardsComponent,
StatusCardComponent,
TemperatureDraggerComponent,
ContactsComponent,
RoomSelectorComponent,

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

@ -7,7 +7,6 @@
align-items: center;
height: 6rem;
overflow: visible;
cursor: pointer;
color: nga-theme(card-fg-heading);
$bevel: btn-hero-bevel(nga-theme(card-bg));

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

@ -0,0 +1,24 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'ngx-status-card',
styleUrls: ['./status-card.component.scss'],
template: `
<nga-card (click)="on = !on" [ngClass]="{'off': !on}">
<div class="icon-container {{ type }}">
<ng-content></ng-content>
</div>
<div class="details">
<div class="title">{{ title }}</div>
<div class="status">{{ on ? 'ON' : 'OFF' }}</div>
</div>
</nga-card>
`,
})
export class StatusCardComponent {
@Input() title: string;
@Input() type: string;
@Input() on: boolean = true;
}

30
src/app/pages/dashboard/status-cards/status-cards.component.ts
View file

@ -1,30 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-status-cards',
styleUrls: ['./status-cards.component.scss'],
template: `
<div class="row">
<div class="col-lg-3" *ngFor="let card of statusCards" size="xsmall">
<nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
<div class="icon-container {{card.type}}">
<i class="{{card.icon}}"></i>
</div>
<div class="details">
<div class="title">{{card.title}}</div>
<div class="status">{{card.on ? 'ON' : 'OFF'}}</div>
</div>
</nga-card>
</div>
</div>
`,
})
export class StatusCardsComponent {
statusCards = [
{ title: 'Light', on: true, type: 'primary', icon: 'ion-ios-lightbulb-outline' },
{ title: 'Roller Shades', on: true, type: 'success', icon: 'ion-ios-photos-outline' },
{ title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
{ title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
];
}