Bug 16005 - Standardize use of icons for delete and cancel operations
Summary: Standardize use of icons for delete and cancel operations
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 16456
  Show dependency treegraph
 
Reported: 2016-03-08 15:42 UTC by Owen Leonard
Modified: 2017-12-07 22:16 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 16005 - Standardize use of icons for delete and cancel operations (27.82 KB, patch)
2016-05-19 18:40 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 16005 - Standardize use of icons for delete and cancel operations (27.95 KB, patch)
2016-05-20 14:08 UTC, Marc Véron
Details | Diff | Splinter Review
Bug 16005 - Standardize use of icons for delete and cancel operations (28.02 KB, patch)
2016-05-21 12:38 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 2016-03-08 15:42:23 UTC
Right now we are using a mix of similar icons for operations like delete, cancel, close, etc. We need to set a standard so that it is clear which icon means what.

I propose that the "trash" icon be used anywhere something is being deleted,  removed, or cleared:

<i class="fa fa-trash"></i>

http://fortawesome.github.io/Font-Awesome/icon/trash/

I propose that we use the "times" (for which "remove" is an alias) icon for cancel operations (where buttons are used):

<i class="fa fa-remove"></i>

http://fortawesome.github.io/Font-Awesome/icon/times/

I propose that we use the "times-circle" icon to mean "close:"

<i class="fa fa-times-circle"></i>

http://fortawesome.github.io/Font-Awesome/icon/times-circle/
Comment 1 Owen Leonard 2016-05-19 18:40:27 UTC Comment hidden (obsolete)
Comment 2 Marc Véron 2016-05-20 14:08:25 UTC Comment hidden (obsolete)
Comment 3 Jonathan Druart 2016-05-21 12:38:12 UTC
Created attachment 51686 [details] [review]
Bug 16005 - Standardize use of icons for delete and cancel operations

This patch makes changes to Font Awesome icons in order to make icon
choice consistent for common actions.

<i class="fa fa-trash"></i> where something is deleted, removed, or
emptied.

<i class="fa fa-remove"></i> where an operation is cancelled (also where
selections are cancelled, as in checkboxes).

<i class="fa fa-times-circle"></i> for "close," as in baskets and
windows.

To test, apply the patch and view the following pages to confirm that
the correct icon is used:

- Acquisitions -> Vendor -> Vendor delete button.
- Acquisitions -> Vendor -> Edit -> Delete contact button.
- Acquisitions -> Invoices ->  Delete menu item.
- Cataloging -> Edit record -> Authority search pop-up (triggered from
  the tag editor for a tag linked to an authority) -> Clear field button
- Authorities -> Authority detail -> Delete button.
- Tools -> Quotes editor -> Quotes delete button.
- Reports -> View saved report -> Delete button.
- Reports -> Saved reports -> Delete menu item.
- Serials -> Subscription details -> Subscription close button.
- Administration -> Budgets -> Delete menu item.
- Administration -> Item search fields -> Delete button.
- Administration -> Z39.50/SRU servers -> Delete menu item.
- Catalog -> Advanced search -> Clear fields link.
- Cataloging -> Advanced editor -> Macros -> Delete macro button.
- Circulation -> Checkout -> Check out an item which is on hold for
  another patron. "Cancel checkout and place hold" button now uses the
  icon used elsewhere for holds.
- Course reserves -> Course -> Delete course button.
- Patrons -> Patron lists -> Add patrons -> Remove selected button.
- Acquisitions -> Suggestions -> Suggestion details -> Delete button.
- Lists -> List contents -> Remove selected button.

Followed test plan, works as expected.
Signed-off-by: Marc Véron <veron@veron.ch>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 4 Jonathan Druart 2016-05-21 12:40:41 UTC
I did not test every pages, but the diff looks good.

It would be great to have an entry on the wiki page (https://wiki.koha-community.org/wiki/Interface_patterns) to list the different icons to use (and when to use them).
Comment 5 Brendan Gallagher 2016-06-03 08:22:02 UTC
Pushed to Master - Should be in the November 2016 Release. Thanks
Comment 6 Frédéric Demians 2016-06-15 07:35:33 UTC
Pushed in 16.05. Will be in 16.05.01.