Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 37812: Improve consistency of modal styling in Dialog.vue

Browse source 
- Use modal-header for content, modal-footer for acknowledgement in alert type modal.
- Conditionally render modal-body if message or inputs available.
- Use modal footer for interactions and hide top border if body wasn't rendered.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
This commit is contained in:
Paul Derscheid 2024-09-17 10:59:26 +00:00 committed by Martin Renvoize
parent 4000890c88
commit 951ad25ac8
Signed by: martin.renvoize
GPG key ID: 422B469130441A0F
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
View file

@ -4,8 +4,10 @@
<div class="modal" role="dialog" v-if="warning">
<div class="modal-dialog">
<div class="modal-content modal-lg">
<div class="modal-body alert-warning">
<h1 v-html="warning"></h1>
<div class="modal-header">
<h1 class="modal-title" v-html="warning"></h1>
</div>
<div class="modal-footer border-top-0">
<button
id="close_modal"
class="btn btn-default deny cancel"
@ -26,7 +28,10 @@
<div class="modal-header alert-warning">
<h1 v-html="confirmation.title"></h1>
</div>
<div class="modal-body">
<div
class="modal-body"
v-if="confirmation.message || confirmation.inputs"
>
<p v-html="confirmation.message"></p>
<div class="inputs" v-if="confirmation.inputs">
<form ref="confirmationform">
@ -62,6 +67,15 @@
</div>
</form>
</div>
</div>
<div
class="modal-footer"
:class="{
'border-top-0': !(
confirmation.message || confirmation.inputs
),
}"
>
<button
v-if="accept_callback"
id="accept_modal"
@ -85,7 +99,6 @@
</div>
</div>
</div>
<!-- Must be styled differently -->
<div class="modal_centered" v-if="is_submitting">
<div class="spinner alert alert-warning">