Bugzilla – Attachment 188922 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), 11.03 KB, created by
Martin Renvoize (ashimema)
on 2025-11-03 10:35:20 UTC
(
hide
)
Description:
Bug 41151: Replace FontAwesome icons with SVG and improve input styling
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-11-03 10:35:20 UTC
Size:
11.03 KB
patch
obsolete
>From baf37a27f551bdc0d7a52412dfcd70aed8526d60 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 | 25 +++++++++++++------ > .../js/vue/components/Elements/InputText.vue | 25 +++++++++++++------ > .../js/vue/components/Elements/TextArea.vue | 25 +++++++++++++------ > 4 files changed, 70 insertions(+), 26 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..4892b0f042f 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 >@@ -1,5 +1,5 @@ > <template> >- <span v-if="clearable" class="input-group"> >+ <span v-if="clearable" class="input-with-clear-wrapper"> > <input > :id="id" > inputmode="numeric" >@@ -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 >@@ -72,14 +82,15 @@ export default { > </script> > > <style scoped> >-.input-group { >+.input-with-clear-wrapper { > position: relative; > 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..3ae020e16e3 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 >@@ -1,5 +1,5 @@ > <template> >- <span v-if="clearable" class="input-group"> >+ <span v-if="clearable" class="input-with-clear-wrapper"> > <input > :id="id" > type="text" >@@ -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 >@@ -65,14 +75,15 @@ export default { > </script> > > <style scoped> >-.input-group { >+.input-with-clear-wrapper { > position: relative; > 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..a1ad537e923 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 >@@ -1,5 +1,5 @@ > <template> >- <span v-if="clearable" class="textarea-group"> >+ <span v-if="clearable" class="textarea-with-clear-wrapper"> > <textarea > :id="id" > v-model="model" >@@ -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 >@@ -75,14 +85,15 @@ export default { > </script> > > <style scoped> >-.textarea-group { >+.textarea-with-clear-wrapper { > position: relative; > 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
|
188922
|
189295
|
189296
|
189297
|
189298
|
189299
|
189300
|
189301
|
189302