Page MenuHomePhabricator

Re-evaluate mobile editing for images
Closed, ResolvedPublic

Description

We have disabled image editing on mobile VE to make it lightweight in 2013. We since then introduced Gallery editing, which has much more than the media editing feature but still we have it on mobile VE. Could we consider now re-enabling media editing on mobile?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 27 2018, 10:12 PM
Tchanders edited projects, added VisualEditor (Current work); removed VisualEditor.
Tchanders moved this task from Incoming to In progress on the VisualEditor (Current work) board.

Change 460926 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[mediawiki/extensions/VisualEditor@master] WIP Improve the media dialog appearance on mobile visual editor

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

Tchanders added a comment.EditedSep 17 2018, 6:25 PM

I think this looks fine with a few fixes, so I think it should be re-enabled.

Before (general settings tab on mobile):

Fixes:

  • Use tab layout (OOUI index layout)
  • Shorten tab labels (might be applicable to non-English labels too?)
  • Remove unnecessary icons (see T118710)
  • Make dialog smaller
  • Disable upload tab

After:

General settingsAdvanced settingsImage searchImage descriptionImage upload
Mobile
N/A
Desktop

Change 462490 had a related patch set uploaded (by Tchanders; owner: Tchanders):
[VisualEditor/VisualEditor@master] Make media size widget alignment configurable

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

Change 462490 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Make media size widget alignment configurable

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

Change 460926 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Enable the media dialog on mobile visual editor

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

Change 463274 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (4888f7664)

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

Change 463274 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (4888f7664)

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

Ryasmeen added a comment.EditedOct 2 2018, 1:09 AM

Ok several suggestions :) I know some of these issues are not specific to this dialog, but has been like this for all other dialogs on mobile, maybe we need to fix these issues for those places as well. But for now I am just listing these here since this is the most recent work, but let me know if I should file separate tasks for these improvements.

  1. The toolbar inside the caption field breaks out pretty badly on a narrow screen.

Also happening for: Gallery Caption field in Galley>Options tab.

  1. In all other dialogs the "Apply Changes" button appears as a progressive button (blue) upon opening the dialog, except in Media and Table it appears greyed out. Can we make it consistent?
  1. Right now the "Change Image" button has no styling/border therefore it doesn't really look like a button at all. Comparing it with Gallery dialog on mobile where I think it's using ButtonWidget (frameless, progressive)‎ for "Add new image", we can maybe use ButtonWidget (normal)‎ for this one?

Also applicable for: "Use an existing reference" button in Basic reference dialog, "Show options" button for Template dialog.

  1. The alignment inside Advanced tab doesn't look right on desktop browsers, huge whitespace on the right. The alignment for Graph>General or Gallery>Options looks much better I think.

Media>Advanced:


Graph>General:

Gallery>Options:

  1. The toolbar for caption field does not look like an inout field, it does not have any border. On top of that the toolbar itself has border missing. Maybe we can improve this?

Also applicable for: Gallery Caption field in Galley>Options tab, Basic reference dialog.

Tchanders added a comment.EditedOct 2 2018, 6:06 PM

Thanks for the feedback, it's really helpful to have this all written out. I'd been thinking a couple of these things too - especially (2) and (5).

  1. The toolbar inside the caption field breaks out pretty badly on a narrow screen.

Filed as T205999

  1. In all other dialogs the "Apply Changes" button appears as a progressive button (blue) upon opening the dialog, except in Media and Table it appears greyed out. Can we make it consistent?

Yes, I've been having a look into this - filed as T206000

  1. Right now the "Change Image" button has no styling/border therefore it doesn't really look like a button at all.

I did find this button a bit difficult to locate, but quite a few of the other dialogs also do this (see the big table of screenshots on T202575). This will be reviewed in T206463

  1. The alignment inside Advanced tab doesn't look right on desktop browsers, huge whitespace on the right.

Good point! These layouts are going to be reviewed in T206463

  1. The toolbar for caption field does not look like an input field, it does not have any border. On top of that the toolbar itself has border missing.

I agree - I've been finding this confusing too. Filed as T206002

Tchanders added a comment.EditedOct 3 2018, 3:22 PM

Thinking more about point (4), that layout looks pretty crowded on a mobile screen:

We could carefully redesign it to look good in both (this is what we did with the graph dialog).

Or we could think harder about making some of these components more responsive, in particular:

  • Making a responsive alignment option in for field layouts
  • Making vertical option for button select widgets

Update: these questions (and related questions) are going to be explored in T206463 (thanks @iamjessklein)

Considering that the high level issues around the OOUI mobile patterns will be dealt with in T206463 and that the current fixes address basic usability concerns, I'd say this is ready to ship from my perspective.

matmarex removed a project: Editing QA.
matmarex added a subscriber: matmarex.

Based on comments from @Ryasmeen and @iamjessklein I am assuming this passed QA and design review and is good enough, with tasks filed for some of the recognized issues.

marcella closed this task as Resolved.Dec 14 2018, 4:20 PM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptDec 14 2018, 4:20 PM