Page MenuHomePhabricator

Edit cards: re-think positioning of mobile contexts
Closed, ResolvedPublic

Description

Currently we position all mobile contexts at the top of the screen to avoid them being hidden by the virtual keyboard on iOS:

image.png (370×434 px, 24 KB)

This has a couple of problems:

  1. There is limited space to show information, so we only show the most basic information (target for a link, title for citations).
  2. The page jumps down when the context is show, which can be frustrating if you are trying to adjust your selection.

However most inspectors are for focusable nodes, where the virtual keyboard is not shown [1]:

image.png (363×447 px, 28 KB)

It may make sense to design contexts around this more common case, and use the fact that we can attach contexts to the bottom of the screen if the keyboard is not shown, such designs were proposed in T93325:

citation panel.png (1×750 px, 154 KB)

It was also proposed at that time that link inspectors would trigger this same behaviour and hide the keyboard, showing an inspector that has an "edit label" button, however I think this would be frustrating for the user as they are probably as likely (or more likely) to want to edit the link label.

Note 1:
Contexts shown with the keyboard present:

  • Link
  • LanguageAnnotation (v. rare)

Contexts shown without the keyboard:

  • References
  • Templates
  • Images
  • Galleries
  • Other extesnsion (Math, Maps, etc.)
  • Comments

Event Timeline

Here's how this would look with our current toolbar and desktop context styling:

image (1).png (769×434 px, 100 KB)
image (2).png (753×434 px, 123 KB)

The big question left to answer is what to show when the cursor is initially placed in a link, as we don't want to hide the keyboard immediately.

CC @iamjessklein

iamjessklein renamed this task from Re-think positioning of mobile contexts to EPIC: Re-think positioning of mobile contexts.Apr 8 2019, 1:42 PM
iamjessklein added a project: Epic.
iamjessklein renamed this task from EPIC: Re-think positioning of mobile contexts to Re-think positioning of mobile contexts.Apr 8 2019, 1:53 PM
iamjessklein removed a project: Epic.
ppelberg renamed this task from Re-think positioning of mobile contexts to Edit cards: re-think positioning of mobile contexts.Apr 17 2019, 9:49 PM

The questions in this ticket will be resolved as a result of the prototype @iamjessklein is creating.

@Esanders are you satisfied with how the issues raised in this ticket have been represented in T220385? I ask in the context of wondering whether it's appropriate to close this ticket in an effort to collect the conversation around the context items in one place...

Change 510229 had a related patch set uploaded (by Esanders; owner: Esanders):
[VisualEditor/VisualEditor@master] WIP Move mobile context to bottom of page

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

Change 510230 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] WIP Move mobile context to bottom of page

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

ppelberg claimed this task.
matmarex removed ppelberg as the assignee of this task.
matmarex subscribed.

(still has patches for review, I assume this was accidentally closed)

Change 510229 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Move mobile context to bottom of page

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

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

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

Change 517137 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (44556e8fd)

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

Change 510230 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Move mobile context to bottom of page

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

You can now use the config variable $wgVisualEditorEnableNewMobileContext = true; to enable the new version of mobile contexts.

Some representative examples:

Old contextsNew contexts
Link
DB944253-DBD2-4C0D-BF62-1EA21B8CB0DF.png (1×640 px, 116 KB)
A139888E-380E-459A-849B-F2AD64DA4DDD.png (1×640 px, 311 KB)
Image
6F0AA0A2-F5F4-4553-9C15-E6FD698CEC8C.png (1×640 px, 251 KB)
413E4A3F-BE83-4DBB-95DF-E44014635847.png (1×640 px, 304 KB)

I'm assuming further work is happening somewhere else (I'm a bit lost in this forest of tasks).

ppelberg claimed this task.