Page MenuHomePhabricator

Evaluate mobile dialog transitions
Closed, ResolvedPublic

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"

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 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

matmarex removed a subscriber: matmarex.May 27 2019, 5:39 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 added subscribers: DLynch, matmarex.EditedJul 31 2019, 9:47 PM

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)

  1. 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
  2. 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."
  3. 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
ppelberg updated the task description. (Show Details)Jul 31 2019, 9:54 PM
ppelberg assigned this task to DLynch.Aug 8 2019, 6:20 PM
JTannerWMF added a subscriber: JTannerWMF.

T229503 represents the work left to do on this task so this can be closed out

ppelberg closed this task as Resolved.Oct 9 2019, 12:51 AM