placing of elements in popup
This commit is contained in:
parent
7888220aed
commit
48637c5d54
|
@ -87,6 +87,7 @@
|
||||||
<button
|
<button
|
||||||
class="has-no-border nav-button cancel-button"
|
class="has-no-border nav-button cancel-button"
|
||||||
(click)="showCancelDialog()"
|
(click)="showCancelDialog()"
|
||||||
|
id="display_cancel_popup_button"
|
||||||
aria-haspopup="dialog"
|
aria-haspopup="dialog"
|
||||||
>
|
>
|
||||||
{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
|
{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
|
||||||
|
@ -108,39 +109,37 @@
|
||||||
[resizable]="false"
|
[resizable]="false"
|
||||||
>
|
>
|
||||||
<ng-template pTemplate="titlebar">
|
<ng-template pTemplate="titlebar">
|
||||||
<div class="columns">
|
<div class="top">
|
||||||
<div class="column">
|
<button
|
||||||
<h1 class="title is-2">
|
id="close_dialog"
|
||||||
{{ 'popup.cancel.title' | translate }}
|
class="button is-primary cancel-button-reject pull-right"
|
||||||
</h1>
|
(click)="focusOnCancelButton()"
|
||||||
</div>
|
>
|
||||||
<div class="column is-narrow">
|
Fermer <i class="fa fa-times"></i>
|
||||||
<button
|
</button>
|
||||||
id="close_dialog"
|
|
||||||
class="button is-primary is-fullwidth cancel-button-reject"
|
|
||||||
(click)="display_cancel_dialog = false"
|
|
||||||
>
|
|
||||||
Fermer <i class="fa fa-times"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<h1 class="title is-2">
|
||||||
|
{{ 'popup.cancel.title' | translate }}
|
||||||
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
{{ 'popup.cancel.main' | translate }}
|
{{ 'popup.cancel.main' | translate }}
|
||||||
</p>
|
</p>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template pTemplate="footer">
|
<ng-template pTemplate="footer">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half-mobile">
|
<div class="column has-no-padding is-half-mobile">
|
||||||
<button
|
<button
|
||||||
class="button is-fullwidth cancel-button-confirm is-outlined"
|
class="button is-fullwidth cancel-button-confirm is-outlined"
|
||||||
(click)="display_cancel_dialog = false"
|
(click)="focusOnCancelButton()"
|
||||||
>
|
>
|
||||||
Non
|
Non
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-half-mobile">
|
<div class="column has-no-padding is-half-mobile">
|
||||||
<button class="button is-primary is-fullwidth cancel-button-reject" (click)="goToHome()">
|
<button
|
||||||
|
class="button is-primary is-fullwidth cancel-button-reject-bottom pull-right"
|
||||||
|
(click)="goToHome()"
|
||||||
|
>
|
||||||
Oui, annuler sondage
|
Oui, annuler sondage
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -66,7 +66,7 @@
|
||||||
line-height: $stepper-nav-height;
|
line-height: $stepper-nav-height;
|
||||||
height: $stepper-nav-height;
|
height: $stepper-nav-height;
|
||||||
padding: 0 1rem;
|
padding: 0 1rem;
|
||||||
color: $secondary_color !important;
|
color: $secondary_color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $font_color;
|
color: $font_color;
|
||||||
|
@ -74,6 +74,10 @@
|
||||||
outline-style: solid;
|
outline-style: solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cancel-button-reject-bottom {
|
||||||
|
background: $secondary_color;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
.step-info {
|
.step-info {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
@ -102,6 +106,9 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cancel-button-reject {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
.cancel-button-reject,
|
.cancel-button-reject,
|
||||||
.cancel-button-confirm {
|
.cancel-button-confirm {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
@ -122,3 +129,6 @@
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
#display_cancel_popup_button {
|
||||||
|
min-width: 7em; // to adapt other lang without making the nav move
|
||||||
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@ export class StepperComponent {
|
||||||
showCancelDialog() {
|
showCancelDialog() {
|
||||||
this.display_cancel_dialog = true;
|
this.display_cancel_dialog = true;
|
||||||
this.cd.detectChanges();
|
this.cd.detectChanges();
|
||||||
let buttonClosepopup = this.document.querySelector('.p-dialog-header-close');
|
let buttonClosepopup = this.document.querySelector('#close_dialog');
|
||||||
if (buttonClosepopup) {
|
if (buttonClosepopup) {
|
||||||
buttonClosepopup.focus();
|
buttonClosepopup.focus();
|
||||||
console.log('button close found');
|
console.log('button close found');
|
||||||
|
@ -41,6 +41,13 @@ export class StepperComponent {
|
||||||
console.log('not found');
|
console.log('not found');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
focusOnCancelButton() {
|
||||||
|
this.display_cancel_dialog = false;
|
||||||
|
let buttonClose = this.document.querySelector('#display_cancel_popup_button');
|
||||||
|
if (buttonClose) {
|
||||||
|
buttonClose.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
goToHome() {
|
goToHome() {
|
||||||
this.display_cancel_dialog = false;
|
this.display_cancel_dialog = false;
|
||||||
|
|
|
@ -17,7 +17,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.lang-button {
|
.lang-button {
|
||||||
|
color: $secondary_color;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: $header-nav-inner-height;
|
display: block;
|
||||||
|
line-height: $header-nav-height;
|
||||||
|
height: $header-nav-height;
|
||||||
}
|
}
|
||||||
|
|
|
@ -81,3 +81,6 @@
|
||||||
.has-no-border {
|
.has-no-border {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
.has-no-padding {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
|
@ -43,6 +43,15 @@ body {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.p-dialog-content {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
.title {
|
||||||
|
color: $secondary_color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.p-dialog-footer {
|
||||||
|
padding: 3rem 2.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nobold {
|
.nobold {
|
||||||
|
|
Loading…
Reference in New Issue