Page MenuHomePhabricator

Make button placement for Captions consistent with Depicts/statements
Closed, ResolvedPublic


User story: As a Commons editor, I want consistency in button placement, so that I can think about more important things than where each button is located depending on what I'm editing..

We have this:
Currently with Depicts statements on File Page in Edit mode, both the Edit and Publish changes/Cancel buttons are in the top right corner. For Captions, only the Edit button is in the top right corner, and Publish changes/Cancel is in the lower right. Because this pattern works better on mobile (T221658) we want to update it here, too.

We want this:
For Depicts Edit/Publish/Cancel buttons to be consistent with how Captions are -- with the Publish button at the bottom. With testing, we can start with that and see how common it is for people to add enough values where having to scroll back up to save is an annoyance.

Acceptance Criteria:

  • The Depicts Edit/Publish/Cancel buttons are in the lower right corner to match Captions.

Event Timeline

In order to make this change, the JS code which controls this UI element in the Captions panel will need to be split up – the "Add a Caption" button and the "Cancel/Publish" button should be separate widgets that are placed in different locations.

Happy to work on this once the patch for CSS refactoring gets merged, since this should directly build on that.

Ha78na added a subscriber: Ha78na.

^ simply blocked till CSS refactor merges

I think that this issue can be addressed as part of T221658 and T221228. The fact that the Captions panel separates the label (top of panel) from the cancel/publish controls (bottom of panel) means the layout functions better on small screens. On the Statement Panel, the panel label and the controls widget both exist in the top region of the panel, and on small screens they collide.

Handling the Statement panel the same as the Captions panel will make it easier to adapt the UI for smaller screen sizes. However, this is the opposite of what was originally suggested here (make both panels more like Statements).

Chiming in to agree with Eric that this will be addressed in T221658 for the reasons stated :)

Hey @PDrouin-WMF, how does this look – it's mostly what we talked about with some small adjustments:

Screen Shot 2019-04-30 at 11.54.59 AM.png (624×1 px, 86 KB)

Screen Shot 2019-04-30 at 11.55.30 AM.png (862×1 px, 118 KB)

Screen Shot 2019-04-30 at 11.55.17 AM.png (470×1 px, 55 KB)

Screen Shot 2019-04-30 at 11.54.47 AM.png (368×1 px, 39 KB)

Change 507401 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Make Edit/Cancel buttons consistent between panels

Button placement looks good, @egardner -- though the Q number being on the left-hand side is throwing me! How'd it get to be like that?

Do you mean the P# for depicts, or the Q# for the individual statements? I moved the depicts number over with its label in attempt to consolidate things and save space. They could also be stacked on top of one another, which I think was what you originally had in your mock-up.

Acceptance criteria need to be changed for this I think

@PDrouin-WMF ... so, is this ok? If it is can you change the acceptance criteria and I'll merge it

@Cparle thanks for catching this, I updated the acceptance criteria. had to hunt for the other relevant ticket (T221658) that changed this one.

Change 507401 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Make Edit/Cancel buttons consistent between panels

Placement on prod matches included screenshots (put with the P number in the right spot, right aligned)