Project

General

Profile

Actions

Design/UX #3346

closed

Notification page option ordering

Added by Matt Gold over 9 years ago. Updated about 9 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Daniel Jones
Category name:
BuddyPress (misc)
Target version:
Start date:
2014-07-24
Due date:
% Done:

0%

Estimated time:
Deployment actions:

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

Actions #2

Updated by Samantha Raddatz over 9 years ago

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.

Actions #3

Updated by Matt Gold over 9 years ago

  • 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.

Actions #4

Updated by Boone Gorges over 9 years ago

  • 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.

Actions #5

Updated by Boone Gorges about 9 years ago

  • 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.

Actions #6

Updated by Daniel Jones about 9 years ago

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?

Actions #7

Updated by Daniel Jones about 9 years ago

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.

Actions #8

Updated by Boone Gorges about 9 years ago

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.

Actions #9

Updated by Daniel Jones about 9 years ago

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

Actions #10

Updated by Boone Gorges about 9 years ago

  • Status changed from Assigned to Resolved

Looks good. Thanks!

Actions

Also available in: Atom PDF