Design/UX #3346
closed
Notification page option ordering
Added by Matt Gold over 10 years ago.
Updated over 9 years ago.
Category name:
BuddyPress (misc)
Description
Just looking at my notification settings and I noticed that they are not laid out consistently. The first Yes/No options have Yes on the left and No on the right. But then, when you get to Group Notifications, the Yes option (All Email) is on the right and the No option (No email) is on the left. I realize they are not exactly the same, but the similarity (and the use of "no" in "no email") is similar enough that I think we should fix this. Please see the attached screenshot
I would suggest changing the order of the Yes/No options so that Yes appears on the right and No appears on the left.
Assigning to Chris for a UX opinion. Chris, after you've weighed in, please assign to Boone.
Files
I would suggest changing the order of the Yes/No options so that Yes appears on the right and No appears on the left.
My two cents: yes, switching the Yes/No options would be more logical here and ease user error.
- Assignee changed from Chris Stein to Boone Gorges
Thanks, Samantha. This is pretty minor, so I am assigning to Boone for implementation. Chris, if you have options, please speak up, but if you are busy, we will just move forward with this.
- Target version set to 1.8
This is going to take a pretty fair amount of work - it's likely I'll have to write some javascript to reorder them on the fly.
- Assignee changed from Boone Gorges to Daniel Jones
This is going to take a pretty fair amount of work - it's likely I'll have to write some javascript to reorder them on the fly.
What I meant is that it's going to be a pretty fair amount of work for Daniel :) Dan, would you mind seeing what you can do about writing the necessary javascript to do this? It probably won't be too tough.
Sure I'm happy to work on this! Doesn't seem like it ought to be too difficult. I'm using javascript so that I don't mess with the BuddyPress core code, right?
Let me know what you think of what I came up with here: https://github.com/cuny-academic-commons/cac/commit/107c256b38893bd074fc6c17348ee65b7d30954f
I tried to take advantage of the fact that both the cells in the headers and the cells with the radio buttons have the class "yes", and the fact that in jQuery (and I think vanilla javascript, too) the append() function, when called with an existing element as the argument, actually just moves the element to the end of the new parent, to try and keep it as simple as possible.
I'm not sure I put the function to enqueue the javascript, or the js file itself, in the right place though.
Oh, clever. The JS looks good.
Let's move this to wp-content/themes/bp-nelo/_inc/js/cac-custom-js.js - this is where most of our miscellaneous JS stuff lives. (It's ugly in there, but it'll help us avoid another HTTP request.) Because this will run on every page, and it's likely that there are pages with elements using the 'yes' class, could we make the selector more specific? Maybe get the ID of the notification table - not sure off the top of my head what it is - and then use '#notification-settings-table .yes' or whatever as the selector.
Okay great I made some changes based on this: put the code in the file you suggested, and added the 'notification-settings' class to the jQuery selector. Turns out it's actually a bunch of different tables that make up the page, but they all share that class. I also added in an if() statement so that we don't try to run .each() on an empty array. Let me know if you think this is good to go.
Here are the changes on Github: https://github.com/cuny-academic-commons/cac/commit/dab1aac609c743f83f2120bc8daa772bd0ea7d04
- Status changed from Assigned to Resolved
Also available in: Atom
PDF
