From 6386fff720b7c9e018f6c759b76e4c8a3553b364 Mon Sep 17 00:00:00 2001 From: Martin Renvoize 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 with SVG in InputText - Replaced with SVG in InputNumber - Replaced with SVG in TextArea - Replaced 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" > - + + +