Draggable resizing of window panes

RESOLVED FIXED

Status

Webmaker
Thimble
RESOLVED FIXED
5 years ago
2 years ago

People

(Reporter: Jacob, Assigned: xdchen)

Tracking

Details

(Reporter)

Description

5 years ago
It would be wonderful to be able to use your mouse to drag and resize the window panes that separate the code pane from the preview pane

This will be especially useful as we add the 3rd tutorial pane.
(Assignee)

Comment 1

5 years ago
Sounds good, I would like to make a try. May I have some more detailed information for the approach? Thank you.

Comment 2

5 years ago
I had written a javascript bookmarklet that did this in three steps rather than dynamically, but you can probably start with that code and then build it out:

javascript:(function($) { var previewOnly = false, sourcePane = $.querySelector(".source-code"), previewPane = $.querySelector(".preview-holder"), header = $.querySelector(".project-info"), button = $.createElement("button"); button.setAttribute("class","wm-button wm-button-blue short enabled"); button.innerHTML = "view preview"; button.onclick = function() { previewOnly = !previewOnly; var left = previewOnly? 0 : 50, right = previewOnly? 100 : 50; button.innerHTML = (previewOnly ? "view source" : "view preview"); sourcePane.style.width = left + "%"; previewPane.style.width = right + "%"; }; header.parentNode.insertBefore(button, header); }(document))

the idea is to make sure that you sync up the sizes of the ".friendlycode-pages .source-code" and the ".friendlycode-panes .preview-holder". For this ticket rather than static steps we'll need an active region that shows an east/west CSS cursor to give the "this can be resized" signal; we could make one of the two panes do that, but adding a third "panel" between source-code and preview-holder with a 3~5px width that can act as the click-drag area - the editor-panes.js file in friendlycode (thimble/public/friendlycode/js/fc/ui/editor-panes.js) creates the sourceCode and previewArea html bits (unfortunately not from template), we could add a thing in between that acts as draggable separator.

Updated

5 years ago
Assignee: pomax → dchen.xd

Updated

4 years ago
Status: NEW → ASSIGNED
This feature is implemented in the new version of Thimble found here: https://thimble.mozilla.org
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.