neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: improved recording lists component styles

Browse Source
This commit is contained in:
Carlos Santos 2025-09-16 13:28:42 +02:00
parent 06e350d8fb
commit 0bedd4452a
2 changed files with 50 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
View File

@ -120,72 +120,6 @@
</div>
</mat-toolbar>
<!-- Mobile Sticky Toolbar (always visible in mobile) -->
<!-- @if (isMobileView()) {
<div class="mobile-sticky-toolbar">
<div class="mobile-toolbar-content">
<-- Always visible: Refresh button --
<div class="toolbar-section primary-actions">
<button
mat-icon-button
class="refresh-btn"
(click)="refreshRecordings()"
[disabled]="loading"
matTooltip="Refresh recordings"
>
<mat-icon>refresh</mat-icon>
</button>
@if (hasActiveFilters()) {
<button
mat-icon-button
class="clear-btn"
(click)="clearFilters()"
[disabled]="loading"
matTooltip="Clear all filters"
>
<mat-icon>filter_alt_off</mat-icon>
</button>
}
</div>
-- Bulk actions: visible when items selected --
@if (showSelection && selectedRecordings().size > 0) {
<div class="toolbar-section bulk-actions">
<div class="selection-indicator">
<span class="selection-count">{{ selectedRecordings().size }} selected</span>
</div>
<div class="action-buttons">
@if (canDeleteRecordings) {
<button
mat-icon-button
color="warn"
(click)="bulkDeleteSelected()"
[disabled]="loading"
matTooltip="Delete selected recordings"
class="bulk-delete-btn"
>
<mat-icon>delete</mat-icon>
</button>
}
<button
mat-icon-button
(click)="bulkDownloadSelected()"
[disabled]="loading"
matTooltip="Download selected recordings"
class="bulk-download-btn"
>
<mat-icon>download</mat-icon>
</button>
</div>
</div>
}
</div>
</div>
} -->
<!-- Loading Spinner -->
@if (loading) {
<div class="loading-container">
@ -252,29 +186,35 @@
<div class="detail-content">
<div class="detail-label">Start Date</div>
@if (recording.startDate) {
<div class="detail-value">
{{ recording.startDate | date: 'mediumDate' }}
<div class="detail-row">
<span class="detail-value">
{{ recording.startDate | date: 'mediumDate' }}
</span>
<span class="detail-time">
{{ recording.startDate | date: 'shortTime' }}
</span>
</div>
<div class="detail-time">{{ recording.startDate | date: 'shortTime' }}</div>
} @else {
<div class="detail-value no-data">-</div>
}
</div>
</div>
<div class="detail-item">
<mat-icon class="detail-icon">timer</mat-icon>
<div class="detail-content">
<div class="detail-label">Duration</div>
<div class="detail-value">{{ formatDuration(recording.duration) }}</div>
<div class="additional-details">
<div class="detail-item">
<mat-icon class="detail-icon">timer</mat-icon>
<div class="detail-content">
<div class="detail-label">Duration</div>
<div class="detail-value">{{ formatDuration(recording.duration) }}</div>
</div>
</div>
</div>
<div class="detail-item">
<mat-icon class="detail-icon">storage</mat-icon>
<div class="detail-content">
<div class="detail-label">Size</div>
<div class="detail-value">{{ formatFileSize(recording.size) }}</div>
<div class="detail-item">
<mat-icon class="detail-icon">storage</mat-icon>
<div class="detail-content">
<div class="detail-label">Size</div>
<div class="detail-value">{{ formatFileSize(recording.size) }}</div>
</div>
</div>
</div>
</div>

39
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
View File

@ -20,6 +20,7 @@
flex-direction: column;
gap: var(--ov-meet-spacing-md);
position: relative;
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-lg);
&.selected-card {
background-color: color-mix(in srgb, var(--ov-meet-color-primary) 8%, var(--ov-meet-card-background));
@ -39,7 +40,7 @@
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: center;
gap: var(--ov-meet-spacing-md);
.card-header-left {
@ -69,6 +70,13 @@
@include ov-mobile-down {
gap: var(--ov-meet-spacing-sm);
}
.additional-details {
margin-top: 5px;
display: grid;
grid-template-columns: 1fr 1fr; /* dos columnas iguales */
gap: 1rem; /* espacio entre columnas y filas */
}
}
.detail-item {
@ -84,21 +92,24 @@
}
.detail-content {
flex: 1;
min-width: 0;
flex-direction: column;
gap: 0.25rem;
.detail-label {
font-size: var(--ov-meet-font-size-xs);
font-size: var(--ov-meet-font-size-sm);
font-weight: var(--ov-meet-font-weight-medium);
color: var(--ov-meet-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
color: var(--ov-meet-text-primary);
}
.detail-row {
display: flex;
gap: 0.5rem;
align-items: baseline;
}
.detail-value {
font-size: var(--ov-meet-font-size-sm);
font-weight: var(--ov-meet-font-weight-medium);
font-weight: var(--ov-meet-font-weight-light);
color: var(--ov-meet-text-primary);
line-height: var(--ov-meet-line-height-tight);
@ -168,6 +179,7 @@
// === TOOLBAR AND SHARED UTILITIES ===
.recordings-toolbar {
@extend .ov-data-toolbar;
margin-bottom: 0;
// Responsive toolbar adjustments
@include ov-tablet-down {
@ -183,6 +195,15 @@
}
}
}
.toolbar-right {
order: 1;
width: 100%;
justify-content: flex-end;
.refresh-btn {
padding: 0;
}
}
}
@include ov-mobile-down {