Attachment 171605 Details for Bug 37812 – Bug 37812: Improve consistency of modal styling in Dialog.vue

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

Bug-37812-Improve-consistency-of-modal-styling-in-.patch (text/plain), 2.72 KB, created by Paul Derscheid on 2024-09-17 11:03:18 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Paul Derscheid

Created: 2024-09-17 11:03:18 UTC

Size: 2.72 KB

patch

obsolete

>From fb5ffcde82efcb02e0c2d9e68ce566faa827b3fb Mon Sep 17 00:00:00 2001
>From: Paul Derscheid <paul.derscheid@lmscloud.de>
>Date: Tue, 17 Sep 2024 10:59:26 +0000
>Subject: [PATCH] Bug 37812: Improve consistency of modal styling in Dialog.vue
>
>- 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.
>---
> .../prog/js/vue/components/Dialog.vue         | 21 +++++++++++++++----
> 1 file changed, 17 insertions(+), 4 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
>index 385ad39379..7978d96d27 100644
>--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
>+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Dialog.vue
>@@ -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>
>-    
> 
>     <div class="modal_centered" v-if="is_submitting">
>         <div class="spinner alert alert-warning">
>-- 
>2.46.1

Actions: View | Diff | Splinter Review

Attachments on bug 37812: 170956 | 171252 | 171253 | 171604 | 171605 | 171625 | 171641 | 171651 | 171690 | 171691 | 171692 | 171693 | 171694 | 171695 | 171696 | 171697 | 171702 | 171703 | 171704 | 171705 | 171706 | 171707 | 171708 | 171758 | 171780 | 171781 | 171786