Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve modal system, test when a modal call next modal

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-04-29 15:42:31 +02:00
parent 6939b4a313
commit 25bd170f6b
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -70,6 +70,9 @@ div.vue-component {
display: table; display: table;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.modal-header .close { // bootstrap classes, override sc-button 0 radius
border-top-right-radius: 0.3rem;
}
/* /*
* The following styles are auto-applied to elements with * The following styles are auto-applied to elements with

9
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
View File

@ -31,7 +31,8 @@
<p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p> <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<button class="sc-button green" @click="modal1.showModal = false">{{ $t('action.save')}}</button> <button class="sc-button green" @click="modal1.showModal = false; modal2.showModal = true">
{{ $t('action.next')}}</button>
</template> </template>
</modal> </modal>
@ -43,6 +44,8 @@
<p>modal 2</p> <p>modal 2</p>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<button class="sc-button green" @click="modal2.showModal = false">
{{ $t('action.save')}}</button>
</template> </template>
</modal> </modal>
<!-- END TESTS --> <!-- END TESTS -->
@ -62,11 +65,11 @@ export default {
return { return {
modal1: { modal1: {
showModal: false, showModal: false,
modalDialogClass: "modal-dialog modal-dialog-scrollable modal-xl" // modal-lg modal-md modal-sm modalDialogClass: "modal-dialog-scrollable modal-xl" // modal-lg modal-md modal-sm
}, },
modal2: { modal2: {
showModal: false, showModal: false,
modalDialogClass: "modal-dialog modal-dialog-centered modal-sm" // modal-lg modal-md modal-sm modalDialogClass: "modal-dialog-centered modal-sm" // modal-lg modal-md modal-sm
} }
} }
}, },

5
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
View File

@ -34,7 +34,10 @@ const messages = {
showModal: "Ouvrir une modale", showModal: "Ouvrir une modale",
ok: "OK", ok: "OK",
cancel: "Annuler", cancel: "Annuler",
close: "Fermer" close: "Fermer",
next: "Suivant",
previous: "Précédent",
back: "Retour"
} }
} }
}; };

7
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
View File

@ -2,11 +2,12 @@
<transition name="modal"> <transition name="modal">
<div class="modal-mask"> <div class="modal-mask">
<!-- :: styles bootstrap :: --> <!-- :: styles bootstrap :: -->
<div :class="modalDialogClass"> <div class="modal-dialog" :class="modalDialogClass">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<slot name="header"></slot> <slot name="header"></slot>
<button class="close sc-button grey" @click="$emit('close')"><i class="fa fa-times" aria-hidden="true"></i></button> <button class="close sc-button grey" @click="$emit('close')">
<i class="fa fa-times" aria-hidden="true"></i></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<slot name="body"></slot> <slot name="body"></slot>
@ -29,7 +30,7 @@
* => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden * => with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
* => with slot we can pass content from parent component * => with slot we can pass content from parent component
* => some classes are passed from parent component * => some classes are passed from parent component
* - Bootstrap 4.4 _modal.scss module * - Bootstrap 4.6 _modal.scss module
* => using bootstrap css classes, the modal have a responsive behaviour, * => using bootstrap css classes, the modal have a responsive behaviour,
* => modal design can be configured using css classes (size, scroll) * => modal design can be configured using css classes (size, scroll)
*/ */