Page MenuHomePhabricator

Draggable resize preview and editor container
Open, In Progress, Needs TriagePublic3 Estimated Story PointsFeature

Description

Feature requested:

When I edit my syntax and content side by side, I want to have the option to resize the output, so I focus on the wikitext by sliding the middle divider sideways.

Functionality/software changes

  • functionality goes into Wikieditor extension of 2010 text editor
  • make the division between editor and preview draggable
  • add intuitive UI that shows things can be dragged here

User interface changes

Screenshots/mockups:

Screenshot 2021-10-15 at 12.29.18.png (1×1 px, 870 KB)

Figma Board

Does this need QA?

Sure

Event Timeline

The handlebar/draggable slider for split-panes is similar to the one used here: https://vuejsexamples.com/a-vue-js-simple-and-touch-ready-panes-splitter-resizer/
Ideally, both panes should have minimum heights and width (depending on vertical or horizontal stacking – T293337) but also on resizing (which is already the case for the editing pane on Wikitext Editor).

Open question (which is maybe for a future iteration): Should it "remember" the division point?

ldelench_wmf set the point value for this task to 3.Wed, Nov 24, 12:49 PM
ldelench_wmf moved this task from To Be Estimated/Discussed to Estimated on the Community-Tech board.

Change 739770 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Add two-pane layout for realtime preview

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

Samwilson changed the task status from Open to In Progress.Sat, Nov 27, 12:52 AM