Ajout des sources
This commit is contained in:
Julien Gautier
@@ -0,0 +1,18 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { CalculatorComponent } from './calculator.component';
|
||||
import { AuthGuard } from 'src/app/core/services';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: CalculatorComponent,
|
||||
canActivate: [AuthGuard]
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class CalculatorRoutingModule { }
|
||||
@@ -0,0 +1,278 @@
|
||||
<div class="content">
|
||||
<h1>{{title}}</h1>
|
||||
<div class="col-xs-12">
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- primary buttons -->
|
||||
<button mat-button color="primary" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="primary" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="primary" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="primary" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- accent buttons -->
|
||||
<button mat-button color="accent" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="accent" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="accent" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="accent" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- warn buttons -->
|
||||
<button mat-button color="warn" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="warn" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="warn" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="warn" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- danger buttons -->
|
||||
<button mat-button color="danger" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="danger" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="danger" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="danger" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- info buttons -->
|
||||
<button mat-button color="info" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="info" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="info" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="info" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- success buttons -->
|
||||
<button mat-button color="success" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="success" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="success" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="success" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="demo-label">Basic</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-button>Basic</button>
|
||||
<button mat-button color="primary">Primary</button>
|
||||
<button mat-button color="accent">Accent</button>
|
||||
<button mat-button color="warn">Warn</button>
|
||||
<button mat-button color="danger">Danger</button>
|
||||
<button mat-button color="info">Info</button>
|
||||
<button mat-button color="success">Success</button>
|
||||
<button mat-button disabled>Disabled</button>
|
||||
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Raised</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-raised-button>Basic</button>
|
||||
<button mat-raised-button color="primary">Primary</button>
|
||||
<button mat-raised-button color="accent">Accent</button>
|
||||
<button mat-raised-button color="warn">Warn</button>
|
||||
<button mat-raised-button color="danger">Danger</button>
|
||||
<button mat-raised-button color="info">Info</button>
|
||||
<button mat-raised-button color="success">Success</button>
|
||||
<button mat-raised-button disabled>Disabled</button>
|
||||
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Stroked</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-stroked-button>Basic</button>
|
||||
<button mat-stroked-button color="primary">Primary</button>
|
||||
<button mat-stroked-button color="accent">Accent</button>
|
||||
<button mat-stroked-button color="warn">Warn</button>
|
||||
<button mat-stroked-button color="danger">Danger</button>
|
||||
<button mat-stroked-button color="info">Info</button>
|
||||
<button mat-stroked-button color="success">Success</button>
|
||||
<button mat-stroked-button disabled>Disabled</button>
|
||||
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Flat</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-flat-button>Basic</button>
|
||||
<button mat-flat-button color="primary">Primary</button>
|
||||
<button mat-flat-button color="accent">Accent</button>
|
||||
<button mat-flat-button color="warn">Warn</button>
|
||||
<button mat-flat-button color="danger">Danger</button>
|
||||
<button mat-flat-button color="info">Info</button>
|
||||
<button mat-flat-button color="success">Success</button>
|
||||
<button mat-flat-button disabled>Disabled</button>
|
||||
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Icon</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-flex-container">
|
||||
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<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-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">FAB</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-flex-container">
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="primary" aria-label="Example icon button with a delete icon">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
|
||||
<mat-icon>bookmark</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="warn" aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab disabled aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Mini FAB</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-flex-container">
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
|
||||
<mat-icon>plus_one</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
|
||||
<mat-icon>filter_list</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab disabled aria-label="Example icon button with a home icon">
|
||||
<mat-icon>home</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
section {
|
||||
display: table;
|
||||
}
|
||||
.demo-label {
|
||||
display: table-cell;
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.demo-button-row {
|
||||
display: table-cell;
|
||||
max-width: 900px;
|
||||
}
|
||||
.demo-button-row .mat-mdc-button-base {
|
||||
margin: 8px 8px 8px 0;
|
||||
}
|
||||
.demo-flex-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo-button-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CalculatorComponent } from './calculator.component';
|
||||
|
||||
describe('CalculatorComponent', () => {
|
||||
let component: CalculatorComponent;
|
||||
let fixture: ComponentFixture<CalculatorComponent>;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [CalculatorComponent]
|
||||
});
|
||||
fixture = TestBed.createComponent(CalculatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [
|
||||
MatButtonModule, MatDividerModule, MatIconModule
|
||||
],
|
||||
selector: 'huapp-calculator',
|
||||
templateUrl: './calculator.component.html',
|
||||
styleUrls: ['./calculator.component.scss']
|
||||
})
|
||||
export class CalculatorComponent implements OnInit, OnDestroy {
|
||||
title = 'Taille de voile - DT48';
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
//
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
//this._scavenger.unsubscribe();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { AuthResolver } from 'src/app/core/services';
|
||||
import { CalculatorComponent } from './calculator.component';
|
||||
import { CalculatorRoutingModule } from './calculator-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CalculatorRoutingModule,
|
||||
CalculatorComponent
|
||||
],
|
||||
exports: [],
|
||||
providers: [AuthResolver]
|
||||
})
|
||||
export class CalculatorModule { }
|
||||
Reference in New Issue
Block a user