INTERACTION/VISUALS: delete saved filters

[bdellasc]

VCs:

• Review current implementation of deleting saved filters with @dlabrecq & @lwrigh
• Propose approach(es) based on that review
• Post proposed design(s)

[bdellasc]

Created a few small animation ideas for the filter delete interaction:

• initiating, with confirmation message
• confirming, with removal of filter from list
• canceling, then returning user to original drop-down list

Dev will research feasibility of these concepts, and we'll iterate if necessary

[dlabrecq]

I had difficulty with the animation to transition the deleted menu option upward. I'm able to slide-in the "Delete filter" confirmation from the side, but transitioning the menu item itself is a problem. Both the confirmation and menu item must be transitioned upward to achieve the desired result.

Note that there are actually two pieces here; a menu item and the confirmation that overlays it. Not only does the confirmation need to transition upward, but the menu item underneath has slide out of view, too.

I found that the menu items ('li' tags) must be positioned relatively in order to display the Bootstrap dropdown properly. However, in order to transition the menu item upward, they would need to be positioned absolutely -- the menu item cannot be both.

The Bootstrap CSS selector (dropdown-menu) also expects menu items ('li' tags) to contain an anchor ('a' tag) with no other tags between them. Otherwise, it may have been possible to wrap the menu item with another absolutely positioned tag -- to help generate such a transition?

[bdellasc]

@dlabrecq has a demo here

1. Click "Save" tab at the top of the page
2. Click "Load Saved Filters" button - this pre-loads saved filters (for demo purposes)
3. Click on the "Birth Month" drop-down, select "My Filters"
4. Click on "Select from custom filters" drop-down
5. Hover on either "Test 1" or "Test 2" to reveal the delete icon
6. Click the "Delete" icon
7. Click the check mark, the item is deleted
8. Hover on the remaining "Test 1" or "Test 2" to reveal the delete icon
9. Click the "Delete" icon
10. Click the X, the delete is canceled

[bdellasc]

@catrobson Sent Samir an e-mail with a link to the demo of the delete functionality.