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

frontend: update visual customization terminology and improve loading messages for clarity

Browse Source
This commit is contained in:
Carlos Santos 2025-09-25 19:24:12 +02:00
parent 06e24af31c
commit 7559c4d0bc
2 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,9 @@
<div class="page-header"> <div class="page-header">
<div class="title"> <div class="title">
<mat-icon class="material-symbols-outlined ov-settings-icon">settings</mat-icon> <mat-icon class="material-symbols-outlined ov-settings-icon">settings</mat-icon>
<h1>Configuration</h1> <h1>Visual Customization</h1>
</div> </div>
<p class="subtitle">Customize the look and feel of your OpenVidu Meet rooms.</p> <p class="subtitle">Personalize the visual appearance of your video conference rooms to reflect your organization's brand and style.</p>
</div> </div>
@if (isLoading()) { @if (isLoading()) {
@ -13,9 +13,9 @@
<div class="loading-header"> <div class="loading-header">
<div class="loading-title"> <div class="loading-title">
<mat-icon class="ov-settings-icon loading-icon">settings</mat-icon> <mat-icon class="ov-settings-icon loading-icon">settings</mat-icon>
<h1>Loading theme configuration</h1> <h1>Loading visual settings</h1>
</div> </div>
<p class="loading-subtitle">Please wait while we fetch your theme settings...</p> <p class="loading-subtitle">We're preparing your customization options...</p>
</div> </div>
<div class="loading-spinner-container"> <div class="loading-spinner-container">
@ -31,8 +31,8 @@
<div mat-card-avatar> <div mat-card-avatar>
<mat-icon class="section-icon">palette</mat-icon> <mat-icon class="section-icon">palette</mat-icon>
</div> </div>
<mat-card-title>Appearance</mat-card-title> <mat-card-title>Visual Theme</mat-card-title>
<mat-card-subtitle>Configure custom appearance for your rooms</mat-card-subtitle> <mat-card-subtitle>Create a custom theme that represents your brand and style</mat-card-subtitle>
</mat-card-header> </mat-card-header>
<mat-card-content class="ov-mt-sm"> <mat-card-content class="ov-mt-sm">
@ -40,10 +40,10 @@
<!-- Enable/Disable Toggle --> <!-- Enable/Disable Toggle -->
<h4 class="section-title">Custom Theme</h4> <h4 class="section-title">Custom Theme</h4>
<div class="theme-toggle ov-mt-xs"> <div class="theme-toggle ov-mt-xs">
<span>Enable custom theme</span> <span>Use my own visual design</span>
<mat-slide-toggle <mat-slide-toggle
formControlName="enabled" formControlName="enabled"
[matTooltip]="!isThemeEnabled ? 'Enable custom theme to override default appearance' : ''" [matTooltip]="!isThemeEnabled ? 'Enable this option to customize the colors and appearance of your room' : ''"
[matTooltipDisabled]="isThemeEnabled" [matTooltipDisabled]="isThemeEnabled"
></mat-slide-toggle> ></mat-slide-toggle>
</div> </div>
@ -52,12 +52,12 @@
@if (isThemeEnabled) { @if (isThemeEnabled) {
<!-- Base theme (light / dark) --> <!-- Base theme (light / dark) -->
<div class="theme-section"> <div class="theme-section">
<h4 class="section-title">Base Theme</h4> <h4 class="section-title">Background Style</h4>
<p class="section-description ov-mt-xs"> <p class="section-description ov-mt-xs">
Select the foundation theme for your custom appearance. Choose whether you prefer a light or dark background as the starting point for your customization.
</p> </p>
<mat-form-field appearance="outline" class="full-width"> <mat-form-field appearance="outline" class="full-width">
<mat-label>Base Theme</mat-label> <mat-label>Background style</mat-label>
<mat-select formControlName="baseTheme"> <mat-select formControlName="baseTheme">
@for (theme of baseThemeOptions; track theme) { @for (theme of baseThemeOptions; track theme) {
<mat-option [value]="theme"> <mat-option [value]="theme">
@ -66,7 +66,7 @@
} }
</mat-select> </mat-select>
@if (appearanceForm.get('baseTheme')?.hasError('required')) { @if (appearanceForm.get('baseTheme')?.hasError('required')) {
<mat-error>Base theme is required</mat-error> <mat-error>Please select a background style</mat-error>
} }
</mat-form-field> </mat-form-field>
</div> </div>
@ -75,7 +75,7 @@
<div class="theme-section"> <div class="theme-section">
<h4 class="section-title">Color Customization</h4> <h4 class="section-title">Color Customization</h4>
<p class="section-description ov-mt-xs"> <p class="section-description ov-mt-xs">
Customize the colors of your theme. Click on any color to modify it. Click on any color to change it and adapt it to your brand or preferences.
</p> </p>
<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) {
@ -113,7 +113,7 @@
[disabled]="appearanceForm.invalid || !hasChanges()" [disabled]="appearanceForm.invalid || !hasChanges()"
> >
<mat-icon>save</mat-icon> <mat-icon>save</mat-icon>
Save Theme Configuration Save Changes
</button> </button>
<button mat-stroked-button (click)="onResetForm()" [disabled]="!hasChanges()"> <button mat-stroked-button (click)="onResetForm()" [disabled]="!hasChanges()">
<mat-icon>undo</mat-icon> <mat-icon>undo</mat-icon>

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

@ -15,7 +15,6 @@ import { MeetAppearanceConfig, MeetRoomTheme, MeetRoomThemeMode } from '@lib/typ
import { import {
OPENVIDU_COMPONENTS_DARK_THEME, OPENVIDU_COMPONENTS_DARK_THEME,
OPENVIDU_COMPONENTS_LIGHT_THEME, OPENVIDU_COMPONENTS_LIGHT_THEME,
OpenViduThemeService
} from 'openvidu-components-angular'; } from 'openvidu-components-angular';
type ColorField = 'backgroundColor' | 'primaryColor' | 'secondaryColor' | 'surfaceColor'; type ColorField = 'backgroundColor' | 'primaryColor' | 'secondaryColor' | 'surfaceColor';
@ -66,10 +65,10 @@ export class ConfigComponent implements OnInit {
// Color picker configuration // Color picker configuration
colorFields: Array<{ key: ColorField; label: string }> = [ colorFields: Array<{ key: ColorField; label: string }> = [
{ key: 'backgroundColor', label: 'Background' }, { key: 'backgroundColor', label: 'Main Background' },
{ key: 'primaryColor', label: 'Primary' }, { key: 'primaryColor', label: 'Button Colors' },
{ key: 'secondaryColor', label: 'Secondary' }, { key: 'secondaryColor', label: 'Secondary Color' },
{ key: 'surfaceColor', label: 'Surface' } { key: 'surfaceColor', label: 'Panels & Cards' }
]; ];
private initialFormValue: MeetRoomTheme | null = null; private initialFormValue: MeetRoomTheme | null = null;
@ -106,7 +105,7 @@ export class ConfigComponent implements OnInit {
await this.loadAppearanceConfig(); await this.loadAppearanceConfig();
} catch (error) { } catch (error) {
console.error('Error during component initialization:', error); console.error('Error during component initialization:', error);
this.notificationService.showSnackbar('Failed to initialize theme configuration'); this.notificationService.showSnackbar('Failed to load visual settings');
} finally { } finally {
this.isLoading.set(false); this.isLoading.set(false);
} }
@ -209,7 +208,7 @@ export class ConfigComponent implements OnInit {
async onSaveAppearanceConfig(): Promise<void> { async onSaveAppearanceConfig(): Promise<void> {
if (this.appearanceForm.invalid) { if (this.appearanceForm.invalid) {
this.notificationService.showSnackbar('Please fix form errors before saving'); this.notificationService.showSnackbar('Please fix the form errors before saving');
return; return;
} }
@ -221,11 +220,11 @@ export class ConfigComponent implements OnInit {
}; };
await this.configService.saveRoomsAppearanceConfig(appearanceConfig); await this.configService.saveRoomsAppearanceConfig(appearanceConfig);
this.notificationService.showSnackbar('Theme configuration saved successfully'); this.notificationService.showSnackbar('Visual settings saved successfully');
this.storeInitialValues(); this.storeInitialValues();
} catch (error) { } catch (error) {
console.error('Error saving appearance config:', error); console.error('Error saving appearance config:', error);
this.notificationService.showSnackbar('Failed to save theme configuration'); this.notificationService.showSnackbar('Failed to save visual settings');
} }
} }