From dd2b67a8296be069a0480a1974ff2e3830c25aad 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.

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
---
 .../prog/en/includes/holds_table.inc          | 39 +++++++++++--------
 .../prog/en/modules/reserve/request.tt        | 37 +++++++++++++++++-
 2 files changed, 58 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 be1f6458ca..db5419872a 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>
@@ -85,17 +87,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 fa-arrow-up" aria-label="Move hold up"></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 fa-arrow-up top" aria-label="Move hold to top"></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 fa-arrow-down bottom" aria-label="Move hold to bottom"></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 fa-arrow-down" aria-label="Move hold down"></i>
                         </a>
                     </td>
         [%- ELSE -%]
@@ -181,12 +186,12 @@
             [%- 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 -%]
+                        <a class="hold-arrow" 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 ) %]
+                                <i class="fa fa-lg fa-rotate-90 fa-forward" aria-label="Move hold down"></i>
+                            [% ELSE %]
+                                <i class="fa fa-lg fa-rotate-90 fa-fast-forward" aria-label="Move hold to bottom"></i>
+                            [% END %]
                         </a>
                     </td>
         [%- ELSE -%]
@@ -194,8 +199,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 442c4895eb..de39838bce 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
@@ -19,7 +19,42 @@
     <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 i.top {
+            border-top: 3px solid #538200;
+        }
+
+        .hold-arrow i.bottom {
+            border-bottom: 3px solid #538200;
+        }
+
+        a.cancel-hold {
+            display:inline-block;
+            padding:3px;
+        }
+
+        a.cancel-hold:link,
+        a.cancel-hold:visited{
+            color:#c00;
+            font-size:130%
+        }
+    </style>
+[% END %]
 </head>
 
 <body id="circ_request" class="catalog">
-- 
2.20.1