feat: add expand compress button in live preview toolbar

Author: devvaannsh

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -182,6 +182,7 @@
 
 .toolbar-button {
     background-color: transparent;
+    color: inherit;
     width: 28px;
     height: 22px;
 }

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -768,7 +768,8 @@ define(function (require, exports, module) {
             openInSafari: Strings.LIVE_DEV_OPEN_SAFARI,
             openInEdge: Strings.LIVE_DEV_OPEN_EDGE,
             openInFirefox: Strings.LIVE_DEV_OPEN_FIREFOX,
-            clickToPinUnpin: Strings.LIVE_DEV_CLICK_TO_PIN_UNPIN
+            clickToPinUnpin: Strings.LIVE_DEV_CLICK_TO_PIN_UNPIN,
+            designModeExpand: Strings.CCB_SWITCH_TO_DESIGN_MODE
         };
         const PANEL_MIN_SIZE = 50;
         const INITIAL_PANEL_SIZE = document.body.clientWidth/2.5;
@@ -839,6 +840,10 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settingsBtn", "click");
         });
 
+        $panel.find("#lpDesignModeBtn").on("click", function () {
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+        });
+
         const popoutSupported = Phoenix.isNativeApp
             || Phoenix.browser.desktop.isChromeBased || Phoenix.browser.desktop.isFirefox;
         if(!popoutSupported){

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -2,6 +2,9 @@
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
         <div style="width: 20%;display: flex;">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
+            <button id="lpDesignModeBtn" title="{{designModeExpand}}" class="btn-alt-quiet toolbar-button">
+                <i class="fa-solid fa-expand"></i>
+            </button>
 	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-play"></i>
 	        </button>

src/index.html

@@ -913,12 +913,6 @@
         <div class="ccb-group">
             <a href="#" id="searchNav" class="ccb-btn"><i class="fa-regular fa-magnifying-glass"></i></a>
         </div>
-        <div class="ccb-spacer"></div>
-        <div class="ccb-group ccb-group-bottom">
-            <a href="#" id="ccbCollapseEditorBtn" class="ccb-btn" title="Switch to Design Mode">
-                <i class="fa-solid fa-code"></i>
-            </a>
-        </div>
     </div>
 
     <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="30" data-maxsize="80%" data-forceleft=".content">

src/view/CentralControlBar.js

@@ -208,9 +208,18 @@ define(function (require, exports, module) {
         }
         editorCollapsed = wantCollapsed;
         $("body").toggleClass("ccb-editor-collapsed", editorCollapsed);
-        const $collapseBtn = $("#ccbCollapseEditorBtn");
-        $collapseBtn.toggleClass("active", editorCollapsed)
-            .attr("title", editorCollapsed ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
+
+        // Update the live preview toolbar expand/contract button
+        const $lpDesignBtn = $("#lpDesignModeBtn");
+        if ($lpDesignBtn.length) {
+            $lpDesignBtn.find("i").attr("class", editorCollapsed
+                ? "fa-solid fa-compress"
+                : "fa-solid fa-expand");
+            $lpDesignBtn.attr("title", editorCollapsed
+                ? Strings.CCB_SWITCH_TO_CODE_EDITOR
+                : Strings.CCB_SWITCH_TO_DESIGN_MODE);
+        }
+
         if (_toggleDesignModeCommand) {
             _toggleDesignModeCommand.setChecked(editorCollapsed);
         }
@@ -237,10 +246,7 @@ define(function (require, exports, module) {
     }
 
     function _wireButtons() {
-        $("#ccbCollapseEditorBtn").on("click", function (e) {
-            e.preventDefault();
-            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
-        });
+        // Design mode button is now in the live preview toolbar (#lpDesignModeBtn)
     }
 
     const _toggleDesignModeCommand = CommandManager.register(Strings.CMD_TOGGLE_DESIGN_MODE,
@@ -254,7 +260,6 @@ define(function (require, exports, module) {
         $content = $(".content");
 
         _wireButtons();
-        $("#ccbCollapseEditorBtn").attr("title", Strings.CCB_SWITCH_TO_DESIGN_MODE);
         _syncLeftPositions();
 
         // While the sidebar is being dragged we only reposition .content / main-toolbar.