Page MenuHomePhabricator

Improve gallery dialog for mobile visual editor
Closed, ResolvedPublic


The gallery dialog is difficult to use in mobile because of the space given over to the menu of images on the left:

gallery_dialog_add_image_tab.png (658×366 px, 197 KB)

However, it is important to see those images relatively clearly, so this might require a bit of a redesign.

Event Timeline

Tchanders triaged this task as Medium priority.Sep 4 2018, 3:44 PM
Tchanders created this task.

My main question here is if the current experience is completely impossible to do. If the answer is yes, then I think we should consider temporarily disabling and then addressing the fact that this would most likely require a new pattern specific to smaller screen size.

cc/ @Volker_E

The current experience requires an image carousel and a main edit panel. We might be able to make the image carousel smaller, horizontal and along the top (the OOUI side panel layout "MenuLayout" let's us position it on any side, so this shouldn't be too hard). We'd also need to shrink (to icon only?) and reposition the "add image" button.

Agreed, those are the fixes that I would take a look at. I like the thought of responsive buttons for mobile too.
What is the priority for this task?

cc/ @Deskana @JTannerWMF

Large-scale work on improving this dialogue isn't really in scope now, and its complexity means there's probably not much we can do in the way of small-scale improvements. There was a bit of discussion about removing it from the mobile visual editor for now—is that the approach people feel we should take?

Change 465622 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/VisualEditor@master] WIP Improve the gallery dialog layout for mobile

After talking to @iamjessklein yesterday and in light of @Esanders' comments above, I've put something together along those lines:

Image detailsAdd new imageOptions
image.png (659×708 px, 293 KB)
image.png (664×909 px, 753 KB)
image.png (653×706 px, 48 KB)
image.png (668×382 px, 179 KB)
image.png (672×372 px, 216 KB)
image.png (662×367 px, 41 KB)
Large mobile
image.png (498×375 px, 68 KB)
image.png (512×382 px, 249 KB)
image.png (503×378 px, 21 KB)

I think this could be a good compromise that gets the dialog into a usable state, ready for more time to be spent on it if it's ever prioritised in the future.

These are great fixes @Tchanders
Since our criteria for this fix is "better than broken" I would say that this passes, with a few tweaks:

  • The Apply button goes from button -> link in responsive mode
  • The Remove button seems to be styled incorrectly. I would expect a trash can (cc @Volker_E )
  • The Image preview in the large mobile seems oddly small in height. Is there a way to expand that a bit?

@Tchanders Thanks for the screens, simplifies discussion a lot.
I would not sacrifice the label but I guess, what @iamjessklein is requesting rightfully is an (trash) icon + label combination.
If this functionality is important and should be emphasized, I'd also consider to turn “Add image” in an icon + label button similar to CX 2 treatment of new translation

Additionally I'd pledge for a label top input bottom treatment on mobile. Vertical scrolling is not that big of a deal for users compared to orienting text input in a super-small input area (compare size of action buttons on “Gallery caption” vs actual textarea).

Thanks for the feedback.

The new patch set does the following, in response to suggestions above from @iamjessklein and @Volker_E, and in the code review from @Esanders (with reference to the screenshots below):

  • 'trash' icon on the "Remove image" button [1,3]
  • 'add' icon on the "Add new image" button [3]
  • Reduce the height of the search results in mobile [2]
  • Align the label to the top of the caption input in mobile [4-5]
  • Frameless "Add new image" button on mobile (so it takes up less space) [1,2]
  • Fix some border/margin px/em issues [1-3]
image.png (414×232 px, 57 KB)
image.png (410×233 px, 107 KB)
image.png (649×698 px, 285 KB)
image.png (416×231 px, 22 KB)
image.png (415×317 px, 17 KB)

I think the remaining points are important but need more general discussion:

  • "Apply changes" looks like a link in Minerva, and less like a button --- I think this needs a more general discussion about the Minerva skin; there are many examples of this behaviour.
  • Align the labels above the widgets in mobile layouts --- I agree. This problem affects most of the dialogs and we should find a general solution that works for wide and narrow screens. I've top-aligned the gallery caption target in mobile for this particular example since align left is verging on unusable in this case, but I think we should wait for a general solution rather than tinker with the other widgets.

Change 465622 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Improve the gallery dialog layout for mobile

Ryasmeen added a subscriber: Ryasmeen.

Checked all the design changes. Looks good to me. However, found the following two small issues while doing some exploratory testing on this today.
T210559 and T210555
But this task can be closed.