erasable button on first field
This commit is contained in:
tykayn
parent
5d39b7aa3e
commit
6fdb56786a
|
|
@ -1,17 +1,9 @@
|
|||
<form [formGroup]="form">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
<label for="title">
|
||||
{{ 'creation.choose_title' | translate }}
|
||||
</p>
|
||||
<br />
|
||||
<label class="hidden" for="title">Titre</label>
|
||||
<!-- errors:-->
|
||||
<!-- <pre class="debug padded warning">-->
|
||||
<!-- form.errors :-->
|
||||
<!-- {{ form.controls.title.errors | json }}-->
|
||||
<!-- </pre-->
|
||||
<!-- >-->
|
||||
</label>
|
||||
|
||||
<input
|
||||
class="input"
|
||||
|
|
@ -23,9 +15,6 @@
|
|||
required="required"
|
||||
#title
|
||||
/>
|
||||
<div class="hint" *ngIf="form.controls.title.errors">
|
||||
Ce champ est requis
|
||||
</div>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="form.value.title"
|
||||
|
|
@ -36,23 +25,37 @@
|
|||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
<div class="hint" *ngIf="form.controls.title.errors">
|
||||
Ce champ est requis
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<label for="creatorPseudo">
|
||||
<span>
|
||||
{{ 'creation.email' | translate }}
|
||||
</span>
|
||||
</label>
|
||||
<label for="creatorPseudo">
|
||||
<span>
|
||||
{{ 'creation.email' | translate }}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<input
|
||||
#creatorEmail
|
||||
matInput
|
||||
placeholder="{{ 'creation.email_placeholder' | translate }}"
|
||||
formControlName="creatorEmail"
|
||||
id="creatorEmail"
|
||||
required
|
||||
/>
|
||||
</p>
|
||||
<input
|
||||
#creatorEmail
|
||||
matInput
|
||||
placeholder="{{ 'creation.email_placeholder' | translate }}"
|
||||
formControlName="creatorEmail"
|
||||
id="creatorEmail"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="form.value.creatorEmail"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="form.patchValue({ creatorEmail: '' })"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
<div class="hint" *ngIf="form.controls.creatorEmail.errors">
|
||||
Ce champ est requis
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<p>
|
||||
|
|
@ -69,33 +72,24 @@
|
|||
id="creatorPseudo"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="form.value.creatorPseudo"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="form.patchValue({ creatorPseudo: '' })"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
</div>
|
||||
custom url:
|
||||
Url personnalisée:
|
||||
{{ form.value.custom_url }}
|
||||
<hr />
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<!-- <img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
|
||||
<div>
|
||||
<h2>
|
||||
{{ 'choices.title' | translate }}
|
||||
</h2>
|
||||
{{ 'dates.add' | translate }}
|
||||
<p>
|
||||
<i>
|
||||
{{ 'choices.helper' | translate }}
|
||||
</i>
|
||||
</p>
|
||||
{{ 'choices.answer_preset_1' | translate }}
|
||||
{{ 'choices.add' | translate }}
|
||||
{{ 'choices.continue' | translate }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button class="btn btn--warning" (click)="askInitFormDefault()">
|
||||
<i class="fa fa-refresh"></i>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,18 @@
|
|||
<div class="date-selection">
|
||||
<form [formGroup]="form">
|
||||
<h2>
|
||||
{{ 'choices.title' | translate }}
|
||||
</h2>
|
||||
{{ 'dates.add' | translate }}
|
||||
<p>
|
||||
<i>
|
||||
{{ 'choices.helper' | translate }}
|
||||
</i>
|
||||
</p>
|
||||
{{ 'choices.answer_preset_1' | translate }}
|
||||
{{ 'choices.add' | translate }}
|
||||
{{ 'choices.continue' | translate }}
|
||||
|
||||
<!-- interval-->
|
||||
<button
|
||||
(click)="showDateInterval = !showDateInterval"
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ export class DateSelectComponent implements OnInit {
|
|||
@Input()
|
||||
public form: FormGroup;
|
||||
|
||||
public showDateInterval = true;
|
||||
public allowSeveralHours = true;
|
||||
public showDateInterval = false;
|
||||
public allowSeveralHours = false;
|
||||
today = new Date();
|
||||
startDateInterval: string;
|
||||
endDateInterval: string;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
label {
|
||||
margin-top: 1em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
.ui-inputswitch {
|
||||
|
|
@ -13,14 +14,13 @@ label {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 1ch;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
+ button,
|
||||
+ .mat-icon-button {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
&[type='date']::after {
|
||||
content: 'au format JJ/MM/AAAA';
|
||||
|
|
@ -32,25 +32,18 @@ input {
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border: 1px solid $secondary_color;
|
||||
border-bottom: 3px solid $primary_color;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
display: inline-block;
|
||||
width: calc(100% - 45px) !important;
|
||||
max-width: 40em !important;
|
||||
}
|
||||
|
||||
.next {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue