Evaluate mobile dialog transitions
Closed, ResolvedPublic
Actions

Description

OOUI dialog transitions fade in and grow from the centre of the screen, specifically:

opacity: 0% >>> 100%
scale: 50% >>> 100%

In VE mobile we used an additional transition for full screen dialogs to have them slide in from above:

translateY: -100% >>> 0%

(they also fade in and grow while doing so as above)

We should consider if we want a different transition for full screen dialogs on mobile (or smaller alert dialogs on mobile) and upstream this code to OOUI. Or decide that we want to use the same transition everywhere and delete the VE code.

Transition inventory

Full-screen, single-page dialogs

Contexts:
- Links,
- Images
- Templates
- Citations
- Galleries, etc.
Actions:
- "Done"/"Apply"
- "Close"/"Back"/"Cancel"

Full-screen, single-page dialogs that can take contributors in/out of edit mode

Contexts:
- Save
Actions:
- "Publish" (publishes changes + exits edit mode)
- "Close"/"Back"/"Cancel"

Full-screen, multi-page dialogs

Contexts:
- Citoid
Actions:
- "Generate"
- "Insert"

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		DLynch	T224277 Evaluate mobile dialog transitions
		Open		DLynch	T229503 Revise edit flow transitions in mobile VE

Event Timeline

Esanders created this task.May 24 2019, 10:33 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 24 2019, 10:33 AM

Esanders added subscribers: matmarex, Volker_E, iamjessklein.May 24 2019, 10:33 AM

In material design, full screen dialogs grow from the tap point (might be quite fiddly to do that in CSS) and when closed, slide down:
https://material.io/design/components/dialogs.html#full-screen-dialog

Smaller dialogs behave like ours, except they grow from 80% and simply fade out when closed (no scaling):
https://material-components.github.io/material-components-web-catalog/#/component/dialog

ppelberg added a subscriber: ppelberg.May 24 2019, 1:47 PM

matmarex removed a subscriber: matmarex.May 27 2019, 5:39 PM

marcella added a project: Editing Design.Jun 18 2019, 3:47 PM

marcella moved this task from To Triage to External and Administrivia on the VisualEditor board.

marcella added a parent task: T221247: [Epic] Mobile context items.

JTannerWMF added a project: VisualEditor-Edit Cards .Jul 14 2019, 3:24 PM

Notes: 2 July meeting w/ @Esanders

Having different transitions between different dialogs adds non-trivial complexity
There is no distinction in the code between search dialogs and save dialogs

ppelberg edited parent tasks, added: T211255: [EPIC] Mobile VE toolbar improvements; removed: T221247: [Epic] Mobile context items.Jul 25 2019, 10:21 PM

ppelberg mentioned this in T229030: Design refreshed toolbar v2.Jul 25 2019, 10:38 PM

ppelberg edited projects, added VisualEditor (Current work); removed VisualEditor.Jul 31 2019, 7:33 PM

ppelberg moved this task from Incoming to Investigating on the VisualEditor (Current work) board.

ppelberg moved this task from Investigating to Incoming on the VisualEditor (Current work) board.

An update after yesterday's conversation with @DLynch, @Esanders and @matmarex and today's chat with @iamjessklein...

Discussed

While all mobile VE full-screen dialogs are technically the same, they appear in contexts that are different enough (i.e. Save dialog vs. link inspector) that the transitions associated with them may need to be treated differently.

Open

Create an inventory of all full-screen, mobile VE dialogs and the transitions associated with the actions contributors could take from/within them. See the beginnings of this in the "Transition inventory" in this task's description.

Proposed path forward: T229503
Absent of an immediate and clear direction for how transitions should be handled in the full range of contexts listed in the task description (see "Transition inventory"), I think we should start by making the following changes to the core "edit flow":

When a contributor takes the action [1] that "opens" the Save dialog, treat the transition how it is currently treated in the mobile wikitext editor [2]. See this demo: https://youtu.be/3jaQ_To3RxM
When a contributor takes the action [3] to go "back" from the save dialog, treat the transition how it is currently treated in the mobile wikitext editor [2]. See this demo: https://youtu.be/3jaQ_To3RxM (same as above)

The action: I'm being intentionally generic here considering the "action" to advance is going to change from "Publish" to ">" once v1 of the toolbar is deployed. See: T225634
Current mobile wikitext transition: I think we said there currently is "no transition," but I wasn't sure so I stopped short of specifying "no transition."
The action: Again, I'm being intentionally generic here considering this "action" to go back is going to change from "X" to "<" once v1 of the toolbar is deployed. See: T225634