Page MenuHomePhabricator

Add an image: adapt existing UI for desktop
Closed, DeclinedPublic

Description

Here's what the current mobile UI looks like on desktop.

Image inspector:

Screen Shot 2021-10-28 at 11.50.40 AM.png (2×2 px, 1 MB)

Caption:

Screen Shot 2021-10-28 at 11.50.44 AM.png (2×2 px, 1 MB)

Event Timeline

@MMiller_WMF @RHo FYI here is the task for us to make changes for desktop. I've included some screenshots of the existing UIs as a starting point.

I'm not sure what we can do with the placement of the image inspector in the limited time we have before we want to switch this on.

Some ideas, ordered from least effort to most:

Limit the width, center, and added some border around the inspector:

image.png (1×2 px, 458 KB)

Other ideas would be to place the inspector in a fixed position at the top, like the Find/Replace dialog in VE:

image.png (1×2 px, 621 KB)

or in a column at the right of the document; I think there is some built in support in VE, but we'd have to rethink the layout of the inspector contents so that's probably the least ideal.

Another idea is to use a dialog to Add Link and anchor it somewhere (article title?), but the image inspector is taller than the image inspector and it can't be moved so this might not be ideal either since there's currently no way to collapse it on desktop.

Screen Shot 2021-10-28 at 12.27.33 PM.png (1×1 px, 547 KB)

Another idea is to use a dialog to Add Link and anchor it somewhere (article title?), but the image inspector is taller than the image inspector and it can't be moved so this might not be ideal either since there's currently no way to collapse it on desktop.

Screen Shot 2021-10-28 at 12.27.33 PM.png (1×1 px, 547 KB)

I like this idea best so far, followed by @kostajh's one of limiting the width and pinning to the bottom of the screen. One thing I would change about this would be to anchor it under the article title but RHS aligned to be closer to where it would appear when placed, and also to enable reading the first sentence or two of the article.
And could we add the way to collapse on desktop to be similar to how it works on mobile?

Hi @RHo — to clarify re: collapsing mechanism for desktop, should we use the existing mechanism today (collapse into robot icon) or the updated one per T293147: Structured Tasks: Change how the inspector is collapsed on mobile? Or another mechanism altogether (I just realized that we haven't decided on Add Link's T281185: Add a link: [Desktop] Enable link inspector to be collapsed?

Hi @RHo — to clarify re: collapsing mechanism for desktop, should we use the existing mechanism today (collapse into robot icon) or the updated one per T293147: Structured Tasks: Change how the inspector is collapsed on mobile? Or another mechanism altogether (I just realized that we haven't decided on Add Link's T281185: Add a link: [Desktop] Enable link inspector to be collapsed?

Hi @mewoph – for desktop, I would ideally still like to proceed with proposal A and/or B on T281185: Add a link: [Desktop] Enable link inspector to be collapsed for both Add Link and Add image. Do you think either proposal (A = enable moving inspector, B = closing inspector with robot button to reopen) is feasible for Iteration 1?

Incidentally, when I went to review the prod behaviour on Desktop and noticed what appears to be a bug (regression?) where the link tag can be deselected but the inspector is still shown, and the tag cannot be re-selected again unless some action is taken to advance to the next suggestion (by tapping Yes/No/Next):

Hi @RHo, for iteration 1, I think Proposal B should be fairly straightforward since we already have the same logic for mobile.

I filed a separate task for the Add Link issue T294947: Add a link: selected annotation view can be deselected

Hi @RHo, for iteration 1, I think Proposal B should be fairly straightforward since we already have the same logic for mobile.

Thanks, that's good to know - will update the task to reflect B as preferred (and still more consistent with this revised mobile interaction)

I filed a separate task for the Add Link issue T294947: Add a link: selected annotation view can be deselected

Great, thanks!

Updated the parent task since desktop will not be shown to users for the first iteration

Now that we have desktop designs and are making the Phab tasks under T296700: [EPIC] "Add an image" Iteration 1: desktop, I am declining this task.