Page MenuHomePhabricator

Disable Preview editing mode when screen is too crowded
Closed, ResolvedPublic3 Estimated Story PointsFeature

Description

Feature requested:

When I edit on a screen smaller than 600px, I no longer see an option in the toolbar allowing me to preview, in order to prevent a poor user experience

Functionality/software changes

  • Disable preview button in toolbar if screen is smaller than 600px
  • If Preview split view was already open, close the preview window when the toolbar button dissapears

User interface changes

Breakpoints:

600px

Does this need QA?

Yes

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald TranscriptOct 14 2021, 9:22 AM
KSiebert changed the subtype of this task from "Task" to "Feature Request".Oct 14 2021, 10:46 AM
KSiebert updated the task description. (Show Details)

Notes with @nayoub

Editors should be able to resize height-wise screen permitting.

TODO:

@nayoub to add breakpoint details and to mock the styles to fit in with new vector

nayoub updated the task description. (Show Details)
nayoub updated the task description. (Show Details)

I'm not sure if a specific ticket will be cut for this but regarding the animation we discussed @NRodriguez, here's an example of how it could look like (without any fancy animations) in a similar way to codesandbox.io when you click on the "toggle preview button" (browser with a play icon).

JMcLeod_WMF set the point value for this task to 8.Mar 30 2022, 11:37 AM
NRodriguez renamed this task from Allow vertical and horizontal editing mode to Disable Preview editing mode when screen is too crowded.Mar 30 2022, 8:22 PM
NRodriguez updated the task description. (Show Details)
NRodriguez updated the task description. (Show Details)
NRodriguez removed the point value for this task.Apr 5 2022, 2:48 PM
JMcLeod_WMF set the point value for this task to 3.Apr 7 2022, 5:37 PM

@NRodriguez @nayoub should the preview mode disappear if user resizes the screen to a width less than 600px?

@HMonroy yes it should disappear. Let me know if there's anything else I can do to unblock you!

Change 784342 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/extensions/WikiEditor@master] Realtime preview: disable preview when screen is small

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

@NRodriguez @nayoub This should probably go by the width of the editing area, not the whole screen, right? Different skins will add content to either side of the editing area which could then make the editing area very narrow (see the Timeless skin for example), thus going by screen width could be misleading. That said, is 600px still what we want? That seems about right but just asking because in old Vector, 600px screen with is a bit narrow for Realtime Preview:

Screenshot from 2022-04-19 21-31-55.png (672ร—735 px, 172 KB)

Here's 600px for the editing area (the .wikiEditor-ui element, specifically):

Screenshot from 2022-04-19 21-34-40.png (586ร—977 px, 173 KB)

This should probably go by the width of the editing area, not the whole screen, right?

@MusikAnimal correct, the editing area not the whole screen!

@nayoub tested on the editing element being 600px based on editing area so 600px is correct!

@NRodriguez In new Vector, the editing area is ~537px width (on my screen anyway). Does this mean RTP won't be enabled on new Vector? See also T307042.

@NRodriguez In new Vector, the editing area is ~537px width (on my screen anyway). Does this mean RTP won't be enabled on new Vector? See also T307042.

Oh wait, I was looking at the height, not the width. Ignore this. Nothing to see here.

Change 784342 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime preview: disable preview when screen is small

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