Design/UX #4395
closedOption to cancel New Message
0%
Description
See attached mockup -- cancel link added next to Send Message (matches styling of the cancel link on the New Doc page). Clicking Cancel should take the user back to Inbox.
Files
Related issues
Updated by Boone Gorges over 9 years ago
- Category name changed from User Experience to Messages
- Status changed from New to Assigned
- Assignee changed from Boone Gorges to Daniel Jones
- Target version set to 1.9
Updated by Daniel Jones over 9 years ago
I had to add a new template to the bp-nelo theme, let me know if this works! The styling isn't 100% the same, in terms of font size and margins - let me know if you think I should fix that. It'll mean some kind of messy CSS, but should work fine.
https://github.com/cuny-academic-commons/cac/commit/bccb5cb39f2c53a89da8f7fb427ec8acc3091739
Updated by Boone Gorges over 9 years ago
- Status changed from Assigned to Reporter Feedback
Looks good to me - thanks, Dan!
My only question is whether this button (and Cancel buttons in general) should require some sort of "Are you sure?" alert. It's right next to "Send Message", and a misclick could cause one to lose lots of content. Sam, do you have thoughts about this?
The changes are available for testing on cdev.
Updated by Samantha Raddatz about 9 years ago
Looks great, thank you Dan! Don't worry about the styling -- it currently matches the other text on the page, which is good.
I agree that we should add error-prevention pop-ups for cancel clicks. Do we already have one that we use elsewhere in the site? I feel like I've encountered it, but I can't recall where.
Updated by Daniel Jones about 9 years ago
I don't know if I've encountered one before, but should I just go ahead and make one for this, and we can replace it if we find one somewhere else later?
Updated by Boone Gorges about 9 years ago
WP and BP have a general tool called "confirm", which you should be able to invoke just by adding the 'confirm' class to any link. https://github.com/cuny-academic-commons/cac/blob/1.8.x/wp-content/plugins/buddypress/bp-core/js/confirm.js That's probably good enough for our purposes; anything more complex would have to be custom-built.
Updated by Daniel Jones about 9 years ago
Okay added the "confirm" class here: https://github.com/cuny-academic-commons/cac/commit/80fd24622647adce0c8f89852edd8b7a024e7935
The one issue I see with this is that the language could be a little confusing: a user clicks "cancel" and is then presented with a pop-up with the choices "ok" and "cancel", but to actually cancel they don't click "cancel" again but "ok" instead. I'm sure people are used to dealing with that kind've thing but still might be worth thinking about if there's anyway to make it a little clearer.
Updated by Boone Gorges about 9 years ago
Good call, Dan. I agree that the OK/Cancel language is pretty lousy here.
Could you look at building something custom? jQuery UI Dialog ships with WordPress, so you should be able to leverage it. Message should probably be something like "Message content will be discarded. Click 'OK' to continue canceling, or 'Back' to go back to editing". (Sam, do you have a better idea for button names?) Since we offer, or may like to offer, Cancel buttons elsewhere, it's worth coming up with a UI that can be used across the interface.
Another thought: there's no need to confirm cancelation if nothing has been entered into the message field.
Updated by Boone Gorges about 9 years ago
Thanks, Dan! Sam, this is ready for a whirl on cdev.
Updated by Daniel Jones about 9 years ago
jQuery UI Dialog was surprisingly difficult to work with on this case, but came around eventually. For now this will only really work for the cancel link on messages, but it won't be hard to adapt to future uses. Might just have to think some about making the confirmation text more generic, or giving us a way to customize it, maybe with a data attribute. Will also have to update the check that makes sure there's some content in the message before confirming, or just get rid of it down the line. I did make it a little more generic by changing "Message content..." to just "Content...".
https://github.com/cuny-academic-commons/cac/commit/aedf11982ea076977b5d1ad6bc2f9cf579dd7595
Updated by Samantha Raddatz about 9 years ago
The cancel pop-up is great, thanks, Dan!
Full disclosure that I have a long-term plan to review and coordinate all of the button stylings and placements, so you may have to touch this code again when that day comes, but this is awesome for now.
Something wonky seems to be happening with the auto-complete and error-pop up for the send-to filed (added in ticket #4212). Even when I choose a valid user from the dropdown list it displays the error messages. Screenshot attached.
Updated by Boone Gorges about 9 years ago
Looks good to me too - thanks, Dan!
Sam, I think that the weirdness you're seeing is due to the fact that I was inadvertently trying to validate blank usernames. I think it's fixed in https://github.com/cuny-academic-commons/cac/commit/d934eb532a39fe3a1cdffba127793680203f1a5a. Can you test on cdev before we close out this ticket?
Updated by Samantha Raddatz about 9 years ago
Sam, I think that the weirdness you're seeing is due to the fact that I was inadvertently trying to validate blank usernames. I think it's fixed in https://github.com/cuny-academic-commons/cac/commit/d934eb532a39fe3a1cdffba127793680203f1a5a. Can you test on cdev before we close out this ticket?
Tested and it looks to be fixed. Thanks, Boone.
Updated by Raymond Hoh over 2 years ago
- Related to Bug #16306: Confusing messaging on send message page added