gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 29057: 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>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2021-09-20 15:22:33 +00:00 committed by Tomas Cohen Arazi
parent 0810d7d343
commit 8a5779758a
No known key found for this signature in database
GPG Key ID: 0A272EA1B2F3C15F
2 changed files with 88 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
koha-tmpl/intranet-tmpl/prog/en/includes/holds_table.inc
View File

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

66
koha-tmpl/intranet-tmpl/prog/en/modules/reserve/request.tt
View File

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