ov-components: Fixed recording panel elements

pull/820/merge
Carlos Santos 2024-06-24 18:10:47 +02:00
parent 5dd689adc6
commit 07e4ede64d
2 changed files with 39 additions and 31 deletions

View File

@ -96,6 +96,12 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
#recording-action-buttons {
position: absolute;
bottom: 10px;
right: 0;
}
#start-recording-btn { #start-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-tertiary-color); background-color: var(--ov-tertiary-color);

View File

@ -90,18 +90,19 @@
<!-- Recording list --> <!-- Recording list -->
<div *ngIf="recordingsList.length > 0" class="item"> <div *ngIf="recordingsList.length > 0" class="item">
<mat-list> <mat-list>
<div mat-subheader>{{ 'PANEL.RECORDING.RECORDINGS' | translate }}</div> <!-- <div mat-subheader>{{ 'PANEL.RECORDING.RECORDINGS' | translate }}</div> -->
<mat-list-item *ngFor="let recording of recordingsList"> <mat-list-item *ngFor="let recording of recordingsList">
<mat-icon class="recording-icon" mat-list-icon>video_file</mat-icon> <mat-icon class="recording-icon" matListItemIcon>video_file</mat-icon>
<div mat-line> <div matListItemTitle>
<span class="recording-name">{{ recording.id }}</span> <span class="recording-name">{{ recording.id }}</span>
</div> </div>
<div mat-line class="time-container"> <div matListItemLine class="time-container">
<span class="recording-duration"> {{ recording.duration | duration }} </span> <span class="recording-duration"> {{ recording.duration | duration }} </span>
<span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span> <span class="recording-size"> | {{ recording.size / 1024 / 1024 | number : '1.1-2' }} MBs</span>
</div> </div>
<div mat-line class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div> <div matListItemLine class="recording-date">{{ recording.createdAt | date : 'HH:mm - dd/MM/yyyy' }}</div>
<div *ngIf="recording.status !== recStatusEnum.STARTED" id="recording-action-buttons">
<button <button
mat-icon-button mat-icon-button
(click)="play(recording)" (click)="play(recording)"
@ -129,6 +130,7 @@
> >
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
</button> </button>
</div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</div> </div>