Bugzilla – Attachment 181822 Details for
Bug 38899
Allow the Vue toolbar to be sticky
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 38899: Add a sticky toolbar
Bug-38899-Add-a-sticky-toolbar.patch (text/plain), 5.52 KB, created by
Matt Blenkinsop
on 2025-05-01 07:40:32 UTC
(
hide
)
Description:
Bug 38899: Add a sticky toolbar
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2025-05-01 07:40:32 UTC
Size:
5.52 KB
patch
obsolete
>From 938f61aad47d65f9e09a8d5606b1ac9696d33adc Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >Date: Wed, 15 Jan 2025 10:40:07 +0000 >Subject: [PATCH] Bug 38899: Add a sticky toolbar > >This patch adds a sticky toolbar to the vendors form > >Test plan: >N.B: This patchset will not work on a sandbox > >1) Navigate to Acquisitions and click New vendor >2) The toolbar should appear at the top of the page underneath Add vendor >3) Scroll down, the toolbar should stick and be given the 'floating' class >4) Scroll back up and the toolbar should unstick and lose the 'floating' class >--- > .../prog/js/vue/components/Toolbar.vue | 30 +++++++++++- > .../vue/components/Vendors/VendorFormAdd.vue | 48 ++++++++++--------- > .../prog/js/vue/modules/acquisitions.ts | 4 +- > 3 files changed, 57 insertions(+), 25 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue >index cd968c2029a..3db1eee90b3 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Toolbar.vue >@@ -1,5 +1,9 @@ > <template> >- <div id="toolbar" class="btn-toolbar"> >+ <div >+ id="toolbar" >+ :class="sticky ? 'btn-toolbar sticky' : 'btn-toolbar'" >+ ref="toolbar" >+ > > <slot /> > </div> > </template> >@@ -7,5 +11,29 @@ > <script> > export default { > name: "Toolbar", >+ props: { >+ sticky: { >+ type: Boolean, >+ default: false, >+ }, >+ }, >+ data() { >+ return { >+ observer: null, >+ }; >+ }, >+ methods: { >+ stickyToolbar([e]) { >+ e.target.classList.toggle("floating", e.intersectionRatio < 1); >+ }, >+ }, >+ mounted() { >+ if (this.sticky) { >+ this.observer = new IntersectionObserver(this.stickyToolbar, { >+ threshold: [1], >+ }); >+ this.observer.observe(this.$refs.toolbar); >+ } >+ }, > }; > </script> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue >index 3c042ca82d6..d5f0ac5b2cf 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Vendors/VendorFormAdd.vue >@@ -1,32 +1,30 @@ > <template> > <div v-if="!initialized">{{ $__("Loading") }}</div> >- <div v-else id="vendor_add"> >+ <template v-else> > <h1 v-if="vendor.id"> > {{ $__("Edit vendor #%s").format(vendor.id) }} > </h1> > <h1 v-else>{{ $__("Add vendor") }}</h1> >- <div> >- <form @submit="onSubmit($event)"> >- <VendorDetails :vendor="vendor" /> >- <VendorContacts :vendor="vendor" /> >- <VendorInterfaces :vendor="vendor" /> >- <VendorOrderingInformation >- :vendor="vendor" >- :verifyDiscountValue="verifyDiscountValue" >- :discountValid="discountValid" >- /> >- <fieldset class="action"> >- <ButtonSubmit /> >- <router-link >- :to="{ name: 'VendorList' }" >- role="button" >- class="cancel" >- >{{ $__("Cancel") }}</router-link >- > >- </fieldset> >- </form> >- </div> >- </div> >+ <form @submit="onSubmit($event)" id="add_vendor"> >+ <Toolbar :sticky="true"> >+ <ButtonSubmit :text="$__('Save')" /> >+ <ToolbarButton >+ :to="{ name: 'VendorList' }" >+ :title="$__('Cancel')" >+ icon="times" >+ > >+ </ToolbarButton> >+ </Toolbar> >+ <VendorDetails :vendor="vendor" /> >+ <VendorContacts :vendor="vendor" /> >+ <VendorInterfaces :vendor="vendor" /> >+ <VendorOrderingInformation >+ :vendor="vendor" >+ :verifyDiscountValue="verifyDiscountValue" >+ :discountValid="discountValid" >+ /> >+ </form> >+ </template> > </template> > > <script> >@@ -37,6 +35,8 @@ import VendorDetails from "./VendorDetails.vue"; > import VendorContacts from "./VendorContacts.vue"; > import VendorOrderingInformation from "./VendorOrderingInformation.vue"; > import VendorInterfaces from "./VendorInterfaces.vue"; >+import Toolbar from "../Toolbar.vue"; >+import ToolbarButton from "../ToolbarButton.vue"; > > export default { > data() { >@@ -193,6 +193,8 @@ export default { > VendorContacts, > VendorOrderingInformation, > VendorInterfaces, >+ Toolbar, >+ ToolbarButton, > }, > name: "VendorFormAdd", > }; >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts >index 8772607f04c..c24ca4c26b7 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts >@@ -12,6 +12,7 @@ import { > faPlus, > faSpinner, > faTrash, >+ faTimes, > } from "@fortawesome/free-solid-svg-icons"; > import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; > import vSelect from "vue-select"; >@@ -24,7 +25,8 @@ library.add( > faPencil, > faPlus, > faSpinner, >- faTrash >+ faTrash, >+ faTimes > ); > > import App from "../components/Vendors/Main.vue"; >-- >2.48.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 38899
:
176545
|
176546
|
181822
|
181823
|
181851
|
181852
|
181965
|
182151