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/
Created attachment 51630 [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.
Created attachment 51657 [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>
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>
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).
Pushed to Master - Should be in the November 2016 Release. Thanks
Pushed in 16.05. Will be in 16.05.01.