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

Add ripple effects to controls across application

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-05 18:17:17 +03:00 • committed by Maksim Karatkevich
parent bef0105a9f
commit 3f77efdabf
34 changed files with 1538 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/pages/dashboard/contacts/contacts.component.html Normal file
View file

@ -0,0 +1,23 @@
<nb-card size="giant">
<nb-tabset fullWidth>
<nb-tab tabTitle="Contacts">
<nb-list>
<nb-list-item matRipple class="contact" *ngFor="let c of contacts">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<nb-icon icon="phone-outline" pack="eva"></nb-icon>
</nb-list-item>
</nb-list>
</nb-tab>
<nb-tab tabTitle="Recent">
<nb-list>
<nb-list-item matRipple class="contact" *ngFor="let c of recent">
<nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
<span class="caption">{{ c.time | date: 'shortTime' }}</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>

47
src/app/pages/dashboard/electricity/electricity.component.html Normal file
View file

@ -0,0 +1,47 @@
<nb-card class="cards-container">
<nb-card size="large" class="table-card">
<nb-card-header>
Electricity Consumption
</nb-card-header>
<nb-tabset fullWidth>
<nb-tab *ngFor="let year of listData" [tabTitle]="year.title" [active]="year.active">
<nb-list>
<nb-list-item *ngFor="let month of year.months">
<span class="month">{{ month.month }}</span>
<span>
<nb-icon
[class.down]="month.down"
[class.up]="!month.down"
[icon]="month.down ? 'arrow-down' : 'arrow-up'" pack="eva">
</nb-icon>
{{ month.delta }}
</span>
<span class="results">
{{ month.kWatts }} <span class="caption">kWh</span> / {{ month.cost }} <span class="caption">USD</span>
</span>
</nb-list-item>
</nb-list>
</nb-tab>
</nb-tabset>
</nb-card>
<nb-card size="large" class="chart-card">
<nb-card-header>
<span class="stats">
<span class="caption">Consumed</span>
<span>816 <span class="caption">kWh</span></span>
</span>
<span class="stats">
<span class="caption">Spent</span>
<span>291 <span class="caption">USD</span></span>
</span>
<nb-select matRipple [(selected)]="type" class="type-select">
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>
<ngx-electricity-chart [data]="chartData"></ngx-electricity-chart>
</nb-card>
</nb-card>

61
src/app/pages/dashboard/security-cameras/security-cameras.component.html Normal file
View file

@ -0,0 +1,61 @@
<nb-card size="giant">
<nb-card-header>
Security Cameras
<button class="single-view-button"
nbButton
size="small"
[appearance]="isSingleView ? 'filled' : 'outline'"
(click)="isSingleView = true">
<i class="nb-square"></i>
</button>
<button class="grid-view-button"
nbButton
size="small"
[appearance]="isSingleView ? 'outline' : 'filled'"
(click)="isSingleView = false">
<nb-icon icon="grid" pack="eva"></nb-icon>
</button>
</nb-card-header>
<div class="grid-container">
<div class="single-view" *ngIf="isSingleView">
<div class="camera single" [style.background-image]="'url(' + selectedCamera.source + ')'">
<span class="camera-name">{{ selectedCamera.title }}</span>
</div>
</div>
<div class="grid-view" *ngIf="!isSingleView">
<div class="camera"
*ngFor="let camera of cameras"
[style.background-image]="'url(' + camera.source + ')'"
(click)="selectCamera(camera)">
<span class="camera-name">{{ camera.title }}</span>
</div>
</div>
</div>
<nb-card-footer>
<nb-actions [size]="actionSize" fullWidth>
<nb-action matRipple>
<nb-icon icon="pause-circle-outline" pack="eva"></nb-icon>
Pause
</nb-action>
<nb-action matRipple>
<nb-icon icon="list-outline" pack="eva"></nb-icon>
Logs
</nb-action>
<nb-action matRipple>
<nb-icon icon="search-outline" pack="eva"></nb-icon>
Search
</nb-action>
<nb-action matRipple>
<nb-icon icon="settings-2-outline" pack="eva"></nb-icon>
Setup
</nb-action>
</nb-actions>
</nb-card-footer>
</nb-card>

7
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -72,6 +72,10 @@
background-size: cover;
position: relative;
&:not(.single) {
cursor: pointer;
}
&::before {
background-color: rgba(255, 255, 255, 0.1);
content: '';
@ -96,6 +100,9 @@
}
nb-action {
cursor: pointer;
border-radius: 2px;
nb-icon {
@include nb-ltr(margin-right, 0.5rem);
@include nb-rtl(margin-left, 0.5rem);

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

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

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

@ -0,0 +1,47 @@
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAACJJREFUaN7twTEBAAAAwiD7pzbFPmAAAAAAAAAAAAAAAGQOLbQAAU3zwM4AAAAASUVORK5CYII=">
<div class="svg-container">
<svg #svgRoot xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
[attr.viewBox]="styles.viewBox" preserveAspectRatio="xMinYMin meet" (mousedown)="mouseDown($event)">
<defs>
<filter [attr.id]="'blurFilter' + svgControlId" x="0" y="0" width="100%" height="100%">
<feGaussianBlur in="SourceGraphic" [attr.stdDeviation]="styles.blurRadius" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="1 1"/>
</feComponentTransfer>
</filter>
<clipPath [attr.id]="'sliderClip' + svgControlId">
<path [attr.d]="styles.clipPathStr" stroke="black"></path>
</clipPath>
</defs>
<g [attr.transform]="styles.arcTranslateStr">
<g class="toClip" [attr.clip-path]="getUrlPath('#sliderClip')">
<g class="toFilter" [attr.filter]="getUrlPath('#blurFilter')">
<path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
</g>
<!-- 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>
</g>
<circle [attr.cx]="styles.thumbPosition.x"
[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>
</svg>
</div>
<div class="temperature-bg">
<ng-content></ng-content>
</div>
<button nbButton matRipple appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
<nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
</button>

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

@ -0,0 +1,65 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
position: relative;
img {
width: 100%;
height: auto;
visibility: hidden;
}
.svg-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.temperature-bg {
position: absolute;
width: 88%;
height: 88%;
top: 13%;
left: 6%;
border-radius: 50%;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
}
.power-bg {
position: absolute;
width: 5.25rem;
height: 5.25rem;
background-color: nb-theme(card-background-color) !important;
border-radius: 50%;
bottom: 2%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 2;
cursor: pointer;
border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
&.on {
color: nb-theme(color-primary-default);
}
}
.power-icon {
position: absolute;
top: 50%;
margin-top: -0.625rem;
left: 50%;
margin-left: -0.625rem;
font-size: 3rem;
}
}

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

@ -51,16 +51,16 @@
</div>
<nb-radio-group [(ngModel)]="humidityMode" name="humidity-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>

51
src/app/pages/dashboard/traffic/traffic.component.ts Normal file
View file

@ -0,0 +1,51 @@
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { TrafficChartData } from '../../../@core/data/traffic-chart';
@Component({
selector: 'ngx-traffic',
styleUrls: ['./traffic.component.scss'],
template: `
<nb-card size="tiny">
<nb-card-header>
<span>Traffic Consumption</span>
<nb-select matRipple [(selected)]="type">
<nb-option matRipple *ngFor="let t of types" [value]="t">{{ t }}</nb-option>
</nb-select>
</nb-card-header>
<ngx-traffic-chart [points]="trafficChartPoints"></ngx-traffic-chart>
</nb-card>
`,
})
export class TrafficComponent implements OnDestroy {
private alive = true;
trafficChartPoints: number[];
type = 'month';
types = ['week', 'month', 'year'];
currentTheme: string;
constructor(private themeService: NbThemeService,
private trafficChartService: TrafficChartData) {
this.themeService.getJsTheme()
.pipe(takeWhile(() => this.alive))
.subscribe(theme => {
this.currentTheme = theme.name;
});
this.trafficChartService.getTrafficChartData()
.pipe(takeWhile(() => this.alive))
.subscribe((data) => {
this.trafficChartPoints = data;
});
}
ngOnDestroy() {
this.alive = false;
}
}