| KSiebert | |
| Oct 14 2021, 11:49 AM |
| F35057285: Screen Shot 2022-04-18 at 6.37.06 PM.png | |
| Apr 18 2022, 11:19 PM |
| F35057284: Screen Shot 2022-04-18 at 6.37.24 PM.png | |
| Apr 18 2022, 11:19 PM |
| F35057241: Screen Shot 2022-04-14 at 6.57.01 PM.png | |
| Apr 18 2022, 10:33 PM |
| F35057237: Screen Shot 2022-04-18 at 11.58.47 AM.png | |
| Apr 18 2022, 10:33 PM |
| F34714613: handlebars_ui.png | |
| Oct 28 2021, 10:20 PM |
| F34689790: Screenshot 2021-10-15 at 12.29.18.png | |
| Oct 15 2021, 10:29 AM |
| F34688433: Screenshot 2021-10-14 at 13.48.38.png | |
| Oct 14 2021, 11:49 AM |
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.
Sure
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?
Change 739770 had a related patch set uploaded (by Samwilson; author: Samwilson):
[mediawiki/extensions/WikiEditor@master] Add two-pane layout for realtime preview
We still need to confirm the behaviour of the multiple different vertical resizing systems: at the moment, the core text area has one (via CSS resize), MediaWiki-extensions-CodeMirror has one (via jQuery UI resizable), and we're introducing a third. Do we want to have a vertical-resize bar always present, even before realtime preview is open? This would make it simpler and reduce the number of different UI elements, and (my favourite reason) it means we can get rid of one more small bit of jQuery UI (from CodeMirror).
The different modes can be seen in this patchdemo: https://patchdemo.wmflabs.org/wikis/4823a5ec09/w/index.php?title=Main_Page&action=edit
Change 763176 had a related patch set uploaded (by Samwilson; author: Samwilson):
[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature
In the design meeting a few hours ago we decided that the bottom up-down resize bar should always be visible, even when the preview pane isn't open. It should also be a "one sided" bar, with the drag affordance floating over the grey of the form background. There are some issues with this with some gadgets that add white elements there, but we'll deal with them as needed.
This means that we can get rid of the corner resize triangles (both for CodeMirror and native textarea). It would be possible to do this separately to the preview work, but we'll keep it all bundled to make it easier to roll out and test.
The drag handles should be lighter in colour, and get darker on hover (when the cursor changes too). Details of this and other colour/size matters will be sorted out later (but won't be large changes in behaviour).
Details of the width-limiting for the preview pan (e.g. for Vector22 which has a max width) will be figured out later.
I think I've forgotten a couple of things… @nayoub you've probably got more to add. But I think as far as the bulk of this ticket goes, I've got enough to be going on with. :-)
Change 739770 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Add toggle button and two-pane layout for realtime preview
Test wiki created on Patch demo by MusikAnimal using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b7048675d3/w/
Test wiki on Patch demo by MusikAnimal using patch(es) linked to this task was deleted:
Test wiki created on Patch demo by DMaza (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/c9159bac23/w/
Test wiki created on Patch demo by DMaza (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d7c687e377/w/
Done and merged. There might be some follow-ups with regard to min/max sizes of the panes, but pretty much it's all ready for QA. It's not yet on Beta Cluster, but will be soon; for now, test on Patchdemo.
Change 763176 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature
Test wiki on Patch demo by DMaza (WMF) using patch(es) linked to this task was deleted:
Test wiki on Patch demo by DMaza (WMF) using patch(es) linked to this task was deleted:
Change 957252 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/WikiEditor@master] Fix unrelated elements flickering during realtime preview
Change 957252 merged by jenkins-bot:
[mediawiki/extensions/WikiEditor@master] Fix unrelated elements flickering during realtime preview
