From 0c9308b4c6a518e380173b6648ded539173d2227 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Mon, 20 Sep 2021 15:22:33 +0000
Subject: [PATCH] Bug 29057: [alternate] Use font awesome icons on request.pl

This patch offers an alternate take on using Font Awesome icons on the
holds page in place of images as links.

This revised patch updates the icon implementation so that it is easier
to override the Font Awesome icon selection with CSS. Test by adding the
contents of this file to the IntranetUserCSS preference:

https://gitlab.com/-/snippets/2319364

To test:
1 - Place some holds on a record
2 - View the 'Holds' tab in the staff interface
3 - Note the new icons
4 - Note their hover test
5 - Confirm the buttons still work as expected

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
---
 .../prog/en/includes/holds_table.inc          | 40 ++++++-----
 .../prog/en/modules/reserve/request.tt        | 66 ++++++++++++++++++-
 2 files changed, 88 insertions(+), 18 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/holds_table.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/holds_table.inc
index 2c1fd418dd..be1d4fe101 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/holds_table.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/holds_table.inc
@@ -17,7 +17,9 @@
         <th>Pickup library</th>
         <th>Details</th>
         [% IF ( CAN_user_reserveforothers_modify_holds_priority ) %]
-            <th><img src="[% interface | html %]/[% theme | html %]/img/go-bottom.png" alt="Toggle set to lowest priority" /></th>
+            <th>
+                <i class="fa fa-lg fa-rotate-90 fa-fast-forward" title="Toggle set to lowest priority"></i>
+            </th>
         [% END %]
         <th>&nbsp;</th>
         <th>&nbsp;</th>
@@ -86,17 +88,20 @@
                     [%- SET prev_priority  = loop.prev.priority -%]
                     [%- SET next_priority  = loop.next.priority -%]
                     <td style="white-space:nowrap;">
-                        <a title="Move hold up" href="request.pl?action=move&amp;where=up&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                            <img src="[% interface | html %]/[% theme | html %]/img/go-up.png" alt="Go up" />
+                        <a class="hold-arrow" title="Move hold up" href="request.pl?action=move&amp;where=up&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                            <i class="fa fa-lg icon-move-hold-up" aria-hidden="true"></i>
                         </a>
-                        <a title="Move hold to top" href="request.pl?action=move&amp;where=top&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                            <img src="[% interface | html %]/[% theme | html %]/img/go-top.png" alt="Go top" />
+
+                        <a class="hold-arrow" title="Move hold to top" href="request.pl?action=move&amp;where=top&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                            <i class="fa fa-lg icon-move-hold-top" aria-hidden="true"></i>
                         </a>
-                        <a title="Move hold to bottom" href="request.pl?action=move&amp;where=bottom&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                            <img src="[% interface | html %]/[% theme | html %]/img/go-bottom.png" alt="Go bottom" />
+
+                        <a class="hold-arrow" title="Move hold to bottom" href="request.pl?action=move&amp;where=bottom&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                            <i class="fa fa-lg icon-move-hold-bottom" aria-hidden="true"></i>
                         </a>
-                        <a title="Move hold down" href="request.pl?action=move&amp;where=down&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                            <img src="[% interface | html %]/[% theme | html %]/img/go-down.png" alt="Go down" />
+
+                        <a class="hold-arrow" title="Move hold down" href="request.pl?action=move&amp;where=down&amp;first_priority=[% first_priority | html %]&amp;last_priority=[% last_priority | html %]&amp;prev_priority=[% prev_priority | html %]&amp;next_priority=[% next_priority | html %]&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                            <i class="fa fa-lg icon-move-hold-down" aria-hidden="true"></i>
                         </a>
                     </td>
         [%- ELSE -%]
@@ -185,12 +190,13 @@
             [%- IF ( CAN_user_reserveforothers_modify_holds_priority ) -%]
             [%- UNLESS hold.found -%]
                     <td>
-                        <a title="Toggle lowest priority" href="request.pl?action=setLowestPriority&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                            [%- IF ( hold.lowestPriority ) -%]
-                                <img src="[% interface | html %]/[% theme | html %]/img/go-bottom.png" alt="Unset lowest priority" />
-                            [%- ELSE -%]
-                                <img src="[% interface | html %]/[% theme | html %]/img/go-down.png" alt="Set to lowest priority" />
-                            [%- END -%]
+                            [% IF ( hold.lowestPriority ) %]
+                                <a class="hold-arrow" title="Remove lowest priority" href="request.pl?action=setLowestPriority&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                                    <i class="fa fa-lg fa-rotate-90 icon-unset-lowest" aria-hidden="true"></i>
+                            [% ELSE %]
+                                <a class="hold-arrow" title="Set lowest priority" href="request.pl?action=setLowestPriority&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                                    <i class="fa fa-lg fa-rotate-90 icon-set-lowest" aria-hidden="true"></i>
+                            [% END %]
                         </a>
                     </td>
         [%- ELSE -%]
@@ -198,8 +204,8 @@
         [%- END -%]
             [%- END -%]
             <td>
-                <a class="btn btn-default btn-xs cancel-hold" data-borrowernumber="[% hold.borrowernumber | html %]" data-biblionumber="[% hold.biblionumber | html %]" data-id="[% hold.reserve_id | html %]" href="request.pl?action=cancel&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
-                    <i class="fa fa-trash" aria-hidden="true"></i> Cancel
+                <a class="cancel-hold" title="Cancel hold" data-borrowernumber="[% hold.borrowernumber | html %]" data-biblionumber="[% hold.biblionumber | html %]" data-id="[% hold.reserve_id | html %]" href="request.pl?action=cancel&amp;borrowernumber=[% hold.borrowernumber | html %]&amp;biblionumber=[% hold.biblionumber | html %]&amp;reserve_id=[% hold.reserve_id | html %]&amp;date=[% hold.date | html %]">
+                    <i class="fa fa-trash" aria-label="Cancel hold"></i>
                 </a>
             </td>
             <td>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
index 59f215ebd2..d2cd2cbbe2 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
@@ -24,7 +24,71 @@
     <title>Confirm holds &rsaquo; Holds &rsaquo; Circulation &rsaquo; Koha</title>
 [% END %]
 [% INCLUDE 'doc-head-close.inc' %]
-[% Asset.css("css/holds.css") | $raw %]
+[% FILTER collapse %]
+    <style>
+        a.hold-arrow {
+            display:inline-block;
+            padding:3px;
+        }
+        a.hold-arrow:link,
+        a.hold-arrow:visited {
+            color: #538200;
+        }
+
+        a.hold-arrow:hover,
+        a.hold-arrow:active{
+            color: #75b700;
+        }
+
+        .hold-arrow:hover i,
+        .hold-arrow:active i {
+            border-color: #75b700;
+        }
+
+        a.cancel-hold {
+            display:inline-block;
+            padding:3px;
+        }
+
+        a.cancel-hold:link,
+        a.cancel-hold:visited{
+            color:#c00;
+            font-size:130%
+        }
+
+        .icon-move-hold-up::before {
+            content: "\f062";
+        }
+
+        .icon-move-hold-top {
+            border-top: 3px solid #538200;
+        }
+
+        .icon-move-hold-top::before {
+            content: "\f062";
+        }
+
+        .icon-move-hold-bottom {
+            border-bottom: 3px solid #538200;
+        }
+
+        .icon-move-hold-bottom::before {
+            content: "\f063";
+        }
+
+        .icon-move-hold-down::before {
+            content: "\f063";
+        }
+
+        .icon-unset-lowest::before {
+            content: "\f050";
+        }
+
+        .icon-set-lowest::before {
+            content: "\f04e";
+        }
+    </style>
+[% END %]
 </head>
 
 <body id="circ_request" class="catalog">
-- 
2.30.2