Bugzilla – Attachment 176545 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.28 KB, created by
Matt Blenkinsop
on 2025-01-15 10:42:40 UTC
(
hide
)
Description:
Bug 38899: Add a sticky toolbar
Filename:
MIME Type:
Creator:
Matt Blenkinsop
Created:
2025-01-15 10:42:40 UTC
Size:
5.28 KB
patch
obsolete
>From 86de1f69bd93ca8a0426c7c55bb7d56c7e21f662 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 | 40 ++++++++++--------- > .../prog/js/vue/modules/acquisitions.ts | 3 +- > 3 files changed, 52 insertions(+), 21 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 5cdbd5807d9..24eab08169b 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 9b6ebb616f1..7bb4a7f4cfe 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,28 +1,26 @@ > <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" /> >- <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" /> >+ </form> >+ </template> > </template> > > <script> >@@ -33,6 +31,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() { >@@ -149,6 +149,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 181ac69f785..e9366b16afc 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/acquisitions.ts >@@ -10,11 +10,12 @@ import { > faTrash, > faSpinner, > faInbox, >+ faTimes, > } from "@fortawesome/free-solid-svg-icons"; > import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; > import vSelect from "vue-select"; > >-library.add(faPlus, faMinus, faPencil, faTrash, faSpinner, faInbox); >+library.add(faPlus, faMinus, faPencil, faTrash, faSpinner, faInbox, faTimes); > > import App from "../components/Vendors/Main.vue"; > >-- >2.39.5 (Apple Git-154)
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