style in leaving creation popup

This commit is contained in:
Tykayn 2022-02-10 14:50:05 +01:00 committed by tykayn
parent 4645be41d9
commit d1862485dc
10 changed files with 96 additions and 40 deletions

View File

@ -56,7 +56,7 @@
class="button no-outline cancel-button-reject pull-right" class="button no-outline cancel-button-reject pull-right"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button> </button>
</div> </div>
<div class="column"> <div class="column">

View File

@ -101,7 +101,7 @@
class="button cancel-button-reject pull-right has-text-right" class="button cancel-button-reject pull-right has-text-right"
(click)="closeModalAndFocusOnOpenModalButton()" (click)="closeModalAndFocusOnOpenModalButton()"
> >
{{ 'SENTENCES.Close' | translate }} <img class="icon" aria-hidden="true" src="assets/icons/x.svg" /> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button> </button>
</div> </div>
</div> </div>

View File

@ -89,7 +89,7 @@
<div class="column has-text-right is-narrow"> <div class="column has-text-right is-narrow">
<app-language-selector class="nav-button"></app-language-selector> <app-language-selector class="nav-button"></app-language-selector>
<button <button
class="nav-button cancel-button" class="nav-button cancel-button-stepper"
(click)="showCancelDialog()" (click)="showCancelDialog()"
id="display_cancel_popup_button" id="display_cancel_popup_button"
aria-haspopup="dialog" aria-haspopup="dialog"
@ -104,10 +104,12 @@
<!-- modale pour quitter la création--> <!-- modale pour quitter la création-->
<p-dialog <p-dialog
id="close_stepper"
[modal]="true" [modal]="true"
[(visible)]="display_cancel_dialog" [(visible)]="display_cancel_dialog"
[breakpoints]="{ '960px': '75vw' }" [breakpoints]="{ '960px': '75vw' }"
[style]="{ width: '50vw' }" [style]="{ width: '50vw', 'border-radius': '1rem' }"
[styleClass]="'round-borders'"
[draggable]="false" [draggable]="false"
[showHeader]="false" [showHeader]="false"
[resizable]="false" [resizable]="false"
@ -119,23 +121,24 @@
class="button is-primary cancel-button-reject pull-right" class="button is-primary cancel-button-reject pull-right"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i> {{ 'SENTENCES.Close' | translate }}
<img class="icon" src="assets/icons/x_blue.svg" />
</button> </button>
</div> </div>
<h1 class="title"> <h1 class="title">
{{ 'popup.cancel.title' | translate }} {{ 'popup.cancel.title' | translate }}
</h1> </h1>
<p> <p class="description">
{{ '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 has-no-padding"> <div class="column has-no-padding">
<button class="button cancel-button-confirm is-outlined" (click)="focusOnCancelButton()"> <button class="button cancel-button-reject-bottom is-outlined" (click)="focusOnCancelButton()">
{{ 'popup.cancel.reject' | translate }} {{ 'popup.cancel.reject' | translate }}
</button> </button>
<button class="button is-primary cancel-button-reject-bottom" (click)="goToHome()"> <button class="button cancel-button-confirm" (click)="goToHome()">
{{ 'popup.cancel.validate' | translate }} {{ 'popup.cancel.validate' | translate }}
</button> </button>
</div> </div>

View File

@ -19,8 +19,9 @@
width: 40%; width: 40%;
float: left; float: left;
} }
.step-title-poll { .step-title-poll {
max-width: 18ch; max-width: 40ch;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block !important; display: inline-block !important;
overflow: hidden; overflow: hidden;
@ -86,24 +87,19 @@
} }
} }
.cancel-button { #close_stepper {
line-height: $stepper-nav-height / 2; border-radius: 3em;
height: $stepper-nav-height / 2; .title {
padding: 0 1rem; margin-top: 2rem;
margin-top: 0.75rem; font-size: 24px;
color: $primary_color; color: $d-primary-intense;
border-color: $primary_color;
&:hover {
color: $white;
background: $primary_color;
}
} }
.cancel-button-reject-bottom { .description {
background: $secondary_color; color: $font_color;
color: $white; font-size: 1rem;
margin-left: 1rem; line-height: 1.25rem;
}
} }
.step-info { .step-info {
@ -145,21 +141,47 @@
height: 2rem; height: 2rem;
} }
.cancel-button-stepper {
padding: 0 1rem;
height: auto;
margin-top: 0.75rem;
border-color: $primary_color;
color: $primary_color;
}
.cancel-button-confirm {
color: $white !important;
background: $primary_color;
margin-left: 1rem;
margin-top: 0.75rem;
border-color: $primary_color !important;
padding: 10px 30px;
}
.cancel-button-reject-bottom {
color: $primary_color !important;
border-color: $primary_color !important;
margin-top: 0.75rem;
padding: 10px 30px;
&:hover {
color: $white;
background: $primary_color;
}
}
.cancel-button-reject { .cancel-button-reject {
background: none; background: none;
color: $primary_color; color: $primary_color;
margin-right: -1rem; margin-right: -1rem;
float: right;
i { .icon {
color: $primary_color; margin-left: 1rem;
margin-left: 1ch; height: 1rem;
width: 1rem;
margin-top: 0.15rem;
float: right;
} }
} }
.cancel-button-confirm {
color: $secondary_color;
margin-right: 0;
}
} }
.lang-selector-icon { .lang-selector-icon {

View File

@ -21,7 +21,7 @@
class="button no-outline cancel-button-reject" class="button no-outline cancel-button-reject"
(click)="focusOnCancelButton()" (click)="focusOnCancelButton()"
> >
{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i> {{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
</button> </button>
</div> </div>
<h2 class="title is-2 has-text-left"> <h2 class="title is-2 has-text-left">

View File

@ -63,9 +63,13 @@
"description_constraint": "max chars" "description_constraint": "max chars"
}, },
"popup": { "popup": {
"languages": {
"title": "Choose your locale",
"validate": "Save"
},
"cancel": { "cancel": {
"title": "You will cancel your poll creation", "title": "You will leave this poll creation",
"main": "Do you really want to leave the poll creation ?", "main": "Do you really want to leave ?",
"validate": "Yes, cancel poll", "validate": "Yes, cancel poll",
"reject": "No" "reject": "No"
} }

View File

@ -67,10 +67,9 @@
"title": "Choisissez votre langue", "title": "Choisissez votre langue",
"validate": "Enregistrer" "validate": "Enregistrer"
}, },
"cancel": { "cancel": {
"title": "Vous allez annuler votre sondage", "title": "Vous allez quitter le sondage",
"main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant. Souhaitez-vous vraiment annuler?", "main": "Toutes les informations seront effacées.\nSouhaitez-vous vraiment quitter?",
"validate": "Oui, quitter", "validate": "Oui, quitter",
"reject": "Non" "reject": "Non"
} }

View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.43781 6.99976L13.7178 1.71977C14.0778 1.35977 14.0778 0.639766 13.7178 0.279766C13.3578 -0.0802344 12.6378 -0.0802344 12.2778 0.279766L6.99781 5.55976L1.71781 0.279766C1.35781 -0.0802344 0.637813 -0.0802344 0.277813 0.279766C-0.0821875 0.639766 -0.0821875 1.35977 0.277813 1.71977L5.55781 6.99976L0.277813 12.2798C-0.0821875 12.6398 -0.0821875 13.3598 0.277813 13.7198C0.517813 13.9598 0.757812 13.9598 0.997813 13.9598C1.23781 13.9598 1.47781 13.8398 1.71781 13.7198L6.99781 8.43976L12.2778 13.7198C12.5178 13.9598 12.7578 13.9598 12.9978 13.9598C13.2378 13.9598 13.4778 13.8398 13.7178 13.7198C14.0778 13.3598 14.0778 12.6398 13.7178 12.2798L8.43781 6.99976Z" fill="#6359CF"/>
</svg>

After

Width:  |  Height:  |  Size: 794 B

View File

@ -19,3 +19,25 @@ $input-shadow: none;
display: block !important; display: block !important;
width: 80%; width: 80%;
} }
// modal dialog
.p-dialog {
background: blue !important;
}
.cancel-button-reject {
background: none;
color: $primary_color;
margin-right: -1rem;
float: right;
.icon {
margin-left: 1rem;
height: 1rem;
width: 1rem;
margin-top: 0.15rem;
float: right;
}
}
.round-borders {
border-radius: 1rem !important;
}

View File

@ -26,6 +26,9 @@
margin-top: 0; margin-top: 0;
} }
} }
.step-title-poll {
max-width: 18ch;
}
} }
@media (min-width: 380px) { @media (min-width: 380px) {
.feedback-container { .feedback-container {