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

refactor(player): use Nebular buttons and icons

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-22 13:43:55 +03:00
parent 1fc919c27a
commit 0347c5668e
2 changed files with 46 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,23 +22,38 @@
</div> </div>
<div class="controls"> <div class="controls">
<i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i> <button class="control-button" nbButton ghost size="tiny" (click)="toggleShuffle()" [class.on]="shuffle">
<i class="nb-skip-backward prev" (click)="prev()"></i> <nb-icon icon="shuffle-2-outline" pack="eva"></nb-icon>
<i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i> </button>
<i class="nb-skip-forward next" (click)="next()"></i> <button class="control-button" nbButton ghost size="medium" (click)="prev()">
<i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i> <nb-icon class="skip" icon="skip-back-outline" pack="eva"></nb-icon>
</button>
<button class="control-button" nbButton ghost size="medium" (click)="playPause()">
<nb-icon class="play" [icon]="player.paused ? 'play-circle-outline' : 'pause-circle-outline'" pack="eva">
</nb-icon>
</button>
<button class="control-button" nbButton ghost size="medium" (click)="next()">
<nb-icon class="skip" icon="skip-forward-outline" pack="eva"></nb-icon>
</button>
<button class="control-button" nbButton ghost size="tiny" (click)="toggleLoop()" [class.on]="player.loop">
<nb-icon icon="repeat-outline" pack="eva"></nb-icon>
</button>
</div> </div>
</nb-card-body> </nb-card-body>
<nb-card-footer class="footer"> <nb-card-footer class="footer">
<div class="volume"> <div class="volume">
<i class="nb-volume-mute"></i> <button nbButton ghost size="small" (click)="setVolume(0)">
<nb-icon class="volume-icon" icon="volume-down-outline" pack="eva"></nb-icon>
</button>
<div class="progress-wrap"> <div class="progress-wrap">
<input type="range" class="progress" [value]="getVolume()" max="100" <input type="range" class="progress" [value]="getVolume()" max="100"
(input)="setVolume(volume.value)" #volume> (input)="setVolume(volume.value)" #volume>
<div class="progress-foreground" [style.width.%]="getVolume()"></div> <div class="progress-foreground" [style.width.%]="getVolume()"></div>
</div> </div>
<i class="nb-volume-high"></i> <button nbButton ghost size="small" (click)="setVolume(100)">
<nb-icon class="volume-icon" icon="volume-up-outline" pack="eva"></nb-icon>
</button>
</div> </div>
</nb-card-footer> </nb-card-footer>
</nb-card> </nb-card>

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

@ -107,37 +107,21 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@include nb-rtl(flex-direction, row-reverse); @include nb-rtl(flex-direction, row-reverse);
padding: 0.25rem 2rem 1rem; padding: 1rem;
max-width: 400px; max-width: 400px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
i {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
} }
.shuffle, .loop { .control-button {
font-size: 1.5rem;
color: nb-theme(text-hint-color); color: nb-theme(text-hint-color);
&.active { &.on {
color: nb-theme(color-primary-default); color: nb-theme(color-primary-default);
} }
}
.prev, .next { nb-icon {
width: 3.5rem; font-size: 1.5em;
height: 3.5rem;
border: 2px solid nb-theme(divider-color);
border-radius: 50%;
font-size: 1.75rem;
}
.play {
font-size: 2rem;
} }
} }
@ -149,12 +133,6 @@
position: relative; position: relative;
max-width: 400px; max-width: 400px;
i {
font-size: 1.5rem;
margin: 0.25rem;
color: nb-theme(text-hint-color);
}
.progress-wrap { .progress-wrap {
height: 2.25rem; height: 2.25rem;
margin: 0; margin: 0;
@ -185,6 +163,11 @@
} }
} }
.volume-icon {
font-size: 1em;
color: nb-theme(text-hint-color);
}
&.collapsed { &.collapsed {
$player-height: 4.5rem; $player-height: 4.5rem;
@ -279,4 +262,14 @@
} }
} }
} }
@include media-breakpoint-between(lg, lg) {
.controls {
padding: 0.5rem;
}
.control-button.size-medium {
padding: nb-theme(button-ghost-small-padding);
}
}
} }