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

refactor(iot): rooms widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 14:59:59 +03:00
parent e2ef6a06cd
commit 8540f4254b
9 changed files with 222 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -14,6 +14,7 @@
.chart-card {
box-shadow: none;
margin-bottom: 0;
border-width: 0;
}
.table-card {

16
src/app/pages/dashboard/rooms/player/player.component.html
View file

@ -1,7 +1,7 @@
<div class="header">My Playlist</div>
<div class="body">
<nb-card>
<nb-card-header class="header">My Playlist</nb-card-header>
<nb-card-body class="body">
<div class="track-info">
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
<div class="details">
@ -28,11 +28,9 @@
<i class="nb-skip-forward next" (click)="next()"></i>
<i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i>
</div>
</nb-card-body>
</div>
<div class="footer">
<nb-card-footer class="footer">
<div class="volume">
<i class="nb-volume-mute"></i>
<div class="progress-wrap">
@ -42,5 +40,5 @@
</div>
<i class="nb-volume-high"></i>
</div>
</div>
</nb-card-footer>
</nb-card>

94
src/app/pages/dashboard/rooms/player/player.component.scss
View file

@ -1,28 +1,21 @@
@import '../../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/components/card/card.component.theme';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~@nebular/theme/styles/core/mixins';
@include nb-install-component() {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.header {
@include nb-card-header();
nb-card {
box-shadow: none;
border-width: 0;
margin: 0;
height: 100%;
}
.body {
display: flex;
flex-direction: column;
flex: 1;
}
.footer {
padding: nb-theme(card-padding);
border-top: 1px solid nb-theme(separator);
padding: 0;
}
.track-info {
@ -32,9 +25,10 @@
flex-direction: column;
flex: 1;
padding: nb-theme(card-padding);
}
.cover {
//border-radius: nb-theme(radius) / 2;
border-radius: nb-theme(card-border-radius);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
@ -47,34 +41,26 @@
padding-top: 1.5rem;
span {
color: nb-theme(color-fg);
}
color: nb-theme(text-hint-color);
}
}
.progress-wrap {
position: relative;
height: 1rem;
}
.progress-foreground {
background-color: nb-theme(color-success);
background-color: nb-theme(color-primary-default);
height: 2px;
position: absolute;
left: 0;
margin-top: calc(0.75rem - 1px);
width: 100px;
@include nb-for-theme(cosmic) {
background-color: nb-theme(link-color);
}
@include nb-for-theme(corporate) {
background-color: nb-theme(color-primary);
}
}
.progress {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
height: 1.5rem;
@ -85,7 +71,7 @@
width: 1rem;
height: 1rem;
border-radius: 50%;
background: nb-theme(color-success);
background: nb-theme(color-primary-default);
cursor: pointer;
margin-top: calc(-0.5rem + 1px);
border: none;
@ -95,20 +81,7 @@
width: 100%;
height: 2px;
cursor: pointer;
background: nb-theme(separator);
}
@include nb-for-theme(cosmic) {
@include install-thumb() {
background: nb-theme(link-color);
}
}
@include nb-for-theme(corporate) {
@include install-thumb() {
background: nb-theme(color-primary);
}
}
background: nb-theme(background-basic-color-3);
}
}
@ -117,7 +90,7 @@
margin: 0 0.5rem;
display: flex;
justify-content: space-between;
color: nb-theme(color-fg);
color: nb-theme(text-hint-color);
.current {
@include nb-ltr(order, 0);
@ -148,21 +121,17 @@
.shuffle, .loop {
font-size: 1.5rem;
color: nb-theme(color-fg);
color: nb-theme(text-hint-color);
&.active {
color: nb-theme(color-success);
@include nb-for-theme(cosmic) {
color: nb-theme(link-color);
}
color: nb-theme(color-primary-default);
}
}
.prev, .next {
width: 3.5rem;
height: 3.5rem;
border: 2px solid nb-theme(separator);
border: 2px solid nb-theme(divider-color);
border-radius: 50%;
font-size: 1.75rem;
}
@ -183,7 +152,7 @@
i {
font-size: 1.5rem;
margin: 0.25rem;
color: nb-theme(color-fg);
color: nb-theme(text-hint-color);
}
.progress-wrap {
@ -195,18 +164,20 @@
left: auto;
margin-top: calc(1rem + 1px);
z-index: 0;
max-width: 99.5%;
}
.progress {
height: 2.25rem;
overflow: visible;
@include install-thumb() {
width: 1.5rem;
height: 1.5rem;
background-color: nb-theme(color-white);
//box-shadow: 0 0.125rem 0.5rem 0 rgba(nb-theme(color-fg), 0.4);
//border: solid 1px rgba(nb-theme(color-fg), 0.4);
margin-top: calc(-0.875rem + 1px);
background-color: nb-theme(background-basic-color-1);
box-shadow: 0 0.125rem 0.5rem 0 nb-theme(border-basic-color-3);
border: 1px solid nb-theme(border-basic-color-3);
margin-top: -0.75rem;
position: relative;
z-index: 10;
}
@ -230,6 +201,7 @@
justify-content: space-between;
align-items: center;
padding: 0;
overflow: visible;
}
.footer {
@ -245,7 +217,6 @@
.cover {
height: $player-height;
width: $player-height;
border-radius: 0 0 0 nb-theme(radius);
flex: none;
}
@ -299,21 +270,8 @@
}
.track-info .details {
@include media-breakpoint-down(sm) {
h4 {
font-size: 1.25rem;
}
span {
font-size: 0.875rem;
}
}
@include media-breakpoint-down(is) {
h4 {
font-size: 1rem;
}
span {
font-size: 0.75rem;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;

4
src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
View file

@ -1,4 +1,5 @@
<div class="header">Room Management</div>
<nb-card>
<nb-card-header>Room Management</nb-card-header>
<div class="room-selector">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="viewBox" preserveAspectRatio="xMidYMid">
@ -84,3 +85,4 @@
</g>
</svg>
</div>
</nb-card>

57
src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
View file

@ -1,8 +1,19 @@
@import '../../../../@theme/styles/themes';
@import '~@nebular/theme/components/card/card.component.theme';
@include nb-install-component() {
nb-card {
background-color: transparent;
border-width: 0;
box-shadow: none;
height: 100%;
margin: 0;
}
nb-card-header {
border-color: transparent;
}
svg {
width: 100%;
}
@ -30,7 +41,7 @@
}
.room-bg {
fill: nb-theme(card-bg);
fill: nb-theme(card-background-color);
stroke: transparent;
cursor: pointer;
stroke-width: 4px;
@ -46,58 +57,22 @@
cursor: pointer;
user-select: none;
pointer-events: none;
fill: nb-theme(color-fg);
fill: nb-theme(text-hint-color);
}
.selected-room {
z-index: 40;
.room-text {
fill: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bolder);
fill: nb-theme(text-basic-color);
}
.room-border {
stroke: nb-theme(color-success);
stroke: nb-theme(color-primary-default);
}
}
.header {
@include nb-card-header();
border-bottom: none;
padding-bottom: 0;
}
@include nb-for-theme(cosmic) {
.stroke-pattern, .stroked-element, .room-border {
stroke: #a1a1e5;
}
.room-text {
fill: nb-theme(color-fg-heading);
}
.selected-room {
.room-text {
font-weight: nb-theme(font-weight-normal);
}
.room-bg {
fill: rgba(0, 255, 170, 0.2);
filter: url('#f2');
}
.room-border {
stroke: #00f9a6;
}
.room-border-glow {
filter: url('#f2');
}
}
}
@include nb-for-theme(corporate) {
.selected-room {
.room-border {
stroke: nb-theme(color-primary);
}
}
}
}

17
src/app/pages/dashboard/rooms/rooms.component.scss
View file

@ -5,18 +5,13 @@
@include nb-install-component() {
ngx-room-selector {
width: 70%;
border-right: 2px solid nb-theme(separator);
border-right: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
background: url('../../../../assets/images/square_pattern.svg') repeat;
background-size: 75px;
@include nb-for-theme(cosmic) {
&.dark-background {
background-image: url('../../../../assets/images/square_pattern_cosmic.svg');
}
@include nb-for-theme(corporate) {
background: none;
border-right-color: nb-theme(tabs-separator);
}
}
ngx-player {
@ -62,15 +57,11 @@
.collapse {
display: inline-block;
position: absolute;
top: 0.5rem;
top: 0.7rem;
left: 50%;
transform: translateX(-50%);
font-size: 3rem;
font-size: 2rem;
color: nb-theme(color-fg);
&:focus {
outline: none;
}
}
}
}

21
src/app/pages/dashboard/rooms/rooms.component.ts
View file

@ -1,13 +1,18 @@
import { Component, HostBinding, OnDestroy } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme';
import { map } from 'rxjs/operators';
@Component({
selector: 'ngx-rooms',
styleUrls: ['./rooms.component.scss'],
template: `
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : 'medium'">
<i (click)="collapse()" class="nb-arrow-down collapse" [hidden]="isCollapsed()"></i>
<ngx-room-selector (select)="select($event)"></ngx-room-selector>
<nb-card [size]="breakpoint.width >= breakpoints.sm ? 'large' : ''">
<nb-icon icon="arrow-ios-downward" pack="eva"
(click)="collapse()"
class="collapse"
[hidden]="isCollapsed()">
</nb-icon>
<ngx-room-selector [class.dark-background]="isDarkTheme" (select)="select($event)"></ngx-room-selector>
<ngx-player [collapsed]="isCollapsed() && breakpoint.width <= breakpoints.md"></ngx-player>
</nb-card>
`,
@ -18,18 +23,25 @@ export class RoomsComponent implements OnDestroy {
private expanded: boolean;
private selected: number;
isDarkTheme: boolean;
breakpoint: NbMediaBreakpoint;
breakpoints: any;
themeSubscription: any;
themeChangeSubscription: any;
constructor(private themeService: NbThemeService,
private breakpointService: NbMediaBreakpointsService) {
this.breakpoints = this.breakpointService.getBreakpointsMap();
this.themeSubscription = this.themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
.subscribe(([, newValue]) => {
this.breakpoint = newValue;
});
this.themeChangeSubscription = this.themeService.onThemeChange()
.pipe(map(({ name }) => name === 'cosmic' || name === 'dark'))
.subscribe((isDark: boolean) => this.isDarkTheme = isDark);
}
select(roomNumber) {
@ -60,5 +72,6 @@ export class RoomsComponent implements OnDestroy {
ngOnDestroy() {
this.themeSubscription.unsubscribe();
this.themeChangeSubscription.unsubscribe();
}
}

2
src/assets/images/square_pattern_cosmic.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><defs><style>.cls-1{fill:none;stroke:#342e73;stroke-miterlimit:10;}</style></defs><title>Asset 2_svg</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="75" x2="75" y2="150"/><line class="cls-1" x1="150" y1="75" y2="75"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><defs><style>.cls-1{fill:none;stroke:#1b1b38;stroke-miterlimit:10;}</style></defs><title>Asset 2_svg</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="75" x2="75" y2="150"/><line class="cls-1" x1="150" y1="75" y2="75"/></g></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 351 B

Before After
Before After