From 6079d70e2d3c519b0759174b2e48b2221d82830e Mon Sep 17 00:00:00 2001
From: Tomas Cohen Arazi <tomascohen@theke.io>
Date: Wed, 21 Jun 2023 16:05:26 -0300
Subject: [PATCH] Bug 33169: Add support for FA styles

Font awesome now provides a different approach to icon styles so you can
specify things like:

```
<i class="fa fa-camera-retro"></i>
```

but also

```
<i class="fa-solid fa-camera-retro"></i>
```

The original implementation had a hardcoded `fa` and having an extra
parameter for the *style* seemed overkill, as we would need to handle
even a list of styles like on this example:

```
<i class="fa-sharp fa-solid fa-camera-retro"></i>
```

So I chose to just explicitly require the full FA icon class and pass it
thru. With no manipulation on the Vue side.

This patch does that, and adjusts the 'style' for some icons, as
introduced by the FA v6 patchset.

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
(cherry picked from commit 19221dc960532084e3e72e611403f4d2a43adfc9)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 .../prog/js/vue/components/NavigationItem.vue  |  8 ++++----
 .../intranet-tmpl/prog/js/vue/routes/erm.js    | 18 +++++++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue
index 5f6e635318..baa20e5e64 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue
@@ -7,7 +7,7 @@
                 :class="{ disabled: item.disabled }"
             >
                 <template v-if="item.icon">
-                    <i :class="`fa ${item.icon}`"></i>&nbsp;
+                    <i :class="`${item.icon}`"></i>&nbsp;
                 </template>
                 <span v-if="item.title">{{ $__(item.title) }}</span>
             </router-link>
@@ -17,7 +17,7 @@
                 :class="{ disabled: item.disabled }"
             >
                 <template v-if="item.icon">
-                    <i :class="`fa ${item.icon}`"></i>&nbsp;
+                    <i :class="`${item.icon}`"></i>&nbsp;
                 </template>
                 <span v-if="item.title">{{ $__(item.title) }}</span>
             </router-link>
@@ -27,13 +27,13 @@
                 :class="{ disabled: item.disabled }"
             >
                 <template v-if="item.icon">
-                    <i :class="`fa ${item.icon}`"></i>&nbsp;
+                    <i :class="`${item.icon}`"></i>&nbsp;
                 </template>
                 <span v-if="item.title">{{ $__(item.title) }}</span>
             </a>
             <span v-else :class="{ disabled: item.disabled }">
                 <template v-if="item.icon">
-                    <i :class="`fa ${item.icon}`"></i>&nbsp;
+                    <i :class="`${item.icon}`"></i>&nbsp;
                 </template>
                 <span class="item-last" v-if="item.title">{{
                     $__(item.title)
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
index 92b8ab010e..67154222e7 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
@@ -48,7 +48,7 @@ export const routes = [
             {
                 path: "/cgi-bin/koha/erm/agreements",
                 title: $__('Agreements'),
-                icon: 'fa-check-circle-o',
+                icon: 'fa fa-check-circle',
                 is_end_node: true,
                 children: [
                     {
@@ -79,7 +79,7 @@ export const routes = [
             {
                 path: "/cgi-bin/koha/erm/licenses",
                 title: $__('Licenses'),
-                icon: "fa-gavel",
+                icon: "fa fa-gavel",
                 is_end_node: true,
                 children: [
                     {
@@ -110,19 +110,19 @@ export const routes = [
             {
                 path: "/cgi-bin/koha/erm/eholdings",
                 title: $__('eHoldings'),
-                icon: 'fa-crosshairs',
+                icon: 'fa fa-crosshairs',
                 disabled: true,
                 children: [
                     {
                         path: "local",
                         title: $__('Local'),
-                        icon: "fa-map-marker",
+                        icon: "fa-solid fa-location-dot",
                         disabled: true,
                         children: [
                             {
                                 path: "packages",
                                 title: $__('Packages'),
-                                icon: "fa-archive",
+                                icon: "fa fa-archive",
                                 is_end_node: true,
                                 children: [
                                     {
@@ -153,7 +153,7 @@ export const routes = [
                             {
                                 path: "titles",
                                 title: $__('Titles'),
-                                icon: "fa-sort-alpha-asc",
+                                icon: "fa-solid fa-arrow-down-a-z",
                                 is_end_node: true,
                                 children: [
                                     {
@@ -198,13 +198,13 @@ export const routes = [
                     {
                         path: "ebsco",
                         title: $__('EBSCO'),
-                        icon: 'fa-globe',
+                        icon: 'fa fa-globe',
                         disabled: true,
                         children: [
                             {
                                 path: "packages",
                                 title: $__('Packages'),
-                                icon: "fa-archive",
+                                icon: "fa fa-archive",
                                 is_end_node: true,
                                 children: [
                                     {
@@ -223,7 +223,7 @@ export const routes = [
                             {
                                 path: "titles",
                                 title: $__('Titles'),
-                                icon: "fa-sort-alpha-asc",
+                                icon: "fa-solid fa-arrow-down-a-z",
                                 is_end_node: true,
                                 children: [
                                     {
-- 
2.20.1