Improve "Confirm Delete" window when deleting items
Summary
=======
Improve the user experience when deleting resources via a table or row action.
Current "Confirm Delete" alert message shows important information in a single paragraph
By using a more appropriate styling, e.g. coloring, spacing, etc. We could bring a better and well-informed experience when deleting resources.
Motivation
========
When the user wants to delete a resource via a table or row action, an alert message is shown with poorly stylized text. This text lists all the items the user wants to delete in a single paragraph. making a difficult experience to read it. We could bring a better UX by displaying these items using an unordered list or other HTML elements for listing.
It's also important to note that such actions (deletion) are "permanent", there are no undos or go back, and we must make it very clear by highlighting the current message stating those consequences. By using appropriate styles we could make sure that the user is aware of the repercussions when "Accepting" the dialog.
Description
=========
After the user has selected 1 or more items to delete, a redesigned "Confirm WIndow" will detail:
- An accurate number of items to be deleted, e.g. Confirm delete 11 Projects.
- List these items using HTML entities for lists, like <ul>
- Highlight the effects of confirming such action, e.g. "This action cannot be undone" with more
appropiate styling depicting the action to be performed.
UX
===
Create a consistent and helpful interface for all "Confirmation delete" alert messages.
Implementing these changes may require modifications to:
- SCSS files
- HTML Templates
- Django/AngularJS code
Wireframes, Mocks, Videos and UI Markup
-------
Images/Mockups:
Current UI: http://
Proposed UI: http://
Testing
======
The new "Confirm window" should appear when deleting 1 or more resources, either using a table action or row action.
Outside Dependencies
==================
May depend on new translations if new msgids are inserted.
Requirements Update Required
=======
N/A
Doc Impact
=========
N/A
Blueprint information
- Status:
- Complete
- Approver:
- None
- Priority:
- Undefined
- Drafter:
- Eddie Ramirez
- Direction:
- Needs approval
- Assignee:
- None
- Definition:
- Obsolete
- Series goal:
- None
- Implementation:
-
Unknown
- Milestone target:
- None
- Started by
- Completed by
- Cindy Lu
Related branches
Related bugs
Sprints
Whiteboard
***** 10.28.2016 [clu_] We has been addressed this on the Angular side. Closing this out.
[david-lyle | 2016-05-11] I only have one minor concern. The items to be deleted listed on separate rows could number as many as there are on the page. This could be 50-100 or more depending on the setting. That will cause the list to be quite long and require scrolling to hit the "Confirm" button.
[ediardo | 2016-05-11]
I can think of three ways to circumvent that situation:
1. Set a %limit% of items: do not display more than 20 (default items per page value)
a) If there more than %limit% then hide and provide a toggle button.
2. Display items in tables: this could save us from putting more logic into the code, but
I'm not quite sure if the final result is satisfying (need to try)
3. Use proposed UI only when deleting 1 item and hide all (similar as proposed in #1) when items > 1
If we go with any of the first two options, scrolling may be difficult to avoid when deleting several items... especially when using low-resolution displays.
