Ajout du composant 'demo'
This commit is contained in:
Rampeur
@@ -0,0 +1,295 @@
|
|||||||
|
<div class="banner mat-elevation-z2">
|
||||||
|
<div class="banner-content d-flex text-bg-accent bg-opacity-50">
|
||||||
|
<img [src]="user.image" class="user-img me-3" [alt]="user.username" />
|
||||||
|
<div class="flex-spacer">
|
||||||
|
<h3 class="mb-0">{{bannerTitle}}</h3>
|
||||||
|
<span class="fs-6">{{user.firstname}} {{user.lastname}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="align-self-center text-end">
|
||||||
|
<button mat-raised-button color="warn" routerLink="/settings">
|
||||||
|
<mat-icon aria-label="Modifier le compte" fontIcon="settings"></mat-icon> {{ btnSettingsTitle }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="demo-page">
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="flex-fill">
|
||||||
|
<h1 class="mb-1">{{title}}</h1>
|
||||||
|
</div>
|
||||||
|
<span class="flex-spacer"></span>
|
||||||
|
<div class="align-self-center me-2 text-end"></div>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="my-3"></mat-divider>
|
||||||
|
<app-list-errors [errors]="errors"></app-list-errors>
|
||||||
|
</div>
|
||||||
|
<div class="content mt-3">
|
||||||
|
<mat-card>
|
||||||
|
<mat-card-header class="d-flex text-bg-primary rounded-top py-2 px-3">
|
||||||
|
<div class="flex-fill">
|
||||||
|
<mat-card-title>
|
||||||
|
Buttons variants
|
||||||
|
</mat-card-title>
|
||||||
|
<mat-card-subtitle class="fw-normal text-white">
|
||||||
|
{{ getColors().length }} colors
|
||||||
|
</mat-card-subtitle>
|
||||||
|
</div>
|
||||||
|
<span class="flex-spacer"></span>
|
||||||
|
<div class="align-self-center">
|
||||||
|
<button mat-icon-button>
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
<section class="mt-4">
|
||||||
|
<div class="mb-2">Links</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<a href="#" class="text-{{ color }}">{{ color }}</a>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<span class="text-{{ color }}">{{ color }}</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Normal</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-button class="text-nowrap" [color]="color">{{ color }}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-button>Basic</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-button disabled>Disabled</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<a mat-button href="https://www.google.com/" target="_blank"><a Link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Stroked</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-stroked-button class="text-nowrap" [color]="color">{{ color }}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-stroked-button>Basic</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-stroked-button disabled>Disabled</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<a mat-stroked-button href="https://www.google.com/" target="_blank"><a Link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Flat</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-flat-button class="text-nowrap" [color]="color">{{ color }}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-flat-button>Basic</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-flat-button disabled>Disabled</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<a mat-flat-button href="https://www.google.com/" target="_blank"><a Link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Raised</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-raised-button class="text-nowrap" [color]="color">{{ color }}</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-raised-button>Basic</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-raised-button disabled>Disabled</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<a mat-raised-button href="https://www.google.com/" target="_blank"><a Link</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">FAB</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color; let index = $index) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab [color]="color" aria-label="Example icon button with an icon">
|
||||||
|
<mat-icon>{{ getIcon(index) }}</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab color="white" aria-label="Example icon button with a vertical three dot icon">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab disabled aria-label="Example icon button with a block icon">
|
||||||
|
<mat-icon>block</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">FAB extended</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color; let index = $index) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab extended [color]="color" aria-label="Example icon button with an icon">
|
||||||
|
<mat-icon>{{ getIcon(index) }}</mat-icon>
|
||||||
|
{{ color }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab extended color="white" aria-label="Example icon button with a vertical three dot icon">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
white
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-fab extended disabled aria-label="Example icon button with a block icon">
|
||||||
|
<mat-icon>block</mat-icon>
|
||||||
|
disabled
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Mini FAB</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color; let index = $index) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-mini-fab [color]="color" aria-label="Example icon button with an icon">
|
||||||
|
<mat-icon>{{ getIcon(index) }}</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-mini-fab color="white" aria-label="Example icon button with a vertical three dot icon">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-mini-fab disabled aria-label="Example icon button with a block icon">
|
||||||
|
<mat-icon>block</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<section>
|
||||||
|
<div class="mb-2">Icon</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
@for (color of getColors(); track color; let index = $index) {
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-icon-button [color]="color" aria-label="Example icon button with an icon">
|
||||||
|
<mat-icon>{{ getIcon(index) }}</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="m-2">
|
||||||
|
<button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
|
||||||
|
<mat-icon>open_in_new</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="my-4"></mat-divider>
|
||||||
|
<div cdkDropList class="row mb-3" (cdkDropListDropped)="drop($event)">
|
||||||
|
@for (color of getColors(); track color) {
|
||||||
|
<div class="col-xs-12 col-lg-6 col-xxl-4 pb-3" cdkDrag>
|
||||||
|
<div class="card-custom-placeholder col-xs-12 col-lg-6 col-xxl-4 pb-3" *cdkDragPlaceholder></div>
|
||||||
|
<mat-card>
|
||||||
|
<mat-card-header class="d-flex text-bg-{{ color }} rounded-top py-2 px-3">
|
||||||
|
<div class="flex-fill">
|
||||||
|
<mat-card-title>
|
||||||
|
{{ color }}
|
||||||
|
</mat-card-title>
|
||||||
|
<mat-card-subtitle class="fw-normal">
|
||||||
|
Card subtitle
|
||||||
|
</mat-card-subtitle>
|
||||||
|
</div>
|
||||||
|
<span class="flex-spacer"></span>
|
||||||
|
<div class="align-self-center">
|
||||||
|
<button mat-icon-button>
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
<section class="mt-4 mb-3">
|
||||||
|
<div class="d-flex flex-wrap align-items-start">
|
||||||
|
<button mat-raised-button [color]="color" class="m-2 align-self-center">Texte Raised</button>
|
||||||
|
<button mat-flat-button [color]="color" class="m-2 align-self-center">Texte Flat</button>
|
||||||
|
<button mat-stroked-button [color]="color" class="m-2 align-self-center">Texte Stroked</button>
|
||||||
|
<button mat-button [color]="color" class="m-2 align-self-center">{{ color }}</button>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-wrap align-items-start mb-3">
|
||||||
|
<button mat-fab extended [color]="color" class="m-2 align-self-center">
|
||||||
|
<mat-icon>check_circle</mat-icon>
|
||||||
|
{{ color }}
|
||||||
|
</button>
|
||||||
|
<button mat-fab [color]="color" class="m-2 align-self-center">
|
||||||
|
<mat-icon>check_circle</mat-icon>
|
||||||
|
</button>
|
||||||
|
<button mat-mini-fab [color]="color" class="m-2 align-self-center">
|
||||||
|
<mat-icon>check_circle</mat-icon>
|
||||||
|
</button>
|
||||||
|
<button mat-icon-button [color]="color" class="m-2 align-self-center">
|
||||||
|
<mat-icon>check_circle</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<mat-progress-bar [color]="color" mode="determinate" value="40"></mat-progress-bar>
|
||||||
|
<mat-slider class="w-100" min="0" max="1000">
|
||||||
|
<input value="300" matSliderStartThumb>
|
||||||
|
<input value="600" matSliderEndThumb>
|
||||||
|
</mat-slider>
|
||||||
|
</section>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DemoComponent } from './demo.component';
|
||||||
|
|
||||||
|
describe('DemoComponent', () => {
|
||||||
|
let component: DemoComponent;
|
||||||
|
let fixture: ComponentFixture<DemoComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [DemoComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(DemoComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -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<User> = {} as Partial<User>;
|
||||||
|
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<string[]>) {
|
||||||
|
moveItemInArray(this._colors, event.previousIndex, event.currentIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user