mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
feat(dashboard): move status card to separate control, add tabs
This commit is contained in:
KostyaDanovsky
parent
2afb26810e
commit
c483e46e71
7 changed files with 143 additions and 85 deletions
|
|
@ -1,14 +1,25 @@
|
|||
<div class="row status-cards">
|
||||
<div class="col-lg-3" *ngFor="let card of statusCards">
|
||||
<nga-card (click)="card.on = !card.on" [ngClass]="{'on': 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>
|
||||
<ngx-status-cards></ngx-status-cards>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<nga-card size="xmedium">
|
||||
<nga-tabset fullWidth>
|
||||
<nga-tab tabTitle="Temperature">
|
||||
<span>Content #1</span>
|
||||
</nga-tab>
|
||||
<nga-tab tabTitle="Humidity">
|
||||
<span>Content #2</span>
|
||||
</nga-tab>
|
||||
</nga-tabset>
|
||||
</nga-card>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-9">
|
||||
<nga-card size="xmedium">
|
||||
<nga-card-header>
|
||||
Electricity
|
||||
</nga-card-header>
|
||||
</nga-card>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,73 +1,7 @@
|
|||
@import '~@nga/theme/styles_new/all';
|
||||
|
||||
@include nga-install-component() {
|
||||
.status-cards {
|
||||
nga-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
nga-card-header {
|
||||
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: calc(100% + 3px);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: nga-theme(card-border-radius);
|
||||
}
|
||||
|
||||
&.on {
|
||||
box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
||||
|
||||
.icon-container {
|
||||
box-shadow: none;
|
||||
&.success {
|
||||
box-shadow: inset 0 5px 9px 0 #00967d, 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(35, 255, 181, 0.6);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
font-size: 4em;
|
||||
padding: 0.5rem 1.75rem;
|
||||
color: nga-theme(card-foreground);
|
||||
border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
|
||||
|
||||
&.primary {
|
||||
@include btn-hero-primary();
|
||||
}
|
||||
&.success {
|
||||
@include btn-hero-success();
|
||||
}
|
||||
&.info {
|
||||
@include btn-hero-info();
|
||||
}
|
||||
&.warning {
|
||||
@include btn-hero-warning();
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.status {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
color: nga-theme(card-foreground-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,4 @@ import { Component } from '@angular/core';
|
|||
templateUrl: './dashboard.component.html',
|
||||
})
|
||||
export class DashboardComponent {
|
||||
statusCards = [
|
||||
{ title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
|
||||
{ title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
|
||||
{ title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
|
||||
{ title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
|
||||
];
|
||||
}
|
||||
|
|
|
|||
18
src/app/pages/dashboard/dashboard.module.ts
Normal file
18
src/app/pages/dashboard/dashboard.module.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { NgaTabsetModule } from '@nga/theme';
|
||||
|
||||
import { SharedModule } from '../../shared.module';
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { StatusCardsComponent } from './status-cards/status-cards.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
SharedModule,
|
||||
NgaTabsetModule,
|
||||
],
|
||||
declarations: [
|
||||
DashboardComponent,
|
||||
StatusCardsComponent,
|
||||
],
|
||||
})
|
||||
export class DashboardModule { }
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
@import '~@nga/theme/styles_new/all';
|
||||
|
||||
@include nga-install-component() {
|
||||
nga-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 6rem;
|
||||
box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: calc(100% + 3px);
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: nga-theme(card-border-radius);
|
||||
}
|
||||
|
||||
&.on {
|
||||
box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
||||
|
||||
.icon-container {
|
||||
box-shadow: none;
|
||||
&.success {
|
||||
box-shadow: inset 0 5px 9px 0 #00967d, 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(35, 255, 181, 0.6);
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
font-size: 4em;
|
||||
padding: 0.5rem 1.75rem;
|
||||
color: nga-theme(card-foreground);
|
||||
border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
|
||||
|
||||
&.primary {
|
||||
@include btn-hero-primary();
|
||||
}
|
||||
&.success {
|
||||
@include btn-hero-success();
|
||||
}
|
||||
&.info {
|
||||
@include btn-hero-info();
|
||||
}
|
||||
&.warning {
|
||||
@include btn-hero-warning();
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.status {
|
||||
font-size: 1.125rem;
|
||||
font-weight: nga-theme(font-weight-light);
|
||||
text-transform: uppercase;
|
||||
color: nga-theme(card-foreground-secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
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">
|
||||
<nga-card (click)="card.on = !card.on" [ngClass]="{'on': 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-game-controller-b-outline' },
|
||||
{ title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
|
||||
{ title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
|
||||
{ title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
|
||||
];
|
||||
}
|
||||
|
|
@ -5,13 +5,12 @@ import { NgaMenuModule, NgaSidebarModule, NgaThemeModule } from '@nga/theme';
|
|||
import { menuItems } from './pages-menu';
|
||||
|
||||
import { PagesComponent } from './pages.component';
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { DashboardModule } from './dashboard/dashboard.module';
|
||||
import { PagesRoutingModule } from './pages-routing.module';
|
||||
import { ThemeModule } from '../@theme/theme.module';
|
||||
|
||||
const PAGES_COMPONENTS = [
|
||||
PagesComponent,
|
||||
DashboardComponent,
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -22,6 +21,7 @@ const PAGES_COMPONENTS = [
|
|||
NgaMenuModule.forRoot({ items: menuItems }),
|
||||
PagesRoutingModule,
|
||||
ThemeModule,
|
||||
DashboardModule,
|
||||
],
|
||||
declarations: [
|
||||
...PAGES_COMPONENTS,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue