From 5fdd18e249e32d5967d6c351d22b3929a5789cbb Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 19 Apr 2026 22:04:08 +0530 Subject: [PATCH 01/31] fix: revert background color transparent fix --- src/extensionsIntegrated/Phoenix-live-preview/live-preview.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index a5a31dc45b..c1a00d0e26 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -27,7 +27,7 @@ #panel-live-preview-frame, #panel-md-preview-frame { - background-color: transparent; + background-color: white; position: relative; } From 1113ac56e38ee1187615f6c3916040267c887490 Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 19 Apr 2026 22:43:26 +0530 Subject: [PATCH 02/31] refactor: better resize ruler dialog string --- src/nls/root/strings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 482fec812a..a8662428d4 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -523,7 +523,7 @@ define({ "LIVE_DEV_IMAGE_FOLDER_DIALOG_HELP": "💡 Type folder path or leave empty to download in 'images' folder.", "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project", "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro", - "DEVICE_SIZE_LIMIT_MESSAGE": "Phoenix Pro lets you preview your page at the screen sizes defined in your CSS.", + "DEVICE_SIZE_LIMIT_MESSAGE": "See how your page looks on phones, tablets, desktops, and your CSS breakpoints. Upgrade to Phoenix Pro.", "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.", "IMAGE_UPLOADING": "Uploading", "IMAGE_UPLOAD_FAILED": "Failed to upload image", From 62644abf25cbedb8b3b9651563fb171ea52d8b0c Mon Sep 17 00:00:00 2001 From: Pluto Date: Sun, 19 Apr 2026 23:27:28 +0530 Subject: [PATCH 03/31] feat: add tooltip for disabled options in resize ruler --- .../Phoenix-live-preview/live-preview.css | 4 ---- src/nls/root/strings.js | 1 + 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index c1a00d0e26..6d36791bab 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -155,10 +155,6 @@ opacity: 0.5; } -.device-size-item-disabled { - opacity: 0.35; -} - .device-size-item-breakpoint-icon { margin-right: 6px; width: 12px; diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index a8662428d4..7c13002647 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -524,6 +524,7 @@ define({ "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project", "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro", "DEVICE_SIZE_LIMIT_MESSAGE": "See how your page looks on phones, tablets, desktops, and your CSS breakpoints. Upgrade to Phoenix Pro.", + "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space in the editor window for this screen size. Try zooming out.", "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.", "IMAGE_UPLOADING": "Uploading", "IMAGE_UPLOAD_FAILED": "Failed to upload image", From d2ed409f827b00cc930ae4c7c236f2466d2c5a73 Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 20 Apr 2026 17:58:52 +0530 Subject: [PATCH 04/31] feat: add toggle support in the live preview resize ruler feature --- .../Phoenix-live-preview/live-preview.css | 55 ++++++++++++++++--- src/nls/root/strings.js | 2 + 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 6d36791bab..c09eec1199 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -109,31 +109,68 @@ margin-top: 0; } +.lp-device-size-btn-group { + display: flex; + align-items: center; + flex-shrink: 0; + margin: 0 4px 0 3px; + border: 1px solid transparent; + border-radius: 3px; + box-sizing: border-box; +} + +.lp-device-size-btn-group:hover { + border-color: rgba(255, 255, 255, 0.1); +} + .lp-device-size-icon { min-width: fit-content; display: flex; align-items: center; - margin: 0 4px 0 3px; cursor: pointer; background: transparent; - box-shadow: none; - border: 1px solid transparent; - box-sizing: border-box; + box-shadow: none !important; + border: none; color: #a0a0a0; padding: 0 0.35em; + margin: 0; } .lp-device-size-icon:hover, .lp-device-size-icon:focus, .lp-device-size-icon:active { - background: transparent !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + background: rgba(255, 255, 255, 0.06) !important; + border: none !important; box-shadow: none !important; } -#deviceSizeBtn.btn-dropdown::after { - position: static; - margin-left: 5px; +.lp-device-size-dropdown-chevron { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background: transparent; + box-shadow: none !important; + border: none; + border-left: 1px solid transparent; + color: #a0a0a0; + padding: 0 4px; + margin: 0; + height: 22px; + font-size: 10px; +} + +.lp-device-size-btn-group:hover .lp-device-size-dropdown-chevron { + border-left-color: rgba(255, 255, 255, 0.1); +} + +.lp-device-size-dropdown-chevron:hover, +.lp-device-size-dropdown-chevron:focus, +.lp-device-size-dropdown-chevron:active { + background: rgba(255, 255, 255, 0.06) !important; + border: none !important; + border-left: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: none !important; } .device-size-item-icon { diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 7c13002647..b6d16cb209 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -525,6 +525,8 @@ define({ "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro", "DEVICE_SIZE_LIMIT_MESSAGE": "See how your page looks on phones, tablets, desktops, and your CSS breakpoints. Upgrade to Phoenix Pro.", "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space in the editor window for this screen size. Try zooming out.", + "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop", + "DEVICE_SIZE_DROPDOWN_TOOLTIP": "All device sizes", "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.", "IMAGE_UPLOADING": "Uploading", "IMAGE_UPLOAD_FAILED": "Failed to upload image", From f5275f010ea85d6578e76965bec83851e9de558d Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 20 Apr 2026 18:39:34 +0530 Subject: [PATCH 05/31] fix: better styling for the resize ruler button in the toolbar --- .../Phoenix-live-preview/live-preview.css | 10 +++++----- src/nls/root/strings.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index c09eec1199..78ac60d4d7 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -5,7 +5,7 @@ .live-preview-browser-btn { opacity: 0; visibility: hidden; - transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */ + transition: opacity 1s, visibility 0s linear 1s; } #live-preview-plugin-toolbar { @@ -101,7 +101,7 @@ opacity: 0; color: #a0a0a0; visibility: hidden; - transition: opacity 1s, visibility 0s linear 1s; /* Fade-out effect */ + transition: opacity 1s, visibility 0s linear 1s; width: 30px; height: 22px; padding: 1px 6px; @@ -124,15 +124,16 @@ } .lp-device-size-icon { - min-width: fit-content; display: flex; align-items: center; + justify-content: center; + width: 20px; cursor: pointer; background: transparent; box-shadow: none !important; border: none; color: #a0a0a0; - padding: 0 0.35em; + padding: 0; margin: 0; } @@ -282,7 +283,6 @@ color: #fff; } -/* Persistent cursor-sync highlight on CM line corresponding to md viewer cursor */ .cm-cursor-sync-highlight { background-color: rgba(100, 150, 255, 0.18) !important; } diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index b6d16cb209..f873c1a681 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -524,7 +524,7 @@ define({ "LIVE_DEV_IMAGE_FOLDER_DIALOG_REMEMBER": "Don't ask again for this project", "AVAILABLE_IN_PRO_TITLE": "Available in Phoenix Pro", "DEVICE_SIZE_LIMIT_MESSAGE": "See how your page looks on phones, tablets, desktops, and your CSS breakpoints. Upgrade to Phoenix Pro.", - "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space in the editor window for this screen size. Try zooming out.", + "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space for this screen size - try zooming out", "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop", "DEVICE_SIZE_DROPDOWN_TOOLTIP": "All device sizes", "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.", From a4106c26f64bc7aadcb0505ac637142c8226c0a3 Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 20 Apr 2026 23:18:51 +0530 Subject: [PATCH 06/31] feat: auto collapse sidebar if needed to fit live preview --- src/view/WorkspaceManager.js | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js index 77b2239975..1743d32f5b 100644 --- a/src/view/WorkspaceManager.js +++ b/src/view/WorkspaceManager.js @@ -204,7 +204,7 @@ define(function (require, exports, module) { // Floor the toolbar's maxsize at its minimum width. Without the floor, a narrow // window with a wide sidebar can drive the cap below 10px, and Resizer's drag // logic would then squeeze the toolbar to zero and hide it. - var rawMax = Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100); + var rawMax = window.innerWidth - sidebarWidth - 100; $mainToolbar.data("maxsize", Math.max(minToolbarWidth, rawMax)); } @@ -570,7 +570,7 @@ define(function (require, exports, module) { let minToolbarWidth = (panelBeingShown.minWidth || 0) + pluginIconsBarWidth; let maxToolbarWidth = Math.max( minToolbarWidth, - Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100) + window.innerWidth - sidebarWidth - 100 ); let currentWidth = $mainToolbar.width(); if (currentWidth > maxToolbarWidth || currentWidth < minToolbarWidth) { @@ -675,7 +675,8 @@ define(function (require, exports, module) { /** * Programmatically sets the plugin panel content width to the given value in pixels. * The total toolbar width is adjusted to account for the plugin icons bar. - * Width is clamped to respect panel minWidth and max size (75% of window). + * If the requested width doesn't fit, the sidebar is progressively shrunk + * (and collapsed if necessary) before clamping. * No-op if no panel is currently visible. * @param {number} width Desired content width in pixels */ @@ -686,11 +687,31 @@ define(function (require, exports, module) { var pluginIconsBarWidth = $pluginIconsBar.outerWidth(); var newToolbarWidth = width + pluginIconsBarWidth; - // Respect min/max constraints var minSize = currentlyShownPanel.minWidth || 0; var minToolbarWidth = minSize + pluginIconsBarWidth; var sidebarWidth = _getSidebarWidth(); - var maxToolbarWidth = Math.min(window.innerWidth * 0.75, window.innerWidth - sidebarWidth - 100); + var maxToolbarWidth = window.innerWidth - sidebarWidth - MIN_EDITOR_WIDTH; + + if (newToolbarWidth > maxToolbarWidth && sidebarWidth > 0) { + var $sb = $("#sidebar"); + var deficit = newToolbarWidth - maxToolbarWidth; + var newSidebarWidth = sidebarWidth - deficit; + + if (newSidebarWidth >= MIN_SIDEBAR_WIDTH) { + $sb.width(newSidebarWidth); + var resync = $sb.data("resyncSizer"); + if (typeof resync === "function") { + resync(); + } + $sb.trigger("panelResizeUpdate", [newSidebarWidth]); + $sb.trigger("panelResizeEnd", [newSidebarWidth]); + } else { + Resizer.hide($sb[0]); + } + sidebarWidth = _getSidebarWidth(); + maxToolbarWidth = window.innerWidth - sidebarWidth - MIN_EDITOR_WIDTH; + } + newToolbarWidth = Math.max(newToolbarWidth, minToolbarWidth); newToolbarWidth = Math.min(newToolbarWidth, maxToolbarWidth); From ceecbf20b4b2baa0b960175e0681d84a95a73f5a Mon Sep 17 00:00:00 2001 From: Pluto Date: Mon, 20 Apr 2026 23:39:51 +0530 Subject: [PATCH 07/31] feat: add responsive handles live preview css --- .../Phoenix-live-preview/live-preview.css | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 78ac60d4d7..f49f54f7a6 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -50,6 +50,48 @@ height: calc(100% - var(--toolbar-height)); } +.frame-container.responsive-viewport { + justify-content: center; + align-items: stretch; + background: #1a1a1e; +} + +.frame-container.responsive-viewport > div:first-child:not(.responsive-handle) { + display: none; +} + +.responsive-handle { + width: 6px; + cursor: ew-resize; + background: transparent; + flex-shrink: 0; + position: relative; + z-index: 5; + transition: background 0.15s; +} + +.responsive-handle:hover, +.responsive-handle.dragging { + background: rgba(66, 133, 244, 0.5); +} + +.responsive-handle::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 2px; + height: 24px; + border-radius: 1px; + background: rgba(255, 255, 255, 0.25); +} + +.responsive-handle:hover::after, +.responsive-handle.dragging::after { + background: rgba(255, 255, 255, 0.6); +} + .plugin-toolbar { height: var(--toolbar-height); color: #a0a0a0; From 399d6e3e74968ca778448c36492e62a207fbfefa Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 00:16:35 +0530 Subject: [PATCH 08/31] feat: add support for vertical resizing in design mode --- .../Phoenix-live-preview/live-preview.css | 39 ++++++++++++++++--- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index f49f54f7a6..3dd6364c05 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -51,6 +51,7 @@ } .frame-container.responsive-viewport { + position: relative; justify-content: center; align-items: stretch; background: #1a1a1e; @@ -61,11 +62,8 @@ } .responsive-handle { - width: 6px; - cursor: ew-resize; background: transparent; flex-shrink: 0; - position: relative; z-index: 5; transition: background 0.15s; } @@ -75,7 +73,13 @@ background: rgba(66, 133, 244, 0.5); } -.responsive-handle::after { +.responsive-handle-horizontal { + width: 6px; + cursor: ew-resize; + position: relative; +} + +.responsive-handle-horizontal::after { content: ''; position: absolute; top: 50%; @@ -87,8 +91,31 @@ background: rgba(255, 255, 255, 0.25); } -.responsive-handle:hover::after, -.responsive-handle.dragging::after { +.responsive-handle-horizontal:hover::after, +.responsive-handle-horizontal.dragging::after { + background: rgba(255, 255, 255, 0.6); +} + +.responsive-handle-vertical { + position: absolute; + height: 6px; + cursor: ns-resize; +} + +.responsive-handle-vertical::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 24px; + height: 2px; + border-radius: 1px; + background: rgba(255, 255, 255, 0.25); +} + +.responsive-handle-vertical:hover::after, +.responsive-handle-vertical.dragging::after { background: rgba(255, 255, 255, 0.6); } From 9843ed30e81f42d16b3d523ed272bbad96b67533 Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 01:20:18 +0530 Subject: [PATCH 09/31] feat: add fit to panel button after resizing in design mode --- .../Phoenix-live-preview/live-preview.css | 18 ++++++++++++++++++ src/nls/root/strings.js | 1 + 2 files changed, 19 insertions(+) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 3dd6364c05..355a011e61 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -178,6 +178,24 @@ margin-top: 0; } +.lp-fit-to-panel-btn { + color: #a0a0a0; + flex-shrink: 0; + margin: 0 2px; + background: transparent; + border: 1px solid transparent; + box-shadow: none; + font-size: 12px; +} + +.lp-fit-to-panel-btn:hover, +.lp-fit-to-panel-btn:focus, +.lp-fit-to-panel-btn:active { + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: none !important; +} + .lp-device-size-btn-group { display: flex; align-items: center; diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index f873c1a681..a8377a78b4 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -527,6 +527,7 @@ define({ "DEVICE_SIZE_NOT_ENOUGH_SPACE": "Not enough space for this screen size - try zooming out", "DEVICE_SIZE_CYCLE_TOOLTIP": "Switch between mobile, tablet, and desktop", "DEVICE_SIZE_DROPDOWN_TOOLTIP": "All device sizes", + "DEVICE_SIZE_FIT_TO_PANEL": "Fit to panel", "MD_EDIT_UPSELL_MESSAGE": "Write Markdown like a document. {APP_NAME} handles the formatting so you can stay focused on writing.", "IMAGE_UPLOADING": "Uploading", "IMAGE_UPLOAD_FAILED": "Failed to upload image", From 8eaae7c040c089f6354e0b71ac775fc101e62e6c Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 12:36:01 +0530 Subject: [PATCH 10/31] chore: auto update API docs --- docs/API-Reference/view/WorkspaceManager.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/API-Reference/view/WorkspaceManager.md b/docs/API-Reference/view/WorkspaceManager.md index 98a49cc6f5..bb0c11ed12 100644 --- a/docs/API-Reference/view/WorkspaceManager.md +++ b/docs/API-Reference/view/WorkspaceManager.md @@ -190,7 +190,8 @@ Returns true if visible else false. ### view/WorkspaceManager.setPluginPanelWidth(width) Programmatically sets the plugin panel content width to the given value in pixels. The total toolbar width is adjusted to account for the plugin icons bar. -Width is clamped to respect panel minWidth and max size (75% of window). +If the requested width doesn't fit, the sidebar is progressively shrunk +(and collapsed if necessary) before clamping. No-op if no panel is currently visible. **Kind**: inner method of [view/WorkspaceManager](#module_view/WorkspaceManager) From 3f5ec51ed48b2d7f3d6266d24132e49e221d255e Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 13:35:50 +0530 Subject: [PATCH 11/31] feat: show pixel values when resizing the webpage --- .../Phoenix-live-preview/live-preview.css | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 355a011e61..7db8feede2 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -119,6 +119,27 @@ background: rgba(255, 255, 255, 0.6); } +.responsive-dimension-label { + position: absolute; + transform: translateX(-50%); + z-index: 10; + display: none; + padding: 4px 12px; + border-radius: 4px; + background: rgba(0, 0, 0, 0.82); + border: 1px solid rgba(255, 255, 255, 0.15); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + color: #fff; + font-size: 13px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; + white-space: nowrap; + pointer-events: none; + letter-spacing: 0.4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); +} + .plugin-toolbar { height: var(--toolbar-height); color: #a0a0a0; From 0cc03f35323cf840745733980d7628e48050d9d0 Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 15:29:04 +0530 Subject: [PATCH 12/31] feat: better resize handles styling --- .../Phoenix-live-preview/live-preview.css | 63 ++++++++++++++----- 1 file changed, 47 insertions(+), 16 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 7db8feede2..d7021e7c03 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -62,61 +62,92 @@ } .responsive-handle { - background: transparent; flex-shrink: 0; z-index: 5; + background: transparent; transition: background 0.15s; } .responsive-handle:hover, .responsive-handle.dragging { - background: rgba(66, 133, 244, 0.5); + background: rgba(255, 255, 255, 0.08); } .responsive-handle-horizontal { - width: 6px; + width: 10px; cursor: ew-resize; position: relative; } +.responsive-handle-horizontal::before, .responsive-handle-horizontal::after { content: ''; position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); - width: 2px; - height: 24px; - border-radius: 1px; - background: rgba(255, 255, 255, 0.25); + width: 1px; + height: 16px; + border-radius: 0.5px; + background: rgba(255, 255, 255, 0.3); +} + +.responsive-handle-horizontal::before { + transform: translate(calc(-50% - 2px), -50%); +} + +.responsive-handle-horizontal::after { + transform: translate(calc(-50% + 2px), -50%); } +.responsive-handle-horizontal:hover::before, .responsive-handle-horizontal:hover::after, +.responsive-handle-horizontal.dragging::before, .responsive-handle-horizontal.dragging::after { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.7); +} + +.responsive-handle-left { + opacity: 0; + transition: opacity 0.2s; +} + +.responsive-handle-left:hover, +.responsive-handle-left.dragging { + opacity: 1; } .responsive-handle-vertical { position: absolute; - height: 6px; + height: 10px; cursor: ns-resize; + box-sizing: border-box; } +.responsive-handle-vertical::before, .responsive-handle-vertical::after { content: ''; position: absolute; top: 50%; left: 50%; - transform: translate(-50%, -50%); - width: 24px; - height: 2px; - border-radius: 1px; - background: rgba(255, 255, 255, 0.25); + width: 16px; + height: 1px; + border-radius: 0.5px; + background: rgba(255, 255, 255, 0.3); +} + +.responsive-handle-vertical::before { + transform: translate(-50%, calc(-50% - 2px)); +} + +.responsive-handle-vertical::after { + transform: translate(-50%, calc(-50% + 2px)); } +.responsive-handle-vertical:hover::before, .responsive-handle-vertical:hover::after, +.responsive-handle-vertical.dragging::before, .responsive-handle-vertical.dragging::after { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.7); } .responsive-dimension-label { From 06f7dde48ea4d36e44c0a99200b944d52776c26e Mon Sep 17 00:00:00 2001 From: Pluto Date: Tue, 21 Apr 2026 15:32:44 +0530 Subject: [PATCH 13/31] build: update pro deps --- tracking-repos.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tracking-repos.json b/tracking-repos.json index e555dba242..2f81c3ed31 100644 --- a/tracking-repos.json +++ b/tracking-repos.json @@ -1,5 +1,5 @@ { "phoenixPro": { - "commitID": "59e1d73841f94f546ad9b62a76217eb0a1e450e8" + "commitID": "0bb0ed293e70501363fa3cd9916319ea1dbf38bb" } } From 4401efa35b521aa65191a38fa8718deb74fbc74e Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 22 Apr 2026 12:33:25 +0530 Subject: [PATCH 14/31] feat: better live preview toolbar buttons styling --- .../Phoenix-live-preview/live-preview.css | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index d7021e7c03..5668ae67f7 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -182,10 +182,30 @@ .toolbar-button { background-color: transparent; - width:28px; + width: 28px; height: 22px; } +#live-preview-plugin-toolbar .btn-alt-quiet:hover, +#live-preview-plugin-toolbar .btn-alt-quiet:focus, +#live-preview-plugin-toolbar .btn-alt-quiet:active { + border-color: rgba(255, 255, 255, 0.1) !important; + box-shadow: none !important; +} + +#live-preview-plugin-toolbar .lp-device-size-icon:hover, +#live-preview-plugin-toolbar .lp-device-size-icon:focus, +#live-preview-plugin-toolbar .lp-device-size-icon:active { + border: none !important; +} + +#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:hover, +#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:focus, +#live-preview-plugin-toolbar .lp-device-size-dropdown-chevron:active { + border: none !important; + border-left: 1px solid rgba(255, 255, 255, 0.1) !important; +} + .open-icon { background: url("./images/sprites.svg#open-icon") no-repeat 72.5%; width: 30px; @@ -279,7 +299,7 @@ .lp-device-size-icon:hover, .lp-device-size-icon:focus, .lp-device-size-icon:active { - background: rgba(255, 255, 255, 0.06) !important; + background: transparent !important; border: none !important; box-shadow: none !important; } @@ -293,6 +313,7 @@ box-shadow: none !important; border: none; border-left: 1px solid transparent; + border-radius: 0 3px 3px 0; color: #a0a0a0; padding: 0 4px; margin: 0; @@ -307,7 +328,7 @@ .lp-device-size-dropdown-chevron:hover, .lp-device-size-dropdown-chevron:focus, .lp-device-size-dropdown-chevron:active { - background: rgba(255, 255, 255, 0.06) !important; + background: transparent !important; border: none !important; border-left: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: none !important; From c99c16b150d92cf15e1b2cab7f5fb92dc76a2039 Mon Sep 17 00:00:00 2001 From: Pluto Date: Wed, 22 Apr 2026 14:56:57 +0530 Subject: [PATCH 15/31] feat: move control bar to the left side --- .../NavigationProvider.js | 12 +- src/index.html | 60 ++++------ src/project/SidebarView.js | 3 +- src/styles/CentralControlBar.less | 106 +++++++----------- src/styles/Extn-CollapseFolders.less | 13 ++- src/styles/brackets.less | 14 +-- src/styles/brackets_variables.less | 1 + src/styles/images/sprites.svg | 8 +- src/utils/Resizer.js | 9 +- src/view/CentralControlBar.js | 56 ++------- src/view/SidebarTabs.js | 90 ++++++++++----- 11 files changed, 152 insertions(+), 220 deletions(-) diff --git a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js b/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js index ba12210795..150004e91d 100644 --- a/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js +++ b/src/extensionsIntegrated/NavigationAndHistory/NavigationProvider.js @@ -52,8 +52,7 @@ define(function (require, exports, module) { let $navback = null, $navForward = null, $searchNav = null, - $newProject = null, - $showInTree = null; + $newProject = null; /** * Contains list of most recently known cursor positions. @@ -712,11 +711,6 @@ define(function (require, exports, module) { MainViewManager.focusActivePane(); } - function _showInFileTreeClicked() { - Metrics.countEvent(Metrics.EVENT_TYPE.UI, "fileNavBar", "showInFileTree"); - CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE); - } - function _findInFiles() { Metrics.countEvent(Metrics.EVENT_TYPE.UI, "fileNavBar", "search"); CommandManager.execute(Commands.CMD_FIND_IN_FILES); @@ -738,7 +732,6 @@ define(function (require, exports, module) { function updateTooltips() { $navback.attr("title", _getShortcutDisplay(Strings.CMD_NAVIGATE_BACKWARD, NAVIGATION_JUMP_BACK)); $navForward.attr("title", _getShortcutDisplay(Strings.CMD_NAVIGATE_FORWARD, NAVIGATION_JUMP_FWD)); - $showInTree.attr("title", _getShortcutDisplay(Strings.CMD_SHOW_IN_TREE, Commands.NAVIGATE_SHOW_IN_FILE_TREE)); $searchNav.attr("title", _getShortcutDisplay(Strings.CMD_FIND_IN_FILES, Commands.CMD_FIND_IN_FILES)); // new project extension is not yet loaded, so we cant show keyboard shortcut here. $newProject.attr("title", Strings.CMD_PROJECT_NEW); @@ -746,7 +739,6 @@ define(function (require, exports, module) { function _setupNavigationButtons() { let $mainNavBarLeft = $("#mainNavBarLeft"); - $showInTree = $("#showInfileTree"); $navback = $("#navBackButton"); $navForward = $("#navForwardButton"); $searchNav = $("#searchNav"); @@ -755,14 +747,12 @@ define(function (require, exports, module) { updateTooltips(); CommandManager.get(NAVIGATION_JUMP_BACK).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips); CommandManager.get(NAVIGATION_JUMP_FWD).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips); - CommandManager.get(Commands.NAVIGATE_SHOW_IN_FILE_TREE).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips); CommandManager.get(Commands.CMD_FIND_IN_FILES).on(KeyBindingManager.EVENT_KEY_BINDING_ADDED, updateTooltips); $navback.on("click", _navigateBackClicked); $navForward.on("click", _navigateForwardClicked); $("#navBackButton").contextmenu(_navigateBackClicked); $("#navForwardButton").contextmenu(_navigateForwardClicked); - $showInTree.on("click", _showInFileTreeClicked); $searchNav.on("click", _findInFiles); $newProject.on("click", _newProjectClicked); } diff --git a/src/index.html b/src/index.html index d196537d80..c1e6b2727e 100644 --- a/src/index.html +++ b/src/index.html @@ -905,7 +905,23 @@
- - -
-
- - - - - - -
-
-
- - - - - - -
-
-
- - - -
-
-
- - - -
-
- -
-
-
-
-
- -
-
+ +