Page MenuHomePhabricator

Allow users to add and remove fields from the menu
Closed, ResolvedPublic5 Estimated Story Points

Description

This task is broken up from T192854: Develop two panel UI for TemplateWizard.

Goals of this task:

  1. Letting users to click on items in the menu (left panel) to make them appear/disappear from the right panel.
  2. Toggling the icon +/- next to the menu item when it's clicked.
  3. Letting the user add or delete all of the suggested+optional fields at once using the "Add/Remove all fields" button.
  4. Toggling the button (Add/Remove) when it's clicked.

Couple of mocks for reference:

image.png (656ร—944 px, 94 KB)
image.png (654ร—936 px, 102 KB)

(I know 1 and 2 of this are halfway done as part of Sam's patch for T192854 but I added it here for good measure if we end up rewriting that with a new dialog or such.)

Event Timeline

Niharika set the point value for this task to 5.May 15 2018, 11:30 PM

The plus/minus icon for the menu button is blue when it's a plus, but black instead of red when it's a minus. Do you want this to be a red trash icon, or leave it as a black minus icon and wait for ooui upstream to add a red minus? I think the latter.

It's hard to judge what widget and which proposed improvement this is about, I'd appreciate screenshots (before/proposal) in the task description, also for later reference.

It's hard to judge what widget and which proposed improvement this is about, I'd appreciate screenshots (before/proposal) in the task description, also for later reference.

@Volker_E I added the mocks in question to the description. AIUI, currently a red minus icon is not supported and we'd like to have that as required by the mock.

@Samwilson I agree. Let's leave it as a black minus icon for now.

Thanks @Niharika. Yeah, I think one of the issues with the current layout with red and blue signified + and - is, that although those are interaction elements, they're at position of list bullets and suddenly integrate a completely different interaction.
I haven't really got the point of those elements so far: Are they only meant to show hide the specific template on the dialog content side?

Thanks @Niharika. Yeah, I think one of the issues with the current layout with red and blue signified + and - is, that although those are interaction elements, they're at position of list bullets and suddenly integrate a completely different interaction.
I haven't really got the point of those elements so far: Are they only meant to show hide the specific template on the dialog content side?

Yes. They are for adding and removing fields that show up in the content side.

@Niharika But the items themselves on the side are always visible?

@Niharika But the items themselves on the side are always visible?

Yep, the fields on the left are always visible. This list can be very very long (250+ fields) sometimes so we need to let users pick and choose which ones they want to add. That's why we need to let them add and remove fields from the content side of the dialog.

An idea for @cmadeo to double check would be

  • to leave left-side of label empty and
  • add something (please take this as first idea) like an visibility indicator right-aligned

T194436-TemplateWizard.png (654ร—936 px, 79 KB)

Thanks for your thoughts, @Volker_E! That's an interesting idea. Although maybe a blank indicator does not immediately tell the user what would happen if they click on it unlike the +). Maybe we can think about adding checkmarks or something to indicate that better. Carolyn is on vacation for a few days, so we can talk about this when she gets back.

I think we can go with what we have currently for now (with black minus icons instead of the red ones).

Change 443040 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/TemplateWizard@master] Add button to add or remove all parameter fields

https://gerrit.wikimedia.org/r/443040

โ€ข Vvjjkkii renamed this task from Allow users to add and remove fields from the menu to b6caaaaaaa.Jul 1 2018, 1:10 AM
โ€ข Vvjjkkii removed Samwilson as the assignee of this task.
โ€ข Vvjjkkii triaged this task as High priority.
โ€ข Vvjjkkii updated the task description. (Show Details)
โ€ข Vvjjkkii removed the point value for this task.
โ€ข Vvjjkkii removed subscribers: gerritbot, Aklapper.
Samwilson renamed this task from b6caaaaaaa to Allow users to add and remove fields from the menu.Jul 1 2018, 10:31 PM
Samwilson claimed this task.
Samwilson updated the task description. (Show Details)
Samwilson set the point value for this task to 3.
CommunityTechBot raised the priority of this task from High to Needs Triage.Jul 5 2018, 6:40 PM
CommunityTechBot changed the point value for this task from 3 to 5.
CommunityTechBot updated the task description. (Show Details)

When the add/remove all button is clicked, fields are added in order from top to bottom, and so the focus ends up with the bottom one. Does this make sense? In my testing, it feels like it should maybe focus on the top-most field that has no value.

@Samwilson moving the focus to the top most empty field makes sense to me, otherwise the focused field could be below the fold for templates that have a large number of fields.

The focus will never be below the fold, because it'll scroll down to wherever the focus is (or maybe I'm misunderstanding the phrase) but yep, I'll fix it up to go to the topmost one. :-)

Focus on the top empty field sounds good to me.

I think the current patch is big enough as-is; I'll add the focus-top-field behaviour in a separate patch.

Change 449108 had a related patch set uploaded (by Samwilson; owner: Samwilson):
[mediawiki/extensions/TemplateWizard@master] Focus top empty field when adding all parameters

https://gerrit.wikimedia.org/r/449108

Change 443040 merged by jenkins-bot:
[mediawiki/extensions/TemplateWizard@master] Add button to add or remove all parameter fields

https://gerrit.wikimedia.org/r/443040

Patch: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/TemplateWizard/+/449108

This ticket has a few things in it, but the only bit that needs QA is the adding and removing all parameters (including that the button text changes appropriately when some/all parameters are enabled), checking also that the topmost empty field is focused on add-all.

Change 449108 merged by jenkins-bot:
[mediawiki/extensions/TemplateWizard@master] Focus top empty field when adding all parameters

https://gerrit.wikimedia.org/r/449108

Niharika moved this task from QA to Q1 2018-19 on the Community-Tech-Sprint board.