diff --git a/src/app/components/demo/demo.component.html b/src/app/components/demo/demo.component.html new file mode 100644 index 0000000..f983cc7 --- /dev/null +++ b/src/app/components/demo/demo.component.html @@ -0,0 +1,295 @@ + +
+
+
+

{{title}}

+
+ +
+
+ + +
+
+ + +
+ + Buttons variants + + + {{ getColors().length }} colors + +
+ +
+ +
+ + +
+
Links
+
+ @for (color of getColors(); track color) { +
+ {{ color }} +
+ } +
+
+ @for (color of getColors(); track color) { +
+ {{ color }} +
+ } +
+
+ +
+
Normal
+
+ @for (color of getColors(); track color) { +
+ +
+ } +
+ +
+
+ +
+
+ <a Link +
+
+
+ +
+
Stroked
+
+ @for (color of getColors(); track color) { +
+ +
+ } +
+ +
+
+ +
+
+ <a Link +
+
+
+ +
+
Flat
+
+ @for (color of getColors(); track color) { +
+ +
+ } +
+ +
+
+ +
+
+ <a Link +
+
+
+ +
+
Raised
+
+ @for (color of getColors(); track color) { +
+ +
+ } +
+ +
+
+ +
+
+ <a Link +
+
+
+ +
+
FAB
+
+ @for (color of getColors(); track color; let index = $index) { +
+ +
+ } +
+ +
+
+ +
+
+
+ +
+
FAB extended
+
+ @for (color of getColors(); track color; let index = $index) { +
+ +
+ } +
+ +
+
+ +
+
+
+ +
+
Mini FAB
+
+ @for (color of getColors(); track color; let index = $index) { +
+ +
+ } +
+ +
+
+ +
+
+
+ +
+
Icon
+
+ @for (color of getColors(); track color; let index = $index) { +
+ +
+ } +
+ +
+
+ +
+
+
+ + +
+ +
+ @for (color of getColors(); track color) { +
+
+ + +
+ + {{ color }} + + + Card subtitle + +
+ +
+ +
+ + +
+
+ + + + +
+
+ + + + +
+ + + + + +
+ + +
+ } +
\ No newline at end of file diff --git a/src/app/components/demo/demo.component.scss b/src/app/components/demo/demo.component.scss new file mode 100644 index 0000000..ea4d575 --- /dev/null +++ b/src/app/components/demo/demo.component.scss @@ -0,0 +1,58 @@ +/* Demo */ +@use 'variable' as var; + +.mat-mdc-card + .mat-mdc-card { + margin-top: 10px; +} + +.card-list { + width: 500px; + max-width: 100%; + border: solid 1px #ccc; + min-height: 60px; + display: block; + background: var.$white; + border-radius: 4px; + overflow: hidden; +} + +.card-box { + padding: 20px 10px; + border-bottom: solid 1px #ccc; + color: rgba(0, 0, 0, 0.87); + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + cursor: move; + background: var.$white; + font-size: 14px; +} + +.cdk-drag-preview { + border: none; + box-sizing: border-box; + border-radius: 4px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} + +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.card-box:last-child { + border: none; +} + +.card-list.cdk-drop-list-dragging .card-box:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} +.card-custom-placeholder { + background: #ccc; + border: dotted 3px #999; + min-height: 60px; + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} \ No newline at end of file diff --git a/src/app/components/demo/demo.component.spec.ts b/src/app/components/demo/demo.component.spec.ts new file mode 100644 index 0000000..895b441 --- /dev/null +++ b/src/app/components/demo/demo.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DemoComponent } from './demo.component'; + +describe('DemoComponent', () => { + let component: DemoComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DemoComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DemoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/demo/demo.component.ts b/src/app/components/demo/demo.component.ts new file mode 100644 index 0000000..c697392 --- /dev/null +++ b/src/app/components/demo/demo.component.ts @@ -0,0 +1,83 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import {CdkDragDrop, CdkDropList, CdkDrag, CdkDragPlaceholder, moveItemInArray} from '@angular/cdk/drag-drop'; +import { Title } from '@angular/platform-browser'; +import { RouterLink } from '@angular/router'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatSliderModule } from '@angular/material/slider'; + +import { Subscription } from 'rxjs'; + +import { Errors, User } from 'src/app/core/models'; +import { UserService } from 'src/app/core/services'; +import { ListErrorsComponent } from 'src/app/components/shared'; + +@Component({ + selector: 'app-demo', + standalone: true, + imports: [ + CdkDropList, CdkDrag, CdkDragPlaceholder, RouterLink, + MatButtonModule, MatCardModule, MatDividerModule, + MatIconModule, MatProgressBarModule, MatSliderModule, + ListErrorsComponent + ], + templateUrl: './demo.component.html', + styleUrl: './demo.component.scss' +}) +export class DemoComponent implements OnInit, OnDestroy { + private _user: Subscription = new Subscription(); + private _colors: string[] = [ + "primary", "accent", "warn", "secondary", "megna", "raspberry", "success", "info", + "warning", "danger", "red", "orange", "yellow", "green", "teal", "turquoise", "cyan", + "blue", "navy", "navy-light", "pink", "magenta", "purple", "purple-light", "grey", "muted" + ]; + private _icons: string[] = [ + 'mode_edit', 'delete', 'bookmark', 'settings', 'home', 'person', + 'share', 'account_circle', 'public', 'search', 'favorite', 'done', + 'numbers', 'attach_file', 'insert_comment', 'format_list_bulleted', + 'filter', 'crop', 'edit_attributes', 'upload', 'download', 'expand_less', + 'expand_more', 'chevron_left', 'chevron_right', 'sync', 'power', + 'power_off', 'notifications', 'emoji_emotions', 'person_add', 'block' + ]; + + title = 'Demo'; + bannerTitle = ''; + user: Partial = {} as Partial; + errors: Errors = { errors: {} }; + btnSettingsTitle = 'Paramètres'; + + constructor( + private titleService: Title, + private userService: UserService + ) { } + + ngOnInit() { + this.titleService.setTitle(`Ad Astra - ${this.title}`); + Object.assign(this.user, this.userService.getCurrentUser()); + if (this.user.username) { + this.bannerTitle = `@${this.user.username}`; + } else { + this.bannerTitle = `${this.user.firstname} ${this.user.lastname}`; + } + } + + ngOnDestroy() { + this._user.unsubscribe(); + } + + getColors(): string[] { + return this._colors; + } + + getIcon(index: number): string { + return this._icons[index]; + } + + drop(event: CdkDragDrop) { + moveItemInArray(this._colors, event.previousIndex, event.currentIndex); + } + +}