Page MenuHomePhabricator

Allow vertical and horizontal editing mode
Open, Needs TriagePublicFeature

Description

Feature requested:

When I edit on a horizontal screen, I want to view my output next to my syntax, so I can easily check for typos and formatting.

Functionality/software changes

  • functionality goes into Wikieditor extension of 2010 text editor
  • add/adjust preview buttons and add event handlers to show or hide page preview or ineditor preview
  • add breakpoints for vertical screen split editor

User interface changes

Screenshots/mockups:

Ineditor Preview Inactive:

Screenshot 2021-10-15 at 12.58.28.png (882×1 px, 239 KB)

Ineditor Preview Active:
Screenshot 2021-10-15 at 13.04.31.png (830×992 px, 359 KB)

Page Preview Active:
RTpreview-legacy-vertical-toggled.png (2×2 px, 1 MB)

Breakpoints (to be confirmed):
1000pt = vertical for both legacy and new vector
In new vector, the preview pane max size is 960pt as it's the size at which the readers will see the content (as shown in mocks in the Figma board below)

Figma Board

Does this need QA?

Yes

Event Timeline

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).