From 8540f4254bf93a78b300f1b5f09db37fa8de37a2 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Tue, 18 Jun 2019 14:59:59 +0300 Subject: [PATCH] refactor(iot): rooms widget --- .../electricity/electricity.component.html | 4 +- .../electricity/electricity.component.scss | 1 + .../rooms/player/player.component.html | 78 ++++----- .../rooms/player/player.component.scss | 162 +++++++---------- .../room-selector.component.html | 164 +++++++++--------- .../room-selector.component.scss | 57 ++---- .../dashboard/rooms/rooms.component.scss | 17 +- .../pages/dashboard/rooms/rooms.component.ts | 21 ++- src/assets/images/square_pattern_cosmic.svg | 2 +- 9 files changed, 222 insertions(+), 284 deletions(-) diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html index 17ee199c..7085cbd7 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -30,11 +30,11 @@ Consumed - 816kWh + 816 kWh Spent - 291USD + 291 USD diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index b9054574..d4c14c4e 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -14,6 +14,7 @@ .chart-card { box-shadow: none; margin-bottom: 0; + border-width: 0; } .table-card { diff --git a/src/app/pages/dashboard/rooms/player/player.component.html b/src/app/pages/dashboard/rooms/player/player.component.html index 020f0151..06f6dcba 100644 --- a/src/app/pages/dashboard/rooms/player/player.component.html +++ b/src/app/pages/dashboard/rooms/player/player.component.html @@ -1,46 +1,44 @@ -
My Playlist
+ + My Playlist -
- -
-
-
-

{{ track.name }}

- {{ track.artist }} + +
+
+
+

{{ track.name }}

+ {{ track.artist }} +
-
-
- -
-
- -
- {{ player.currentTime | timing }} - - {{ player.duration - player.currentTime | timing }} -
- -
- - - - - -
- -
- -
- -
-
- -
+ +
- -
-
+
+ {{ player.currentTime | timing }} + - {{ player.duration - player.currentTime | timing }} +
+ +
+ + + + + +
+ + + +
+ +
+ +
+
+ +
+ + diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss index 9953a229..2c8ee84c 100644 --- a/src/app/pages/dashboard/rooms/player/player.component.scss +++ b/src/app/pages/dashboard/rooms/player/player.component.scss @@ -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,83 +25,63 @@ flex-direction: column; flex: 1; padding: nb-theme(card-padding); + } - .cover { - //border-radius: nb-theme(radius) / 2; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - width: 10rem; - height: 10rem; - } + .cover { + border-radius: nb-theme(card-border-radius); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + width: 10rem; + height: 10rem; + } - .details { - text-align: center; - padding-top: 1.5rem; + .details { + text-align: center; + padding-top: 1.5rem; - span { - color: nb-theme(color-fg); - } + span { + color: nb-theme(text-hint-color); } } .progress-wrap { position: relative; height: 1rem; + } - .progress-foreground { - background-color: nb-theme(color-success); - height: 2px; - position: absolute; - left: 0; - margin-top: calc(0.75rem - 1px); - width: 100px; + .progress-foreground { + 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); - } + .progress { + appearance: none; + width: 100%; + background: transparent; + height: 1.5rem; + outline: none; + position: absolute; - @include nb-for-theme(corporate) { - background-color: nb-theme(color-primary); - } + @include install-thumb() { + width: 1rem; + height: 1rem; + border-radius: 50%; + background: nb-theme(color-primary-default); + cursor: pointer; + margin-top: calc(-0.5rem + 1px); + border: none; } - .progress { - -webkit-appearance: none; + @include install-track() { width: 100%; - background: transparent; - height: 1.5rem; - outline: none; - position: absolute; - - @include install-thumb() { - width: 1rem; - height: 1rem; - border-radius: 50%; - background: nb-theme(color-success); - cursor: pointer; - margin-top: calc(-0.5rem + 1px); - border: none; - } - - @include install-track() { - 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); - } - } + height: 2px; + cursor: pointer; + 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; diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html index 8fc0c75a..e6cf9783 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html @@ -1,86 +1,88 @@ -
Room Management
-
- - + + Room Management +
+ + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - - - {{room.name.text}} - - -
+ + + + + {{room.name.text}} + + +
+ diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss index 7828b153..0316bf7e 100644 --- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss +++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss @@ -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); - } - } - } } diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss index 05aa2bad..e5a3af0b 100644 --- a/src/app/pages/dashboard/rooms/rooms.component.scss +++ b/src/app/pages/dashboard/rooms/rooms.component.scss @@ -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; - } } } } diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts index 0b151560..c360d080 100644 --- a/src/app/pages/dashboard/rooms/rooms.component.ts +++ b/src/app/pages/dashboard/rooms/rooms.component.ts @@ -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: ` - - - + + + + `, @@ -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(); } } diff --git a/src/assets/images/square_pattern_cosmic.svg b/src/assets/images/square_pattern_cosmic.svg index fa11141d..41649576 100644 --- a/src/assets/images/square_pattern_cosmic.svg +++ b/src/assets/images/square_pattern_cosmic.svg @@ -1 +1 @@ -Asset 2_svg +Asset 2_svg