ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: improve layout and styling for participant name and badges

master
Carlos Santos 2025-09-30 12:46:44 +02:00
parent e00120b046
commit d54e21d726
2 changed files with 58 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.html
View File

@ -13,13 +13,16 @@
<!-- Content section with name and status -->
<div class="participant-content">
<div class="participant-name">
{{ participantDisplayName }}
<span *ngIf="isLocalParticipant" class="local-indicator">
{{ 'PANEL.PARTICIPANTS.YOU' | translate }}
</span>
<!-- Name row with better space management -->
<div class="participant-name-row">
<div class="participant-name">
<span class="participant-name-text">{{ participantDisplayName }}</span>
<span *ngIf="isLocalParticipant" class="local-indicator">
{{ 'PANEL.PARTICIPANTS.YOU' | translate }}
</span>
</div>
<!-- Participant badges -->
<!-- Participant badges in separate container -->
<div class="participant-badges">
<ng-container *ngTemplateOutlet="participantBadgeTemplate"></ng-container>
</div>
@ -29,11 +32,6 @@
<span class="status-indicator">
{{ _participant | tracksPublishedTypes }}
</span>
<!-- Additional status indicators -->
<span *ngIf="_participant?.isMutedForcibly" class="status-indicator">
<mat-icon>volume_off</mat-icon>
{{ 'PANEL.PARTICIPANTS.MUTED' | translate }}
</span>
</div>
</div>

63
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
View File

@ -80,19 +80,37 @@
margin-right: 8px;
}
// Participant name styling
.participant-name {
font-weight: 600 !important;
font-size: 14px;
line-height: 1.2;
color: var(--ov-text-surface-color);
margin: 0 0 4px 0;
// Participant name row container
.participant-name-row {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
justify-content: space-between;
width: 100%;
margin: 0;
gap: 4px;
min-height: 20px;
}
// Participant name styling with overflow control
.participant-name {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
max-width: 100%;
.participant-name-text {
font-weight: 600 !important;
font-size: 14px;
line-height: 1.2;
color: var(--ov-text-surface-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
// Local participant indicator
.local-indicator {
@ -106,6 +124,7 @@
letter-spacing: 0.5px;
flex-shrink: 0;
border: 1px solid var(--ov-border-focus-color);
white-space: nowrap;
}
}
@ -213,11 +232,19 @@
.participant-badges {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
gap: 4px;
flex-shrink: 0;
max-width: 80px; // Limit badges width
overflow: hidden;
// Badge styling
::ng-deep .badge {
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60px;
// Badge variants
&.moderator {
color: var(--ov-warning-color, #f57c00);
@ -346,7 +373,11 @@
}
.participant-name {
font-size: 13px;
max-width: calc(100% - 60px); // Less space on mobile
.participant-name-text {
font-size: 13px;
}
.local-indicator {
font-size: 9px;
@ -354,6 +385,10 @@
}
}
.participant-badges {
max-width: 60px;
}
.participant-subtitle {
font-size: 11px !important;
}