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

feat(dashboard): add an audio player widget (#15)

Browse source
This commit is contained in:
Lex Zhukov 2017-07-14 14:38:25 +03:00 • committed by GitHub
parent f690da083e
commit d398290df2
12 changed files with 369 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -13,6 +13,7 @@ import { TeamComponent } from './team/team.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
import { WeatherComponent } from './weather/weather.component';
import { PlayerComponent } from './player/player.component';
@NgModule({
imports: [
@ -32,6 +33,7 @@ import { WeatherComponent } from './weather/weather.component';
SecurityCamerasComponent,
ElectricityComponent,
WeatherComponent,
PlayerComponent,
],
})
export class DashboardModule { }

58
src/app/pages/dashboard/player/player.component.html Normal file
View file

@ -0,0 +1,58 @@
<div class="player">
<div class="player-card-header">
<div class="player-menu">
<i class="ion-navicon"></i>
</div>
<div class="playlist-name">
<span>My Playlist</span>
</div>
</div>
<div class="player-cover">
<div class="album-image"></div>
<div class="artist-details">
<span class="artist-name">Kendrick Lamar</span>
<span class="song-name">DNA.</span>
</div>
</div>
<div class="player-progress">
<div class="status"></div>
</div>
<div class="player-commands">
<div class="prev">
<i class="ion-ios-skipbackward"></i>
</div>
<div class="play">
<i class="ion-ios-play"></i>
</div>
<div class="next">
<i class="ion-ios-skipforward"></i>
</div>
</div>
<div class="player-volume">
<div class="minus" (click)="minus()">
<i class="ion-ios-minus-outline"></i>
</div>
<div class="volume-items">
<div class="volume-item" *ngFor="let v of volume"
(click)="selectedVolume = v"
[class.active]="v < selectedVolume"
[class.selected]="v === selectedVolume"></div>
</div>
<div class="plus" (click)="plus()">
<i class="ion-ios-plus-outline"></i>
</div>
</div>
<div class="player-playlist-commands">
<div class="btn-group btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="playlistCommandsModel.left">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.left"/> <i class="ion-plus-round"></i>
</label>
<label class="btn btn-primary" [class.active]="playlistCommandsModel.middle">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.middle"/> <i class="ion-plus-round"></i>
</label>
<label class="btn btn-primary" [class.active]="playlistCommandsModel.right">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.right"/> <i class="ion-plus-round"></i>
</label>
</div>
</div>
</div>

184
src/app/pages/dashboard/player/player.component.scss Normal file
View file

@ -0,0 +1,184 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
.player {
flex: 1;
// TODO: Replace with the card header styles mixin
.player-card-header {
display: flex;
line-height: 2rem;
font-size: 1.25rem;
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder);
color: nga-theme(color-fg-heading);
padding: 1.25rem;
.player-menu {
font-size: 2.5rem;
margin-right: 1.25rem;
margin-top: -0.25rem;
}
}
.player-cover {
background: #363175;
padding: 1.25rem;
display: flex;
.album-image {
background: url('./~/assets/images/damn.jpg');
background-size: cover;
background-position: center;
height: 94px;
width: 30%;
box-shadow: nga-theme(card-shadow);
}
.artist-details {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1.25rem;
.artist-name {
color: nga-theme(color-fg-heading);
font-size: 1.5rem;
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bold);
}
.song-name {
font-family: nga-theme(font-main);
font-size: 1.125rem;
color: nga-theme(color-fg);
}
}
}
.player-progress {
background-color: #2c2961;
height: 2px;
.status {
background-color: #0088ff;
height: 2px;
width: 70%;
box-shadow: 0 4px 8px 0 rgba(33, 7, 77, 0.4), 0 0 12px 0 rgba(51, 139, 255, 0.4);
position: relative;
&::before {
content: '';
border-radius: 50%;
width: 1rem;
height: 1rem;
position: absolute;
background-color: white;
right: 0;
box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.4);
top: -0.5rem;
}
}
}
.player-commands {
display: flex;
justify-content: space-around;
font-size: 4rem;
color: nga-theme(color-fg-heading);
padding: 2.5rem 0;
border-bottom: 1px solid nga-theme(separator);
.prev {
color: nga-theme(color-fg);
}
}
.player-volume {
display: flex;
justify-content: space-around;
font-size: 4rem;
color: nga-theme(color-fg);
padding: 2rem 0;
border-bottom: 1px solid nga-theme(separator);
.minus:hover {
color: nga-theme(color-fg-heading);
}
.plus:hover {
color: nga-theme(color-fg-heading);
}
.volume-items {
display: flex;
justify-content: space-around;
font-size: 2rem;
margin: 0 -4rem;
.volume-item {
display: flex;
flex-direction: column;
justify-content: center;
}
.volume-item::before {
content: '';
width: 4px;
background-color: nga-theme(separator);
height: 30%;
border-radius: 1rem;
transition: 0.3s;
}
.volume-item:not(:last-child)::before {
margin-right: 0.25rem;
}
.volume-item.active::before {
background-image: linear-gradient(to right, #4f6fff, #00ccff);
box-shadow: 0 4px 10px 0 rgba(33, 7, 77, 0.5), 0 2px 12px 0 rgba(0, 136, 255, 0.7);
}
.volume-item.selected::before {
background-color: white;
height: 40%;
box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.68);
}
}
}
.player-playlist-commands {
height: 3.5rem;
}
.player-playlist-commands > .btn-group {
height: 100%;
.btn {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
border: none;
font-size: 2rem;
}
.btn.active {
background-color: nga-theme(card-bg);
color: nga-theme(color-fg);
}
.btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: nga-theme(card-border-radius);
}
}
}
}

30
src/app/pages/dashboard/player/player.component.ts Normal file
View file

@ -0,0 +1,30 @@
import { Component } from '@angular/core';
import { Range } from 'immutable';
@Component({
selector: 'ngx-player',
styleUrls: ['./player.component.scss'],
templateUrl: './player.component.html',
})
export class PlayerComponent {
selectedVolume: number = 10;
volume = Range(0, 30, 1);
playlistCommandsModel = {
left: true,
middle: true,
right: false,
};
minus() {
if (this.selectedVolume !== 0) {
this.selectedVolume--;
}
}
plus() {
if (this.selectedVolume !== 29) {
this.selectedVolume++;
}
}
}

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

@ -1,3 +1,4 @@
<div class="rooms-card-header">Room Management</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" [attr.viewBox]="viewBox"
preserveAspectRatio="xMidYMid">
<defs>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

Before After
Before After

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

@ -1,75 +1,89 @@
:host {
display: block;
align-items: center;
width: 100%;
height: 100%;
}
@import '../../../../@theme/styles/variables';
svg {
display:block;
width: 100%;
height: 100%;
}
@include nga-install-component() {
:host {
display: block;
align-items: center;
width: 100%;
height: 100%;
}
.stroke-pattern {
fill: none;
stroke: #a1a1e5;
stroke-miterlimit: 10;
opacity: 0.1;
stroke-width: 1px;
}
svg {
display:block;
width: 100%;
height: 80%;
}
.stroked-element {
stroke-width: 4px;
stroke: #a1a1e5;
stroke-miterlimit: 10;
fill: url('#New_Pattern_Swatch_1');
}
.stroke-pattern {
fill: none;
stroke: #a1a1e5;
stroke-miterlimit: 10;
opacity: 0.1;
stroke-width: 1px;
}
.room-border {
stroke-width: 4px;
stroke: #a1a1e5;
stroke-miterlimit: 10;
fill: none;
transition: stroke 0.4s ease-out;
}
.stroked-element {
stroke-width: 4px;
stroke: #a1a1e5;
stroke-miterlimit: 10;
fill: url('#New_Pattern_Swatch_1');
}
.room-bg {
fill: transparent;
stroke: transparent;
cursor: pointer;
transition: fill 0.4s ease-out;
stroke-width: 4px;
}
.room-border {
stroke-width: 4px;
stroke: #a1a1e5;
stroke-miterlimit: 10;
fill: none;
transition: stroke 0.4s ease-out;
}
.room-bg-border-grad {
fill: none;
stroke: none;
stroke-width: 4px;
}
.room-text {
cursor: pointer;
user-select: none;
fill: #fff;
}
.selected-room {
z-index: 40;
.room-bg {
//stroke: rgba(0, 255, 170, 1);
fill: rgba(0, 255, 170, 0.2);
filter: url('#f2');
fill: transparent;
stroke: transparent;
cursor: pointer;
transition: fill 0.4s ease-out;
stroke-width: 4px;
}
.room-bg-border-grad {
stroke: rgba(0, 255, 170, 1);
filter: url('#f2');
fill: none;
stroke: none;
stroke-width: 4px;
}
.room-border {
stroke: #00f9a6;
.room-text {
cursor: pointer;
user-select: none;
fill: #fff;
}
.room-border-glow {
filter: url('#f2');
.selected-room {
z-index: 40;
.room-bg {
//stroke: rgba(0, 255, 170, 1);
fill: rgba(0, 255, 170, 0.2);
filter: url('#f2');
}
.room-bg-border-grad {
stroke: rgba(0, 255, 170, 1);
filter: url('#f2');
}
.room-border {
stroke: #00f9a6;
}
.room-border-glow {
filter: url('#f2');
}
}
// TODO: Replace with the card header styles mixin
.rooms-card-header {
line-height: 2rem;
font-size: 1.25rem;
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder);
color: nga-theme(color-fg-heading);
padding: 1.25rem;
}
}

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

@ -4,5 +4,16 @@
ngx-room-selector {
width: 65%;
background-image: nga-theme(radial-gradient);
}
ngx-player {
flex: 1;
box-shadow: nga-theme(card-shadow);
}
nga-card {
display: flex;
flex-direction: row;
}
}

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

@ -5,12 +5,8 @@ import { Component } from '@angular/core';
styleUrls: ['./rooms.component.scss'],
template: `
<nga-card size="large">
<nga-card-header>
Room Management
</nga-card-header>
<nga-card-body>
<ngx-room-selector></ngx-room-selector>
</nga-card-body>
<ngx-room-selector></ngx-room-selector>
<ngx-player></ngx-player>
</nga-card>
`,
})

3
src/app/pages/dashboard/weather/weather.component.scss
View file

@ -6,7 +6,7 @@
nga-card-body {
height: 100%;
padding: 2rem;
background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
background-image: nga-theme(radial-gradient);
}
}
@ -42,6 +42,7 @@
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 2rem;
}
.icon {

2
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -194,7 +194,7 @@
</nga-card>
<nga-card>
<nga-card-body class="demo-rating">
<span class="header">Rating</span>
<span class="rating-header">Rating</span>
<div>
<ngb-rating [(rate)]="starRate" max=5>
<ng-template let-fill="fill">

4
src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -48,11 +48,13 @@
color: nga-theme(color-fg);
}
.header {
// TODO: Replace with the card header styles mixin
.rating-header {
line-height: 2rem;
font-size: 1.25rem;
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bolder);
color: nga-theme(color-fg-heading);
}
.current-rate {

BIN
src/assets/images/damn.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB