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

frontend: update navigation and styling for overview component

Browse Source
This commit is contained in:
Carlos Santos 2025-10-01 16:08:48 +02:00
parent 918b2d164a
commit b93c228f6f
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,7 +34,12 @@
</div>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="navigateTo('rooms/new')" class="primary-button" id="create-room-button">
<button
mat-button
(click)="navigateTo('rooms/new')"
class="primary-button"
id="create-room-button"
>
<mat-icon>add</mat-icon>
Create Room
</button>
@ -84,7 +89,11 @@
Create dedicated spaces for video conferences where participants can connect,
collaborate, and communicate seamlessly.
</p>
<button mat-stroked-button (click)="navigateTo('rooms/new')" id="create-first-room-button">
<button
mat-stroked-button
(click)="navigateTo('rooms/new')"
id="create-first-room-button"
>
<mat-icon class="ov-action-icon">add</mat-icon>
Create Room
</button>
@ -93,14 +102,18 @@
<mat-card class="feature-card">
<mat-card-content>
<mat-icon class="ov-settings-icon material-symbols-outlined"> passkey </mat-icon>
<h3>Configure Authentication</h3>
<mat-icon class="material-symbols-outlined"> palette </mat-icon>
<h3>Customize the appearance</h3>
<p>
Set up user authentication and manage access permissions to ensure secure and
controlled participation in your video conferences.
Personalize the look and feel of your video conference rooms to align with your
brand and style.
</p>
<button mat-stroked-button (click)="navigateTo('users-permissions')" id="configure-auth-button">
Go to Users & Permissions
<button
mat-stroked-button
(click)="navigateTo('config')"
id="configure-appearance-button"
>
Go to Configuration
</button>
</mat-card-content>
</mat-card>
@ -114,7 +127,9 @@
Embed OpenVidu Meet into your applications using our comprehensive REST API for
programmatic room creation and management.
</p>
<button mat-stroked-button (click)="navigateTo('embedded')" id="go-to-embedded-button">Go to Embedded</button>
<button mat-stroked-button (click)="navigateTo('embedded')" id="go-to-embedded-button">
Go to Embedded
</button>
</mat-card-content>
</mat-card>
</div>

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

@ -2,6 +2,7 @@
// Welcome State Styles
.welcome-content {
margin: 10px;
.welcome-card {
max-width: var(--ov-meet-container-max-width);
margin: 0 auto;

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

@ -75,7 +75,7 @@ export class OverviewComponent implements OnInit {
}
}
async navigateTo(section: 'rooms' | 'rooms/new' | 'recordings' | 'users-permissions' | 'embedded') {
async navigateTo(section: 'rooms' | 'rooms/new' | 'recordings' | 'config' | 'embedded') {
try {
await this.navigationService.navigateTo(section);
} catch (error) {