Bug 23903 - Replace OPAC icons with Font Awesome
Summary: Replace OPAC icons with Font Awesome
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on:
Blocks: 23913
  Show dependency treegraph
 
Reported: 2019-10-25 18:36 UTC by Owen Leonard
Modified: 2021-06-14 21:28 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
This patchset updates the majority of icons in the opac to use Font Awesome icons. It improves the consistency of icons, icon alignment and also gives a minor performance boost in opac display.
Version(s) released in:
19.11.00


Attachments
Bug 23903: fix selenium tests (2.00 KB, patch)
2019-11-04 11:02 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2019-10-25 18:36:44 UTC
We can eliminate use of the sprite image for icons and use Font Awesome instead. This will be simpler and more customization-friendly.
Comment 1 Owen Leonard 2019-10-25 18:55:02 UTC
I still need to write up a proper test plan and commit message, but if anyone is interested in looking: https://gitlab.com/koha-dev/koha-dev/commits/ip-opac-fa-icons
Comment 2 Owen Leonard 2019-10-28 13:43:53 UTC
The remote branch has been updated with more fixes and a complete test plan. I've also posted patches for download (they're too large to attach here):

https://zivotdesign.com/download/bug-23903-1.patch
https://zivotdesign.com/download/bug-23903-2.patch

Test plan:

Bug 23903: Replace OPAC icons with Font Awesome

This patch replaces CSS-based background image icons with Font Awesome
icons. This will eliminate the use of sprite.png altogether.

To test, apply the patch and regenerate the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

Because JavaScript events are often triggered by class, the changes made
in this patch require testing of JavaScript-driven behavior as well as
visual confirmation of the changes.

Enable OPAC features to expose them for testing: Login, Holds, Article
requests, Tags, Cart, Search term highlighting.

 - Perform a search in the OPAC
   - In the header at the top of the search results, check the
     'Unhighlight/Highlight' link.
   - Select some search results and verify that the multi-item controls
     are enabled: Add to cart/Lists; Place hold; Tag. Check that these
     controls work correctly.
   - Verify that the following links look correct and work correctly:
     'Place hold,' 'Request article,' 'Log in to add tags,' 'Add to
     cart.'
   - Log in to the OPAC and return to the search results page. Check the
     'Add tag' and 'Save to lists' links.

 - View the lists page
   - Test the 'Edit' and 'Delete' controls.
   - View the contents of a list. Test the following:
      - Controls at the top of the table of results ('New list,'
        'Download list,' 'Send list,' 'Print list,' 'Edit list,' and
        'Delete list').
      - Multi-selection operations: 'Place hold,' 'Tag,' and 'Remove
        from list.'
      - Controls for each item on the list: 'Place hold,' 'Add tag,'
        'Save to another list,' 'Remove from this list,' and 'Add to
        cart.'

   - View the bibliographic detail page for any search result
     - In the right-hand sidebar menu, verify that these controls look
       correct and work correctly: 'Place hold,' 'Print,' 'Request
       article,' 'Save to your lists,' 'Add to your cart,'
      'Unhighlight,' 'Send to device,' 'Save record,' and 'More
      searches.'
     - Test the shelf browser by clicking 'Browse shelf' under the call
       number for any of the holdings.
       - Test the 'Next' and 'Previous' controls.
     - Check the tabs for switching between 'Normal,' 'MARC,' and 'ISBD'
       views and verify that they look correct on each of those pages.

 - Add some items to the Cart and open the Cart
   - Test the cart controls at the top: 'More details/Brief display,'
     'Send,' 'Download,' 'Empty and close,' 'Hide window,' 'Print.'
   - Test the multiple-selection controls: 'Remove,' 'Add to list,'
     'Place hold,' and 'Tag.'

 - Log in to the OPAC as a user who has items checked out which can be
   renewed. On the 'Your summary' page, on the 'Checked out' tab, test
   the 'Renew selected' and 'Renew all' links.
Comment 3 Liz Rea 2019-10-30 22:02:12 UTC
I went through your plan, all of the icons were looking so lovely and modern. 

All the yes to this patch, didn't spot anything amiss.

You may have my sign off!
Comment 4 Martin Renvoize 2019-10-31 15:43:01 UTC
This is a great change.. passing QA and pushing.
Comment 5 Martin Renvoize 2019-10-31 15:43:27 UTC
Nice work!

Pushed to master for 19.11.00
Comment 6 Jonathan Druart 2019-11-04 11:02:01 UTC
Created attachment 94998 [details] [review]
Bug 23903: fix selenium tests