EQ: add texts and stepper component
This commit is contained in:
Tykayn
tykayn
parent
9de7b06579
commit
d176f57dc5
12 changed files with 241 additions and 58 deletions
|
|
@ -1,9 +1,11 @@
|
|||
// Styles globaux supplémentaires
|
||||
html, body {
|
||||
font-family: Barlow, Calibri, SansSerif;
|
||||
height: 80vw;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 100px;
|
||||
width: 80vw;
|
||||
|
|
@ -18,8 +20,56 @@ main {
|
|||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
app-main-nav {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--Colors-Principal-500, #153451);
|
||||
|
||||
/* AERO Typo/Body/B18/SemiBold */
|
||||
font-family: Barlow;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 28px; /* 155.556% */
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: 10px 16px;
|
||||
border: solid 1px #A8ACC2;
|
||||
color: #585E7E;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// forms
|
||||
select, input {
|
||||
padding: 10px 16px;
|
||||
border: solid 1px #A8ACC2;
|
||||
color: #585E7E;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
|
||||
/* AERO Typo/Body/B16/Regular */
|
||||
font-family: var(--font-family-title, Barlow);
|
||||
font-size: var(--font-size-body-B16, 16px);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: var(--font-line-height-body-B16, 24px); /* 150% */
|
||||
letter-spacing: var(--font-tracking-none, 0);
|
||||
margin-bottom: 14px;
|
||||
|
||||
|
||||
+ select {
|
||||
margin-bottom: 14px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,81 @@
|
|||
<div id="home">
|
||||
|
||||
page d'accueil
|
||||
<!-- page d'accueil-->
|
||||
|
||||
<sae-wip-block>
|
||||
stepper
|
||||
</sae-wip-block>
|
||||
<sae-wip-block>
|
||||
formulaire
|
||||
<br>
|
||||
<h2>
|
||||
Saisir vos critères
|
||||
</h2>
|
||||
<sae-wip-block>
|
||||
fiche résumé
|
||||
</sae-wip-block>
|
||||
<!-- stepper-->
|
||||
<sae-stepper [currentStep]="1" [maxStep]="2"></sae-stepper>
|
||||
|
||||
<sae-m-button kind="secondary" label="do something"></sae-m-button>
|
||||
<sae-m-button kind="primary" label="do something"></sae-m-button>
|
||||
<textarea [(ngModel)]="fromText"></textarea>
|
||||
</sae-wip-block>
|
||||
<sae-wip-block>
|
||||
filtres
|
||||
<div class="optionnal">
|
||||
(optionnels)
|
||||
</div>
|
||||
<br>
|
||||
<div class="filter-grid">
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select name="a" id="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<h2>
|
||||
Saisir vos critères
|
||||
</h2>
|
||||
<p>
|
||||
Saisissez un événement qualité ou poser une question, pour explorer les cas déjà traités. Vous pourrez ainsi
|
||||
gagner du temps et vous appuyer sur des retours d’expérience concrets.
|
||||
</p>
|
||||
|
||||
<sae-m-button kind="primary" label="Chercher un EQ" size="medium"></sae-m-button>
|
||||
<sae-m-button kind="secondary" label="Poser une question" size="medium"></sae-m-button>
|
||||
<textarea
|
||||
[(ngModel)]="fromText"
|
||||
cols="30"
|
||||
placeholder="Posez votre question"
|
||||
rows="5"
|
||||
></textarea>
|
||||
|
||||
<div class="optionnal">
|
||||
(optionnels)
|
||||
</div>
|
||||
<br>
|
||||
<div class="filter-grid">
|
||||
<select id="a" name="a">
|
||||
<option disabled selected value="">Select your option</option>
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
<select id="a" name="a">
|
||||
<option value="1">1</option>
|
||||
</select>
|
||||
|
||||
|
||||
</div>
|
||||
<input type="text" name="keywords" [(ngModel)]="keywords">
|
||||
</sae-wip-block>
|
||||
</div>
|
||||
<input
|
||||
[(ngModel)]="keywords"
|
||||
name="keywords"
|
||||
placeholder="Saisir des mots clés pour affiner votre rechrche"
|
||||
type="text">
|
||||
<sae-wip-block>
|
||||
rechercher
|
||||
<br>
|
||||
<sae-m-button kind="secondary" label="réinitialiser" [disabled]="disableSearch"></sae-m-button>
|
||||
<sae-m-button kind="primary" label="Rechercher des cas similaires" [disabled]="disableSearch"></sae-m-button>
|
||||
<sae-m-button
|
||||
[disabled]="disableSearch"
|
||||
kind="secondary"
|
||||
label="Réinitialiser"
|
||||
></sae-m-button>
|
||||
<sae-m-button
|
||||
[disabled]="disableSearch"
|
||||
kind="primary"
|
||||
label="Rechercher des cas similaires"
|
||||
></sae-m-button>
|
||||
|
||||
</sae-wip-block>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
:host {
|
||||
textarea {
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import {Component} from '@angular/core';
|
|||
import {MainButton} from 'sae-lib/buttons/main-button/main-button';
|
||||
import {WipBlock} from 'sae-lib/layouts/wip-block/wip-block';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {Stepper} from 'sae-lib/stepper/stepper';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
|
|
@ -10,7 +11,8 @@ import {FormsModule} from '@angular/forms';
|
|||
MainButton,
|
||||
WipBlock,
|
||||
CommonModule,
|
||||
FormsModule
|
||||
FormsModule,
|
||||
Stepper
|
||||
],
|
||||
templateUrl: './home.html',
|
||||
styleUrl: './home.scss'
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>sae-stepper works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SaeStepper } from './sae-stepper';
|
||||
|
||||
describe('SaeStepper', () => {
|
||||
let component: SaeStepper;
|
||||
let fixture: ComponentFixture<SaeStepper>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [SaeStepper]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SaeStepper);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
11
my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts
Normal file
11
my-workspace/projects/sae-lib/sae-stepper/sae-stepper.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-sae-stepper',
|
||||
imports: [],
|
||||
templateUrl: './sae-stepper.html',
|
||||
styleUrl: './sae-stepper.css'
|
||||
})
|
||||
export class SaeStepper {
|
||||
|
||||
}
|
||||
7
my-workspace/projects/sae-lib/stepper/stepper.html
Normal file
7
my-workspace/projects/sae-lib/stepper/stepper.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<div class="stepper">
|
||||
@for (ii of stepArray; track ii) {
|
||||
<div class="step {{ currentStep >= ii ? 'is-active' : 'is-inactive'}}">
|
||||
{{ ii }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
17
my-workspace/projects/sae-lib/stepper/stepper.scss
Normal file
17
my-workspace/projects/sae-lib/stepper/stepper.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
:host {
|
||||
.step {
|
||||
border-radius: 1px solid grey;
|
||||
padding: 1rem;
|
||||
background: white;
|
||||
|
||||
&.is-active {
|
||||
color: black;
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
background: grey;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
my-workspace/projects/sae-lib/stepper/stepper.spec.ts
Normal file
23
my-workspace/projects/sae-lib/stepper/stepper.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Stepper } from './stepper';
|
||||
|
||||
describe('Stepper', () => {
|
||||
let component: Stepper;
|
||||
let fixture: ComponentFixture<Stepper>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Stepper]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Stepper);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
30
my-workspace/projects/sae-lib/stepper/stepper.ts
Normal file
30
my-workspace/projects/sae-lib/stepper/stepper.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {JsonPipe} from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'sae-stepper',
|
||||
imports: [
|
||||
JsonPipe
|
||||
],
|
||||
templateUrl: './stepper.html',
|
||||
styleUrl: './stepper.scss'
|
||||
})
|
||||
export class Stepper {
|
||||
@Input() currentStep: number = 1;
|
||||
@Input() minStep: number = 1;
|
||||
@Input() maxStep: number = 3;
|
||||
@Input() stepArray: Array<number> = [1, 2, 3];
|
||||
@Output() changedStep: EventEmitter<any> = new EventEmitter();
|
||||
|
||||
constructor() {
|
||||
this.stepArray = []
|
||||
for (let ii = this.currentStep; ii < this.maxStep; ii++) {
|
||||
|
||||
this.stepArray.push(ii)
|
||||
}
|
||||
}
|
||||
|
||||
onClickStep(newValue: number) {
|
||||
this.changedStep.emit(newValue)
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue