From bfc6b0680e0b66ef6ff199dbc2a3749822df2f64 Mon Sep 17 00:00:00 2001 From: Pluto Date: Thu, 17 Sep 2026 16:14:56 +0530 Subject: [PATCH] fix: make the live preview expand button toggle design mode again --- .../Phoenix-live-preview/live-preview.css | 4 +-- .../Phoenix-live-preview/main.js | 33 ++++++++++--------- .../Phoenix-live-preview/panel.html | 2 +- test/spec/CentralControlBar-integ-test.js | 7 ++-- 4 files changed, 24 insertions(+), 22 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index cfc18c4e57..40fcf5e973 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -370,13 +370,13 @@ } #reloadLivePreviewButton, -#fullScreenLivePreviewButton { +#designModeToggleLivePreviewButton { border: 1px solid transparent; border-radius: 3px; } #live-preview-plugin-toolbar #reloadLivePreviewButton:hover, -#live-preview-plugin-toolbar #fullScreenLivePreviewButton:hover { +#live-preview-plugin-toolbar #designModeToggleLivePreviewButton:hover { border-color: rgba(255, 255, 255, 0.1) !important; background: transparent !important; box-shadow: none !important; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index 2697c75793..3b4b4bcb1d 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -194,7 +194,7 @@ define(function (require, exports, module) { $modeBtn, $modeBtnGroup, $previewBtn, - $fullScreenBtn; + $designModeBtn; let customLivePreviewBannerShown = false; @@ -866,7 +866,7 @@ define(function (require, exports, module) { livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC, clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE, clickToToggleEdit: Strings.LIVE_PREVIEW_MODE_TOGGLE_EDIT, - fullScreenLivePreview: Strings.LIVE_PREVIEW_FULL_SCREEN, + switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE, livePreviewSettings: Strings.LIVE_DEV_SETTINGS, livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES, clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT, @@ -899,7 +899,7 @@ define(function (require, exports, module) { $modeBtn = $panel.find("#livePreviewModeBtn"); $modeBtnGroup = $panel.find("#lpModeBtnGroup"); $previewBtn = $panel.find("#previewModeLivePreviewButton"); - $fullScreenBtn = $panel.find("#fullScreenLivePreviewButton"); + $designModeBtn = $panel.find("#designModeToggleLivePreviewButton"); // Markdown theme toggle — persist user choice MarkdownSync.setThemeToggleHandler((theme) => { @@ -982,25 +982,26 @@ define(function (require, exports, module) { Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click"); }); - function _updateFullScreenButton() { - const on = WorkspaceManager.isInLPFullScreen && WorkspaceManager.isInLPFullScreen(); - $fullScreenBtn.find("i") + // Mirrors the control bar's design mode toggle so the user can switch without leaving the preview. + function _updateDesignModeButton() { + const on = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode(); + $designModeBtn.find("i") .removeClass("fa-expand fa-compress") .addClass(on ? "fa-compress" : "fa-expand"); - $fullScreenBtn.attr("title", - on ? Strings.LIVE_PREVIEW_EXIT_FULL_SCREEN : Strings.LIVE_PREVIEW_FULL_SCREEN); + $designModeBtn.attr("title", + on ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE); + if ($modeBtn) { + $modeBtn.toggle(!on && !_isMdviewrActive); + } } - $fullScreenBtn.click(()=>{ - CommandManager.execute(Commands.VIEW_TOGGLE_LP_FULL_SCREEN); - Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "fullScreenBtn", "click"); + $designModeBtn.click(()=>{ + CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE); + Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "designModeBtn", "click"); }); WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview"); WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview", - _updateLPControlsForMdviewer); - WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview"); - WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview", - _updateFullScreenButton); - _updateFullScreenButton(); + _updateDesignModeButton); + _updateDesignModeButton(); // init the status overlay _initOverlay(); diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html index 1a24d179a8..0a32900fd1 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html +++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html @@ -4,7 +4,7 @@ - diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js index d298ef38d9..abc89e1db0 100644 --- a/test/spec/CentralControlBar-integ-test.js +++ b/test/spec/CentralControlBar-integ-test.js @@ -1492,15 +1492,16 @@ define(function (require, exports, module) { expect(SidebarView.isVisible()).toBe(true); }); - it("should dispatch VIEW_TOGGLE_LP_FULL_SCREEN from the live preview expand button", + it("should dispatch VIEW_TOGGLE_DESIGN_MODE from the live preview expand button", async function () { await openLivePreview(); const executed = recordCommands(function () { - _$("#fullScreenLivePreviewButton").trigger("click"); + _$("#designModeToggleLivePreviewButton").trigger("click"); }); - expect(executed).toContain(Commands.VIEW_TOGGLE_LP_FULL_SCREEN); + expect(executed).toContain(Commands.VIEW_TOGGLE_DESIGN_MODE); + expect(executed).not.toContain(Commands.VIEW_TOGGLE_LP_FULL_SCREEN); }); }); });