mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
refactor(iot): rooms widget
This commit is contained in:
Sergey Andrievskiy
parent
e2ef6a06cd
commit
8540f4254b
9 changed files with 222 additions and 284 deletions
|
|
@ -30,11 +30,11 @@
|
|||
<nb-card-header>
|
||||
<span class="stats">
|
||||
<span class="caption">Consumed</span>
|
||||
<span>816<span class="caption">kWh</span></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>291 <span class="caption">USD</span></span>
|
||||
</span>
|
||||
|
||||
<nb-select [(selected)]="type" class="type-select">
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
.chart-card {
|
||||
box-shadow: none;
|
||||
margin-bottom: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
|
|
|
|||
|
|
@ -1,46 +1,44 @@
|
|||
<div class="header">My Playlist</div>
|
||||
<nb-card>
|
||||
<nb-card-header class="header">My Playlist</nb-card-header>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<div class="track-info">
|
||||
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
|
||||
<div class="details">
|
||||
<h4>{{ track.name }}</h4>
|
||||
<span>{{ track.artist }}</span>
|
||||
<nb-card-body class="body">
|
||||
<div class="track-info">
|
||||
<div class="cover" style.background-image="url('{{track.cover}}')"></div>
|
||||
<div class="details">
|
||||
<h4>{{ track.name }}</h4>
|
||||
<span>{{ track.artist }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-wrap">
|
||||
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
(input)="setProgress(duration.value)" #duration>
|
||||
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
|
||||
</div>
|
||||
|
||||
<div class="timing">
|
||||
<small class="current">{{ player.currentTime | timing }}</small>
|
||||
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i>
|
||||
<i class="nb-skip-backward prev" (click)="prev()"></i>
|
||||
<i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i>
|
||||
<i class="nb-skip-forward next" (click)="next()"></i>
|
||||
<i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
<div class="volume">
|
||||
<i class="nb-volume-mute"></i>
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||
(input)="setVolume(volume.value)" #volume>
|
||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||
<input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
|
||||
(input)="setProgress(duration.value)" #duration>
|
||||
<div class="progress-foreground" [style.width.%]="getProgress()"></div>
|
||||
</div>
|
||||
<i class="nb-volume-high"></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="timing">
|
||||
<small class="current">{{ player.currentTime | timing }}</small>
|
||||
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i>
|
||||
<i class="nb-skip-backward prev" (click)="prev()"></i>
|
||||
<i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i>
|
||||
<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>
|
||||
|
||||
<nb-card-footer class="footer">
|
||||
<div class="volume">
|
||||
<i class="nb-volume-mute"></i>
|
||||
<div class="progress-wrap">
|
||||
<input type="range" class="progress" [value]="getVolume()" max="100"
|
||||
(input)="setVolume(volume.value)" #volume>
|
||||
<div class="progress-foreground" [style.width.%]="getVolume()"></div>
|
||||
</div>
|
||||
<i class="nb-volume-high"></i>
|
||||
</div>
|
||||
</nb-card-footer>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,86 +1,88 @@
|
|||
<div class="header">Room Management</div>
|
||||
<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">
|
||||
<defs>
|
||||
<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">
|
||||
<defs>
|
||||
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
<filter id="f2" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur result="blurOut" in="StrokePaint" stdDeviation="3"/>
|
||||
</filter>
|
||||
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<pattern id="New_Pattern_Swatch_1" data-name="New Pattern Swatch 1" width="60" height="60"
|
||||
patternUnits="userSpaceOnUse" viewBox="0 0 60 60">
|
||||
<line class="stroke-pattern" x1="-113.26" y1="123.26" x2="3.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="133.26" x2="13.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="143.26" x2="23.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="153.26" x2="33.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="163.26" x2="43.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="173.26" x2="53.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="123.26" x2="63.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="133.26" x2="73.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="143.26" x2="83.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="153.26" x2="93.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="163.26" x2="103.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="173.26" x2="113.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="123.26" x2="123.26" y2="6.74"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="133.26" x2="133.26" y2="16.74"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="143.26" x2="143.26" y2="26.74"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="153.26" x2="153.26" y2="36.74"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="163.26" x2="163.26" y2="46.74"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="173.26" x2="173.26" y2="56.74"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="63.26" x2="3.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="73.26" x2="13.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="83.26" x2="23.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="93.26" x2="33.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="103.26" x2="43.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="113.26" x2="53.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="63.26" x2="63.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="73.26" x2="73.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="83.26" x2="83.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="93.26" x2="93.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="103.26" x2="103.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="113.26" x2="113.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="63.26" x2="123.26" y2="-53.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="73.26" x2="133.26" y2="-43.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="83.26" x2="143.26" y2="-33.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="93.26" x2="153.26" y2="-23.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="103.26" x2="163.26" y2="-13.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="113.26" x2="173.26" y2="-3.26"/>
|
||||
<line class="stroke-pattern" x1="-113.26" y1="3.26" x2="3.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-103.26" y1="13.26" x2="13.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-93.26" y1="23.26" x2="23.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-83.26" y1="33.26" x2="33.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-73.26" y1="43.26" x2="43.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-63.26" y1="53.26" x2="53.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="-53.26" y1="3.26" x2="63.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="-43.26" y1="13.26" x2="73.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="-33.26" y1="23.26" x2="83.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="-23.26" y1="33.26" x2="93.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="-13.26" y1="43.26" x2="103.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="-3.26" y1="53.26" x2="113.26" y2="-63.26"/>
|
||||
<line class="stroke-pattern" x1="6.74" y1="3.26" x2="123.26" y2="-113.26"/>
|
||||
<line class="stroke-pattern" x1="16.74" y1="13.26" x2="133.26" y2="-103.26"/>
|
||||
<line class="stroke-pattern" x1="26.74" y1="23.26" x2="143.26" y2="-93.26"/>
|
||||
<line class="stroke-pattern" x1="36.74" y1="33.26" x2="153.26" y2="-83.26"/>
|
||||
<line class="stroke-pattern" x1="46.74" y1="43.26" x2="163.26" y2="-73.26"/>
|
||||
<line class="stroke-pattern" x1="56.74" y1="53.26" x2="173.26" y2="-63.26"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
<g>
|
||||
<path class="room-border" [attr.d]="border.d" *ngFor="let border of roomSvg.borders" />
|
||||
</g>
|
||||
|
||||
<g>
|
||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="stroked-element" [attr.d]="strokedArea.d" *ngFor="let strokedArea of roomSvg.stokedAreas"/>
|
||||
</g>
|
||||
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<g [attr.id]="room.id" [class.selected-room]="selectedRoom == room.id" *ngFor="let room of sortedRooms">
|
||||
<path class="room-bg" (click)="selectRoom(room.id)" [attr.d]="room.area.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<path class="room-border" [attr.d]="room.border.d" />
|
||||
<path class="room-border room-border-glow" [attr.d]="room.border.d" [style.filter]="isIE || isFirefox ? 'inherit': ''" />
|
||||
<text class="room-text" (click)="selectRoom(room.id)" text-anchor="middle"
|
||||
[attr.x]="room.name.x" [attr.y]="room.name.y">{{room.name.text}}</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</nb-card>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 351 B After Width: | Height: | Size: 351 B |
Loading…
Add table
Add a link
Reference in a new issue