singup_status_mailer settings UI cleanup

dww - August 17, 2009 - 23:36
Project:Signup Status
Version:6.x-1.x-dev
Component:Signup status mailer
Category:feature request
Priority:normal
Assigned:Unassigned
Status:active
Description

Follow-up from #228159: Custom emails sent upon status change. The current UI for the settings pages is pretty harsh. ;) It's just a pile of fieldsets for each status/action combo on the site. Inside each fieldset, there's a dropdown for if the notifications should happen or not, a text field for the subject, and a textarea for the body. If token is installed, there's a nested fieldset with the possible token replacements inside each fieldset.

Things are even worse on the per-node override. The notification selector now has 3 choices: "Disabled", "Use default (currently 'XXX')", and "Enabled (custom)". If this is set to "Use default", there subject and body fields are disabled with the current site-wide default text filled in as the #default_value and there's a note saying if you want to change these, you either have to select "Enabled (custom)" or change the site-wide defaults (with a link to the site-wide defaults page).

Some ideas:

A) We should probably move the token help to a single fieldset at the bottom of each settings page, instead of embedding a separate copy inside each of the settings fieldsets.

B) We should only include a link to the site-wide defaults if the user has "administer signup status mailer settings" permission.

C) If there's JS, we should hide the subject and body fields if notifications are set to 'Disabled', and reveal them if they're set to 'custom' or 'default' (if the default is to have them enabled).

D) On the per-node settings pages, if a given setting is currently saved as 'use the defaults', and the site-wide templates are included but disabled, if the user selects 'custom', we should enable the form elements and add a note saying something like "You're overriding the site-wide defaults for this [node-type]". Currently, to override, you actually have to save the form as 'custom', and then the page reloads (and you loose the site-wide defaults to start from).

E) I wonder if a pile of fieldsets is the best approach here. Maybe Vertical tabs support would be nice?

#1

dww - August 17, 2009 - 23:37

FYI, here's what the current UI looks like:

AttachmentSize
551862-1.signup_status_mailer_current_ui.png 104.53 KB

#2

dww - August 17, 2009 - 23:58
Status:active» needs review

Here's a patch for A. This seems like an improvement to me. Thoughts?

AttachmentSize
551862A-2.token_help.patch 2.11 KB
551862A-2.token_help.png 61.83 KB

#3

dww - August 18, 2009 - 00:20
Status:needs review» active

Based on an IRC discussion with deviantintegral, we agree (A) is a step forward, so I committed #2 to HEAD. A few other ideas:

F) The labels on these fieldsets don't make it immediately obvious what the difference is between "first set" and "status changes". Those fieldset labels could use some help.

G) We should probably add an intro paragraph with help text describing WTF is going on here. ;)

H) For non-JS users (ouch) we should probably include a list of of anchor links pointing to the start of each fieldset in the intro text. We can wrap these inside a <div class="js-hide"> so that they don't even appear for JS-enabled browsers.

#4

dww - August 18, 2009 - 00:31
Status:active» needs review

Patch for (B): We should only include a link to the site-wide defaults if the user has "administer signup status mailer settings" permission.

Users with 'administer signup status mailer settings' see what you see in the screenshot in #1 above. Otherwise, they get:

This message is configured to use the site-wide default text for this status. To modify the subject or body below, you must select "Enabled (custom)" to override the defaults for this %node_type.

AttachmentSize
551862B-4.admin_only_settings_link.patch 2.13 KB

#5

dww - August 18, 2009 - 00:37

Better help text for (B) based on feedback from deviantintegral.

AttachmentSize
551862B-5.admin_only_settings_link.patch 2.16 KB

#6

dww - August 18, 2009 - 00:41
Status:needs review» active

Committed #5 to HEAD.... Next. ;)

#7

dww - August 19, 2009 - 18:36

Based on more IRC discussions w/ deviantintegral, greggles and ezra-g, I committed a change to HEAD so that all the settings for each status are inside a single per-status fieldset. Then, there are separate form elements (hopefully with clearer labels) for each action (new vs. update) within each status fieldset. How's this look?

AttachmentSize
551862E-7.fieldset_per_status.png 99.86 KB

#8

dww - August 19, 2009 - 21:54

Here's a better screenshot on a node of type "Event" with a more realistic title. Previous screenshots were of a node that used "signup untimed" for both the type and title, which was confusing. ;) This should make things more clear for realistic use-cases.

AttachmentSize
551862E-8.fieldset_per_status.png 98.06 KB

#9

dww - August 20, 2009 - 01:15
Status:active» needs review

Patch and screenshots for H -- anchors that skip down to the fieldset for each status when JS is disabled. Pretty straight-forward. Screenies of what you see with the patch attached with JS disabled and enabled in the browser.

AttachmentSize
551862H-9.no-js-anchors.patch 2.21 KB
551862H-9.no-js-anchors.png 93.36 KB
551862H-9.no-js-anchors-with-js.png 31.63 KB

#10

mlsamuelson - August 20, 2009 - 13:59
Status:needs review» active

The improvements for H look good.

#11

dww - August 20, 2009 - 15:54

Committed #9 to HEAD. H is resolved.

#12

dww - August 22, 2009 - 02:03
Status:active» needs review

Finally figured out the right way to do the jQuery goodness in here so that when a given select element is clicked I operate only on that select element's "own" related fields. This resolves (C) and (D) from the original post. A little hard to demonstrate with just a screenshot -- a little movie would be best. ;) But, the basic story can be found in the doc block for the Drupal.behaviors.signupStatusMailerNotificationSetting jQuery function:

"Disabled" ('none')
Hide the e-mail fields and help text.
"Enabled" on the side-wide settings page ('default')
Show the e-mail fields.
"Enabled (custom)" ('custom')
Show the e-mail fields and enable them, hide the help text.
"Use default (currently 'Enabled')" ('default-enabled')
Show but disable the e-mail fields, and show the help text.
"Use default (currently 'Disabled')" ('default-disabled')
Hide the e-mail fields but show the help text.

Whenever the notification box is set to "Disabled" ('none'), all the e-mail fields and help text is hidden. If it is set to "Enabled" on the side-wide settings page ('default'), show the e-mail fields. When it is set to "Enabled (custom)" ('custom'), the e-mail fields are shown and enabled. When it is set to "Use default (currently 'Enabled')" ('default-enabled'), the e-mail fields are shown but disabled, and the help text is revealed. Finally, if it is set to "Use default (currently 'Disabled')" ('default-disabled'), the e-mail fields are hidden but the help text is shown.

Screenshot shows the initial state on a node-specific settings page that shows all the possible cases there. Basically, whenever any setting moves to any value you see on that page, the form elements beneath it change to look like they do in this screenie. However, for the full effect, I recommend grabbing HEAD of signup_status, applying the patch, and playing with it for yourself.

AttachmentSize
551862CD-12.signup_status_mailer_js.patch 11.75 KB
551862CD-12.signup_status_mailer_js.png 130.31 KB

#13

dww - August 23, 2009 - 16:04
Assigned to:dww» Anonymous
Status:needs review» active

It's not quite perfect yet, but #12 seems like a big improvement, so I committed that to HEAD. Back to active for further enhancements, though those are going to have to wait until mid September when I'm back online.

 
 

Drupal is a registered trademark of Dries Buytaert.