Bugzilla – Attachment 188880 Details for
Bug 41151
Vue Additional Fields UX Improvements
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 41151: Replace FontAwesome icons with SVG and improve input styling
Bug-41151-Replace-FontAwesome-icons-with-SVG-and-i.patch (text/plain), 10.12 KB, created by
Martin Renvoize (ashimema)
on 2025-11-01 14:47:47 UTC
(
hide
)
Description:
Bug 41151: Replace FontAwesome icons with SVG and improve input styling
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-11-01 14:47:47 UTC
Size:
10.12 KB
patch
obsolete
>From 6386fff720b7c9e018f6c759b76e4c8a3553b364 Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@openfifth.co.uk> >Date: Sat, 1 Nov 2025 14:46:01 +0000 >Subject: [PATCH] Bug 41151: Replace FontAwesome icons with SVG and improve > input styling >MIME-Version: 1.0 >Content-Type: text/plain; charset=UTF-8 >Content-Transfer-Encoding: 8bit > >This patch updates all clear buttons with two improvements: > >1. Replaced FontAwesome icons with cleaner SVG X icon from vue-select >2. Updated input padding to match Select2/vue-select styling > >Changes: >- Replaced <i class="fa fa-times"></i> with SVG in InputText >- Replaced <i class="fa fa-times"></i> with SVG in InputNumber >- Replaced <i class="fa fa-times"></i> with SVG in TextArea >- Replaced <i class="fa fa-times"></i> with SVG in AdditionalFieldsEntry >- Updated CSS from .clear-button i to .clear-button svg >- Added title attribute for better tooltip support >- Updated input padding from just "padding-right: 2rem" to full padding > specification: "padding: 0.375rem 2rem 0.375rem 0.75rem" >- Added line-height: 1.5 to match Select2 styling > >The SVG icon: >- Is the same 10x10 SVG used in vue-select components >- Uses currentColor via fill for proper color inheritance >- Maintains the same hover/focus color transitions (#999 รข #333) >- Provides a cleaner, more professional appearance > >The improved padding: >- Matches the vertical and horizontal spacing of Select2 dropdowns >- Makes text inputs less "squashed" and more spacious >- Creates visual consistency across all form controls >- Uses Bootstrap's standard input padding (0.375rem vertical, 0.75rem horizontal) > >This creates visual consistency between clear buttons and padding across >all input types and the existing Select2/vue-select components. >--- > .../vue/components/AdditionalFieldsEntry.vue | 21 ++++++++++++++----- > .../vue/components/Elements/InputNumber.vue | 21 ++++++++++++++----- > .../js/vue/components/Elements/InputText.vue | 21 ++++++++++++++----- > .../js/vue/components/Elements/TextArea.vue | 21 ++++++++++++++----- > 4 files changed, 64 insertions(+), 20 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsEntry.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsEntry.vue >index 71108676e31..d329f4aa348 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsEntry.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/AdditionalFieldsEntry.vue >@@ -106,9 +106,19 @@ > class="clear-button" > @click="clearField(current, $event)" > :aria-label="$__('Clear')" >+ :title="$__('Clear')" > tabindex="-1" > > >- <i class="fa fa-times"></i> >+ <svg >+ xmlns="http://www.w3.org/2000/svg" >+ width="10" >+ height="10" >+ viewBox="0 0 10 10" >+ > >+ <path >+ d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" >+ ></path> >+ </svg> > </button> > </span> > <template v-if="available_field.repeatable"> >@@ -359,9 +369,10 @@ export default { > display: inline; > } > >-/* Input with clear button gets padding for the button */ >+/* Input with clear button gets padding for the button and matches select2 styling */ > input.input-with-clear { >- padding-right: 2rem; >+ padding: 0.375rem 2rem 0.375rem 0.75rem; >+ line-height: 1.5; > } > > .clear-button { >@@ -394,8 +405,8 @@ input.input-with-clear { > border-radius: 2px; > } > >-.clear-button i { >- font-size: 1rem; >+.clear-button svg { >+ fill: currentColor; > } > > /* New button spacing */ >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumber.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumber.vue >index ed85c49d75e..d42cd946eb4 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumber.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumber.vue >@@ -15,9 +15,19 @@ > class="clear-button" > @click="clearInput" > :aria-label="$__('Clear')" >+ :title="$__('Clear')" > tabindex="-1" > > >- <i class="fa fa-times"></i> >+ <svg >+ xmlns="http://www.w3.org/2000/svg" >+ width="10" >+ height="10" >+ viewBox="0 0 10 10" >+ > >+ <path >+ d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" >+ ></path> >+ </svg> > </button> > </span> > <input >@@ -77,9 +87,10 @@ export default { > display: inline; > } > >-/* Input with clear button gets padding for the button */ >+/* Input with clear button gets padding for the button and matches select2 styling */ > input.input-with-clear { >- padding-right: 2rem; >+ padding: 0.375rem 2rem 0.375rem 0.75rem; >+ line-height: 1.5; > } > > .clear-button { >@@ -112,7 +123,7 @@ input.input-with-clear { > border-radius: 2px; > } > >-.clear-button i { >- font-size: 1rem; >+.clear-button svg { >+ fill: currentColor; > } > </style> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputText.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputText.vue >index cc04c4842b5..7c6fe56a9b5 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputText.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputText.vue >@@ -14,9 +14,19 @@ > class="clear-button" > @click="clearInput" > :aria-label="$__('Clear')" >+ :title="$__('Clear')" > tabindex="-1" > > >- <i class="fa fa-times"></i> >+ <svg >+ xmlns="http://www.w3.org/2000/svg" >+ width="10" >+ height="10" >+ viewBox="0 0 10 10" >+ > >+ <path >+ d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" >+ ></path> >+ </svg> > </button> > </span> > <input >@@ -70,9 +80,10 @@ export default { > display: inline; > } > >-/* Input with clear button gets padding for the button */ >+/* Input with clear button gets padding for the button and matches select2 styling */ > input.input-with-clear { >- padding-right: 2rem; >+ padding: 0.375rem 2rem 0.375rem 0.75rem; >+ line-height: 1.5; > } > > .clear-button { >@@ -105,7 +116,7 @@ input.input-with-clear { > border-radius: 2px; > } > >-.clear-button i { >- font-size: 1rem; >+.clear-button svg { >+ fill: currentColor; > } > </style> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/TextArea.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/TextArea.vue >index 4aedd8effbc..a35d11c9cb8 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/TextArea.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/TextArea.vue >@@ -15,9 +15,19 @@ > class="clear-button" > @click="clearInput" > :aria-label="$__('Clear')" >+ :title="$__('Clear')" > tabindex="-1" > > >- <i class="fa fa-times"></i> >+ <svg >+ xmlns="http://www.w3.org/2000/svg" >+ width="10" >+ height="10" >+ viewBox="0 0 10 10" >+ > >+ <path >+ d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z" >+ ></path> >+ </svg> > </button> > </span> > <textarea >@@ -80,9 +90,10 @@ export default { > display: inline-block; > } > >-/* Textarea with clear button gets padding for the button */ >+/* Textarea with clear button gets padding for the button and matches select2 styling */ > textarea.textarea-with-clear { >- padding-right: 2rem; >+ padding: 0.375rem 2rem 0.375rem 0.75rem; >+ line-height: 1.5; > } > > .clear-button { >@@ -114,7 +125,7 @@ textarea.textarea-with-clear { > border-radius: 2px; > } > >-.clear-button i { >- font-size: 1rem; >+.clear-button svg { >+ fill: currentColor; > } > </style> >-- >2.51.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 41151
:
188814
|
188815
|
188816
|
188817
|
188818
|
188819
|
188820
|
188821
|
188822
|
188874
|
188875
|
188876
|
188877
|
188878
|
188879
| 188880