-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: Added selection card component
- Loading branch information
Showing
12 changed files
with
265 additions
and
105 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
...ojects/shared-call-components/src/lib/components/cards/base-card/base-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <mat-card class="base-card" [style.background-color]="cardBackgroundColor"> | ||
| <div class="card-header"> | ||
| <div class="icon-container" [style.background-color]="iconBackgroundColor"> | ||
| <mat-icon class="card-icon">{{ icon }}</mat-icon> | ||
| </div> | ||
| <div class="text-container"> | ||
| <div class="card-title">{{ title }}</div> | ||
| <div class="card-subtitle">{{ description }}</div> | ||
| </div> | ||
| </div> | ||
| @if (showCardContent) { | ||
| <div class="divider"></div> | ||
| } | ||
|
|
||
| <div class="card-content" #cardContent [class.hidden]="!showCardContent"> | ||
| <ng-content select="[card-content]"></ng-content> | ||
| </div> | ||
|
|
||
| <ng-content select="[card-footer]"></ng-content> | ||
| </mat-card> |
63 changes: 63 additions & 0 deletions
63
...ojects/shared-call-components/src/lib/components/cards/base-card/base-card.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| .base-card { | ||
| max-width: 100%; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| transition: box-shadow 0.3s ease-in-out; | ||
| } | ||
|
|
||
| .base-card:hover { | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| } | ||
|
|
||
| .card-header, | ||
| .card-content { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 16px; | ||
| padding: 20px 20px 10px 20px; | ||
| } | ||
|
|
||
| .card-content { | ||
| padding: 10px; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .hidden { | ||
| display: none; | ||
| } | ||
| .divider { | ||
| width: 80%; | ||
| margin: auto; | ||
| height: 1px; | ||
| background-color: #e0e0e0; | ||
| } | ||
|
|
||
| .icon-container { | ||
| background-color: #673ab7; | ||
| padding: 16px; | ||
| border-radius: 4px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .card-icon { | ||
| color: white; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| .text-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .card-title { | ||
| font-size: 1.2rem; | ||
| font-weight: 600; | ||
| color: #333; | ||
| } | ||
|
|
||
| .card-subtitle { | ||
| font-size: 0.9rem; | ||
| color: #666; | ||
| } |
23 changes: 23 additions & 0 deletions
23
...cts/shared-call-components/src/lib/components/cards/base-card/base-card.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { BaseCardComponent } from './base-card.component'; | ||
|
|
||
| describe('BaseCardComponent', () => { | ||
| let component: BaseCardComponent; | ||
| let fixture: ComponentFixture<BaseCardComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [BaseCardComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(BaseCardComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
54 changes: 54 additions & 0 deletions
54
...projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core'; | ||
| import { MatCardModule } from '@angular/material/card'; | ||
| import { MatDividerModule } from '@angular/material/divider'; | ||
| import { MatIconModule } from '@angular/material/icon'; | ||
|
|
||
| @Component({ | ||
| selector: 'ov-base-card', | ||
| standalone: true, | ||
| imports: [MatCardModule, MatIconModule, MatDividerModule], | ||
| templateUrl: './base-card.component.html', | ||
| styleUrl: './base-card.component.scss' | ||
| }) | ||
| export class BaseCardComponent implements AfterViewInit { | ||
| /** | ||
| * The title of the dynamic card component. | ||
| * This input property allows setting a custom title for the card. | ||
| */ | ||
| @Input() title: string = ''; | ||
| /** | ||
| * A brief description of the dynamic card component. | ||
| * This input property allows setting a description for the card. | ||
| */ | ||
| @Input() description: string = ''; | ||
| /** | ||
| * The name of the icon to be displayed. Defaults to "settings". | ||
| * | ||
| * @type {string} | ||
| * @default 'settings' | ||
| */ | ||
| @Input() icon: string = 'settings'; | ||
| /** | ||
| * The background color of the icon. | ||
| * | ||
| * @default '#000000' | ||
| */ | ||
| @Input() iconBackgroundColor: string = '#000000'; | ||
| /** | ||
| * The background color of the card component. | ||
| * Accepts any valid CSS color string. | ||
| */ | ||
| @Input() cardBackgroundColor: string = '#ffffff'; | ||
|
|
||
| // Content child reference to the card content. | ||
| @ViewChild('cardContent', { static: false }) cardContent: ElementRef | undefined; | ||
| showCardContent: boolean = false; | ||
|
|
||
| constructor(protected cdr: ChangeDetectorRef) {} | ||
|
|
||
| ngAfterViewInit() { | ||
| console.log(this.cardContent) | ||
| this.showCardContent = this.cardContent?.nativeElement.children.length > 0; | ||
| this.cdr.detectChanges(); | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
...red-call-components/src/lib/components/cards/selection-card/selection-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <ov-base-card [title]="title" [description]="description" [icon]="icon"> | ||
| <div card-content class="card-content"> | ||
| <p>Select</p> | ||
| <mat-form-field card-content> | ||
| <mat-select [(value)]="selectedOption" (selectionChange)="onSelectionChange($event)"> | ||
| @for (option of options; track option.value) { | ||
| <mat-option [value]="option.value"> | ||
| {{ option.label }} | ||
| </mat-option> | ||
| } | ||
| </mat-select> | ||
| </mat-form-field> | ||
| </div> | ||
| </ov-base-card> |
24 changes: 24 additions & 0 deletions
24
...red-call-components/src/lib/components/cards/selection-card/selection-card.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .mat-form-field { | ||
| width: 100%; | ||
| margin-top: 8px; | ||
|
|
||
| .mat-select { | ||
| font-size: 1rem; | ||
| color: #333; | ||
| } | ||
|
|
||
| .mat-select-placeholder { | ||
| color: #aaa; | ||
| } | ||
|
|
||
| .mat-option-text { | ||
| color: #333; | ||
| } | ||
| } | ||
|
|
||
| .card-content { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 16px; | ||
| // padding: 20px; | ||
| } |
23 changes: 23 additions & 0 deletions
23
...-call-components/src/lib/components/cards/selection-card/selection-card.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { SelectionCardComponent } from './selection-card.component'; | ||
|
|
||
| describe('SelectionCardComponent', () => { | ||
| let component: SelectionCardComponent; | ||
| let fixture: ComponentFixture<SelectionCardComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [SelectionCardComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(SelectionCardComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
20 changes: 20 additions & 0 deletions
20
...hared-call-components/src/lib/components/cards/selection-card/selection-card.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { Component, EventEmitter, Input, Output } from '@angular/core'; | ||
| import { BaseCardComponent } from '../base-card/base-card.component'; | ||
| import { MatSelectModule } from '@angular/material/select'; | ||
| import { MatFormFieldModule } from '@angular/material/form-field'; | ||
|
|
||
| @Component({ | ||
| selector: 'ov-selection-card', | ||
| standalone: true, | ||
| imports: [BaseCardComponent, MatSelectModule, MatFormFieldModule], | ||
| templateUrl: './selection-card.component.html', | ||
| styleUrl: './selection-card.component.scss' | ||
| }) | ||
| export class SelectionCardComponent extends BaseCardComponent { | ||
| @Input() options: { label: string; value: any }[] = []; | ||
| @Input() selectedOption: any; | ||
| @Output() onOptionSelected = new EventEmitter<any>(); | ||
| onSelectionChange(event: any) { | ||
| this.onOptionSelected.emit(event.value); | ||
| } | ||
| } |
28 changes: 15 additions & 13 deletions
28
...ts/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,18 @@ | ||
| <mat-card class="toggle-card" [style.background-color]="cardBackgroundColor"> | ||
| <div class="card-content"> | ||
| <div class="icon-container" [style.background-color]="iconBackgroundColor"> | ||
| <mat-icon class="card-icon">{{ icon }}</mat-icon> | ||
| </div> | ||
| <div class="text-container"> | ||
| <div class="card-title">{{ title || '' }}</div> | ||
| <div class="card-subtitle">{{ description || 'OpenVidu' }}</div> | ||
| </div> | ||
| </div> | ||
| <ov-base-card | ||
| [title]="title" | ||
| [description]="description" | ||
| [icon]="icon" | ||
| [iconBackgroundColor]="iconBackgroundColor" | ||
| [cardBackgroundColor]="cardBackgroundColor" | ||
| > | ||
| <ng-content card-content select="[card-content]"></ng-content> | ||
|
|
||
| <div class="card-footer"> | ||
| <div card-footer class="card-footer"> | ||
| <span>{{ title }} is {{ toggleValue ? 'enabled' : 'disabled' }}</span> | ||
| <mat-slide-toggle class="ov-slide-toggle" [checked]="toggleValue" (change)="onToggleChange($event)"></mat-slide-toggle> | ||
| <mat-slide-toggle | ||
| class="ov-slide-toggle" | ||
| [checked]="toggleValue" | ||
| (change)="onToggleChange($event)" | ||
| ></mat-slide-toggle> | ||
| </div> | ||
| </mat-card> | ||
| </ov-base-card> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.