Feat: Live Preview toggles to full screen mode on expand button click - #3132
Open
devvaannsh wants to merge 6 commits into
Open
Feat: Live Preview toggles to full screen mode on expand button click#3132devvaannsh wants to merge 6 commits into
devvaannsh wants to merge 6 commits into
Conversation
Full screen means the editor is collapsed and the sidebar is hidden, so live preview owns everything to the right of the central control bar. Modelled as a superset of design mode rather than a third independent mode: isInDesignMode() stays true while full screen is active. That way every existing design mode check keeps its meaning and needs no change, including the auto exit hooks in find in files, the tools drawer and quick open, and the responsive sizing in phoenix-pro. Adds isInLPFullScreen() / setLPFullScreen(), the matching change event, the toggle command id and the strings. The control bar owns the actual state and is the only thing that should call setLPFullScreen().
Full screen is derived state, not a mode of its own. Live preview is full screen exactly when the editor is collapsed and the sidebar is away, so it also turns on when you enter design mode and then collapse the sidebar by hand, which previously left the expand icon out of sync with what was on screen. Exiting undoes only what entering did. Entering from the code editor turns design mode on and hides the sidebar, so exiting restores both. Entering from design mode only hides the sidebar, so exiting brings the sidebar back and stays in design mode instead of jumping to the editor. The sidebar toggle keeps working as it always did. Showing the sidebar from full screen drops you into design mode on its own, so it needed no special casing. Two other bits: - Resizer persists visible:false when the sidebar hides, but full screen is not a persisted mode, so quitting from it would reopen the app with no sidebar and no clue why. The stored flag is put back after hiding. - The sidebar drag handle is hidden in full screen. It sits invisible over the left edge of the preview and would otherwise steal clicks.
The expand icon in the live preview toolbar was just a second copy of the design mode toggle, which is not what the icon says it does. It now expands live preview to full screen, and design mode stays its own thing on the control bar. Renamed the button to fullScreenLivePreviewButton since the old id said design mode, and pointed its icon and tooltip at the full screen change event instead of the design mode one. The mode dropdown chevron keeps hiding in design mode as before, now driven directly by the design mode event.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Before: The expand icon in the live preview toolbar was switching to design mode (they both used the same command internally), which isn't what the icon suggests.
After: Now clicking on the expand icon in the LP toolbar makes the live preview full screen by hiding the sidebar as well, Exiting restores whatever was there before (sidebar & bottom panel etc, whatever was before on the screen before switching to full screen mode.)
Visual Reference
Screen.Recording.2026-08-24.at.12.46.07.AM.mov