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

frontend: enhance color picker with tooltips and improve layout for better usability

Browse Source
This commit is contained in:
Carlos Santos 2025-09-30 17:04:09 +02:00
parent e857f43fec
commit c99f0cad03
3 changed files with 43 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.html
View File

@ -89,7 +89,18 @@
<div class="color-picker-grid ov-mt-md"> <div class="color-picker-grid ov-mt-md">
@for (colorConfig of colorFields; track colorConfig.key) { @for (colorConfig of colorFields; track colorConfig.key) {
<div class="color-picker-item" (click)="focusColorInput(colorConfig.key)"> <div class="color-picker-item" (click)="focusColorInput(colorConfig.key)">
<div class="color-label-container">
<span class="color-label">{{ colorConfig.label }}</span> <span class="color-label">{{ colorConfig.label }}</span>
<mat-icon
class="info-icon"
[matTooltip]="colorConfig.description"
matTooltipPosition="above"
matTooltipClass="color-info-tooltip"
(click)="$event.stopPropagation()"
>
info
</mat-icon>
</div>
<div class="color-circle-wrapper"> <div class="color-circle-wrapper">
<input <input
[id]="colorConfig.key" [id]="colorConfig.key"

28
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
View File

@ -80,6 +80,7 @@
transition: transition:
transform 0.2s ease, transform 0.2s ease,
opacity 0.2s ease; opacity 0.2s ease;
height: 140px;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@ -90,13 +91,36 @@
transform: translateY(0); transform: translateY(0);
} }
.color-label-container {
display: flex;
align-items: center;
justify-content: center;
gap: var(--ov-meet-spacing-xs);
height: 48px;
text-align: center;
margin-bottom: var(--ov-meet-spacing-xs);
}
.color-label { .color-label {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: var(--ov-meet-text-color-primary); color: var(--ov-meet-text-color-primary);
text-align: center;
margin-bottom: var(--ov-meet-spacing-xs);
user-select: none; user-select: none;
line-height: 1.2;
}
.info-icon {
font-size: 16px;
width: 16px;
height: 16px;
color: var(--ov-meet-text-hint);
transition: color 0.2s ease;
cursor: help;
flex-shrink: 0;
&:hover {
color: var(--ov-meet-color-primary);
}
} }
.color-circle-wrapper { .color-circle-wrapper {

10
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.ts
View File

@ -62,11 +62,11 @@ export class ConfigComponent implements OnInit {
baseThemeOptions: MeetRoomThemeMode[] = [MeetRoomThemeMode.LIGHT, MeetRoomThemeMode.DARK]; baseThemeOptions: MeetRoomThemeMode[] = [MeetRoomThemeMode.LIGHT, MeetRoomThemeMode.DARK];
// Color picker configuration // Color picker configuration
colorFields: Array<{ key: ColorField; label: string }> = [ colorFields: Array<{ key: ColorField; label: string, description: string }> = [
{ key: 'backgroundColor', label: 'Main Background' }, { key: 'backgroundColor', label: 'Meeting Background', description: 'The background color of your meeting screen' },
{ key: 'primaryColor', label: 'Button Colors' }, { key: 'primaryColor', label: 'Control buttons', description: 'The color of the main control buttons (e.g., microphone, camera)' },
{ key: 'secondaryColor', label: 'Secondary Color' }, { key: 'secondaryColor', label: 'Highlights & accents', description: 'Colors for active states, borders, and participant names' },
{ key: 'surfaceColor', label: 'Panels & Cards' } { key: 'surfaceColor', label: 'Side panels & boxes', description: 'Background color for side panels and dialog boxes' }
]; ];
private initialFormValue: MeetRoomTheme | null = null; private initialFormValue: MeetRoomTheme | null = null;