How best to develop this frontend customization / plugin?

Dev
1

I’d like to experiment with a customization to change the UX for subscribing to topics.

I’d love some pointers on how I might approach this. I’m pretty sure it’s doable as a front-end only customization. I’m unclear as to whether to tackle it as a theme or a plugin and what best practices may be for testing and maintenance.

Also, feel free to comment on the idea itself (whether you love it, hate it or shrug it).

The goal is to have a UX closer to Github’s simple Subscribe / Unsubscribe interaction:

gh-subscribe
gh-unsubscribe

In order to achieve something similar, I’d like to:

  1. Make the main button action a toggle and move the drop-down to an adjacent … button.
  2. Change the button text to describe the action the user is taking, rather than reflect the current state. (The current state is still described in the text next to the button).

The main button would have the following default state transitions:

Start Watching

When you are in Normal mode, the call-to-action is to Watch the topic:

d-start-watching
d-start-watching1360×90 7.94 KB

Stop Watching

When you are in Watching mode, the call-to-action is to Stop Watching the topic, which will set it back to Normal:

d-stop-watching
d-stop-watching1360×92 7.83 KB

Stop Tracking

When you are in Tracking mode, the call-to-action is to Stop Tracking the topic, which will set it back to Normal:

d-stop-tracking
d-stop-tracking1360×88 7.94 KB

Unmute

When you have in Muted a topic, the call-to-action is to Unmute the topic, which will set it back to Normal:

d-unmute
d-unmute1360×92 5.44 KB

Select Notification Level

To select a different notification level, click the …, which will display all the other options not currently selected. For instance, if you’re currently tracking the topic:

d-select
d-select1352×442 50.8 KB

(I’m also considering replacing the combo reply/notification button under the progress bar with this control… and perhaps something similar for the category subscription).

1 Like
2

A theme component can work here (just need to make sure core has all the extension points)

It looks like we are missing one outlet though… we have after-topic-footer-buttons, we would need a before-topic-notifications-button. You can achieve it now by patching the component, but that is not the right way of doing things.

Hold off for some advice from @eviltrout here, we can probably add the extra plugin-outlet in core.

Changing the text of the button should be doable in CSS so all you need really is to add the extra button with the extra logic.

6 Likes
3

You probably want to talk to @joffreyjaffeux who is currently working on dropdowns :slight_smile:

Having said that I will almost never say no to a new outlet if required.

6 Likes
4

Cool, @joffreyjaffeux I’m definitely interested to hear your insights on how best to approach this or your feedback on the design.