Page MenuHomePhabricator

Review Edit Cards v2.0 implementation for desktop
Closed, ResolvedPublic

Assigned To
Authored By
Jun 20 2019, 9:50 PM
Referenced Files
F29677329: desktopview@2x.png
Jul 3 2019, 1:44 AM
F29676265: desktop.png
Jul 2 2019, 3:32 PM
F29675826: unnamed-1.png
Jul 2 2019, 2:15 PM
F29675830: unnamed.png
Jul 2 2019, 2:15 PM
"Love" token, awarded by Trizek-WMF.


Task overview

This tasks involves the work with deciding how the Edit Cards v2.0 designs – T225725 – should be reflected in desktop VE. What – if anything – about how Edit Cards are being designed for mobile should be changed on desktop?


Mobile and desktop VE codebases are nearly the same. There are maintenance and testing costs associated with these codebases diverging.

As a result, we should assume all changes on mobile will be reflected on desktop and vice versa unless we see a reason for this not to happen.


  • Engineering knows what – if anything – about how context items are treated on mobile need to be changed on desktop

Event Timeline

Just chatted with @Esanders about this and we think the best way to approach this is to mock up a desktop view of the card (rather than picking out bit by bit).

@Esanders I started to take a stab at this work and I actually think that it would be easiest to discuss areas where it is impacting the desktop experience during implementation.

Capturing a google chat conversation that @Esanders and I am having regarding desktop implementation of the cards.

This is what the design currently looks like:

unnamed-1.png (208×434 px, 16 KB)

This is what the design would look like with the styles applied:

unnamed.png (287×417 px, 13 KB)

From our convo:

I don't think the X is required on desktop

I think the extra vertical space from the large remove link button isn't necessarily an improvement

On desktop the context covers up other parts of the document, and may trigger a scroll if it is too low down, so I think keeping in compact vertically is a good idea

On mobile we gave ourselves roughly the height of the virtual keyboard to play with, and we're concerned about having large buttons for touch. Those things are unique to mobile I think.

For a more accurate view of the current design applied to desktop:

desktop.png (694×418 px, 59 KB)

Here's my latest mockup.

desktopview@2x.png (612×754 px, 75 KB)

In this iteration:

  • got rid of title bar
  • got rid of cancel button
  • applied updated design styles

cc/@Esanders @ppelberg

I'm removing the design tag on this as we have finalized this in terms of what we will ship for V2.

JTannerWMF moved this task from To Triage to Needs Discussion/Analysis on the VisualEditor board.
JTannerWMF subscribed.

@Esanders please coordinate with @iamjessklein and @ppelberg on the status of this

During Triage, we discussed this task representing the divergence between desktop and mobile but we have now we are shifting focus to Talk Pages so for that reason this task is deprioritized.

matmarex subscribed.

I think we should just close this. Deprioritizing this is basically deciding to change nothing about desktop. In my book, this fulfills the requirements:


  • Engineering knows what – if anything – about how context items are treated on mobile need to be changed on desktop