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="title">
<mat-icon class="material-symbols-outlined ov-settings-icon">settings</mat-icon>
<h1>Configuration</h1>
<h1>Visual Customization</h1>
</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>
@if (isLoading()) {
@ -13,9 +13,9 @@
<div class="loading-header">
<div class="loading-title">
<mat-icon class="ov-settings-icon loading-icon">settings</mat-icon>
<h1>Loading theme configuration</h1>
<h1>Loading visual settings</h1>
</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 class="loading-spinner-container">
@ -31,8 +31,8 @@
<div mat-card-avatar>
<mat-icon class="section-icon">palette</mat-icon>
</div>
<mat-card-title>Appearance</mat-card-title>
<mat-card-subtitle>Configure custom appearance for your rooms</mat-card-subtitle>
<mat-card-title>Visual Theme</mat-card-title>
<mat-card-subtitle>Create a custom theme that represents your brand and style</mat-card-subtitle>
</mat-card-header>
<mat-card-content class="ov-mt-sm">
@ -40,10 +40,10 @@
<!-- Enable/Disable Toggle -->
<h4 class="section-title">Custom Theme</h4>
<div class="theme-toggle ov-mt-xs">
<span>Enable custom theme</span>
<span>Use my own visual design</span>
<mat-slide-toggle
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"
></mat-slide-toggle>
</div>
@ -52,12 +52,12 @@
@if (isThemeEnabled) {
<!-- Base theme (light / dark) -->
<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">
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>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Base Theme</mat-label>
<mat-label>Background style</mat-label>
<mat-select formControlName="baseTheme">
@for (theme of baseThemeOptions; track theme) {
<mat-option [value]="theme">
@ -66,7 +66,7 @@
}
</mat-select>
@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>
</div>
@ -75,7 +75,7 @@
<div class="theme-section">
<h4 class="section-title">Color Customization</h4>
<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>
<div class="color-picker-grid ov-mt-md">
@for (colorConfig of colorFields; track colorConfig.key) {
@ -113,7 +113,7 @@
[disabled]="appearanceForm.invalid || !hasChanges()"
>
<mat-icon>save</mat-icon>
Save Theme Configuration
Save Changes
</button>
<button mat-stroked-button (click)="onResetForm()" [disabled]="!hasChanges()">
<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 {
OPENVIDU_COMPONENTS_DARK_THEME,
OPENVIDU_COMPONENTS_LIGHT_THEME,
OpenViduThemeService
} from 'openvidu-components-angular';
type ColorField = 'backgroundColor' | 'primaryColor' | 'secondaryColor' | 'surfaceColor';
@ -66,10 +65,10 @@ export class ConfigComponent implements OnInit {
// Color picker configuration
colorFields: Array<{ key: ColorField; label: string }> = [
{ key: 'backgroundColor', label: 'Background' },
{ key: 'primaryColor', label: 'Primary' },
{ key: 'secondaryColor', label: 'Secondary' },
{ key: 'surfaceColor', label: 'Surface' }
{ key: 'backgroundColor', label: 'Main Background' },
{ key: 'primaryColor', label: 'Button Colors' },
{ key: 'secondaryColor', label: 'Secondary Color' },
{ key: 'surfaceColor', label: 'Panels & Cards' }
];
private initialFormValue: MeetRoomTheme | null = null;
@ -106,7 +105,7 @@ export class ConfigComponent implements OnInit {
await this.loadAppearanceConfig();
} catch (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 {
this.isLoading.set(false);
}
@ -209,7 +208,7 @@ export class ConfigComponent implements OnInit {
async onSaveAppearanceConfig(): Promise<void> {
if (this.appearanceForm.invalid) {
this.notificationService.showSnackbar('Please fix form errors before saving');
this.notificationService.showSnackbar('Please fix the form errors before saving');
return;
}
@ -221,11 +220,11 @@ export class ConfigComponent implements OnInit {
};
await this.configService.saveRoomsAppearanceConfig(appearanceConfig);
this.notificationService.showSnackbar('Theme configuration saved successfully');
this.notificationService.showSnackbar('Visual settings saved successfully');
this.storeInitialValues();
} catch (error) {
console.error('Error saving appearance config:', error);
this.notificationService.showSnackbar('Failed to save theme configuration');
this.notificationService.showSnackbar('Failed to save visual settings');
}
}