forked from tykayn/funky-framadate-front
style in leaving creation popup
This commit is contained in:
parent
4645be41d9
commit
d1862485dc
@ -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">
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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">
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
|
3
src/assets/icons/x_blue.svg
Normal file
3
src/assets/icons/x_blue.svg
Normal 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 |
@ -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;
|
||||||
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user