Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 33169: Add support for FA styles

Browse source 
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>
This commit is contained in:
Tomás Cohen Arazi 2023-06-21 16:05:26 -03:00 committed by Fridolin Somers
parent 31f48a6d19
commit 6079d70e2d
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue
View file

@ -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)

18
koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js
View file

@ -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: [
{