Skip to content

Commit df3c15b

Browse files
devvaannshdevvaannsh
committed
feat: show pro icon on edit mode
1 parent 7df2601 commit df3c15b

File tree

5 files changed

+73
-15
lines changed

5 files changed

+73
-15
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3007,6 +3007,16 @@ function RemoteFunctions(config) {
30073007
_editHandler = new DOMEditHandler(window.document);
30083008

30093009
function registerHandlers() {
3010+
// Always remove existing listeners first to avoid duplicates
3011+
window.document.removeEventListener("mouseover", onElementHover);
3012+
window.document.removeEventListener("mouseout", onElementHoverOut);
3013+
window.document.removeEventListener("click", onClick);
3014+
window.document.removeEventListener("dblclick", onDoubleClick);
3015+
window.document.removeEventListener("dragover", onDragOver);
3016+
window.document.removeEventListener("drop", onDrop);
3017+
window.document.removeEventListener("dragleave", onDragLeave);
3018+
window.document.removeEventListener("keydown", onKeyDown);
3019+
30103020
if (config.isLPEditFeaturesActive) {
30113021
// Initialize hover highlight with Chrome-like colors
30123022
_hoverHighlight = new Highlight("#c8f9c5", true); // Green similar to Chrome's padding color
@@ -3022,6 +3032,9 @@ function RemoteFunctions(config) {
30223032
window.document.addEventListener("drop", onDrop);
30233033
window.document.addEventListener("dragleave", onDragLeave);
30243034
window.document.addEventListener("keydown", onKeyDown);
3035+
} else {
3036+
// Clean up any existing UI when edit features are disabled
3037+
dismissUIAndCleanupState();
30253038
}
30263039
}
30273040

‎src/LiveDevelopment/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,7 @@ define(function main(require, exports, module) {
344344
config.isLPEditFeaturesActive = enabled;
345345
if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
346346
MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
347+
MultiBrowserLiveDev.registerHandlers();
347348
}
348349
}
349350

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@
110110
color: #a0a0a0;
111111
font-size: 14px;
112112
font-weight: normal;
113+
padding: 0 0.75em;
113114
}
114115

115116
#livePreviewModeBtn:hover {
@@ -118,5 +119,15 @@
118119
}
119120

120121
#livePreviewModeBtn.btn-dropdown::after {
121-
top: 9px !important;
122+
position: static;
123+
margin-top: 2px;
124+
margin-left: 5px;
125+
}
126+
127+
#reloadLivePreviewButton {
128+
margin-left: 3px;
129+
margin-top: 3.5px;
130+
width: 22px;
131+
height: 22px;
132+
flex-shrink: 0;
122133
}

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

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -215,28 +215,42 @@ define(function (require, exports, module) {
215215
*/
216216
function _initializeMode() {
217217
const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || "preview";
218+
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
219+
220+
// If user has edit mode saved but edit features are not active, default to preview
221+
let effectiveMode = savedMode;
222+
if (savedMode === "edit" && !isEditFeaturesActive) {
223+
effectiveMode = "preview";
224+
// Update the preference to reflect the actual mode being used
225+
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
226+
}
218227

219-
// apply the saved
220-
if (savedMode === "highlight") {
228+
// apply the effective mode
229+
if (effectiveMode === "highlight") {
221230
_LPHighlightMode();
222-
} else if (savedMode === "edit") {
231+
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
223232
_LPEditMode();
224233
} else {
225234
_LPPreviewMode();
226235
}
227236

228-
_updateModeButton(savedMode);
237+
_updateModeButton(effectiveMode);
229238
}
230239

231240
function _showModeSelectionDropdown(event) {
241+
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
232242
const items = [
233243
Strings.LIVE_PREVIEW_MODE_PREVIEW,
234244
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
235-
Strings.LIVE_PREVIEW_MODE_EDIT,
236-
"---",
237-
Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON
245+
Strings.LIVE_PREVIEW_MODE_EDIT
238246
];
239247

248+
// Only add edit highlight option if edit features are active
249+
if (isEditFeaturesActive) {
250+
items.push("---");
251+
items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
252+
}
253+
240254
const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || "preview";
241255
// this is to take care of invalid values in the pref file
242256
const currentMode = ["preview", "highlight", "edit"].includes(rawMode) ? rawMode : "preview";
@@ -248,7 +262,12 @@ define(function (require, exports, module) {
248262
} else if (item === Strings.LIVE_PREVIEW_MODE_HIGHLIGHT) {
249263
return currentMode === "highlight" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
250264
} else if (item === Strings.LIVE_PREVIEW_MODE_EDIT) {
251-
return currentMode === "edit" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
265+
const checkmark = currentMode === "edit" ? "✓ " : `${'\u00A0'.repeat(4)}`;
266+
const crownIcon = !isEditFeaturesActive ? ' <span style="color: #FBB03B; border: 1px solid #FBB03B; padding: 2px 4px; border-radius: 10px; font-size: 9px; margin-left: 12px;"><i class="fas fa-crown"></i> Pro</span>' : '';
267+
return {
268+
html: `${checkmark}${item}${crownIcon}`,
269+
enabled: isEditFeaturesActive
270+
};
252271
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
253272
const isHoverMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT) !== "click";
254273
if(isHoverMode) {
@@ -288,6 +307,10 @@ define(function (require, exports, module) {
288307
} else if (index === 2) {
289308
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
290309
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
310+
// Don't allow edit highlight toggle if edit features are not active
311+
if (!isEditFeaturesActive) {
312+
return;
313+
}
291314
// Toggle between hover and click
292315
const currentMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
293316
const newMode = currentMode !== "click" ? "click" : "hover";
@@ -984,16 +1007,26 @@ define(function (require, exports, module) {
9841007
PreferencesManager.on("change", PREFERENCE_LIVE_PREVIEW_MODE, function () {
9851008
// Get the current preference value directly
9861009
const newMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE);
1010+
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
1011+
1012+
// If user tries to set edit mode but edit features are not active, default to preview
1013+
let effectiveMode = newMode;
1014+
if (newMode === "edit" && !isEditFeaturesActive) {
1015+
effectiveMode = "preview";
1016+
// Update the preference to reflect the actual mode being used
1017+
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
1018+
return; // Return to avoid infinite loop
1019+
}
9871020

988-
if (newMode === "highlight") {
1021+
if (effectiveMode === "highlight") {
9891022
_LPHighlightMode();
990-
} else if (newMode === "edit") {
1023+
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
9911024
_LPEditMode();
9921025
} else {
9931026
_LPPreviewMode();
9941027
}
9951028

996-
_updateModeButton(newMode);
1029+
_updateModeButton(effectiveMode);
9971030
});
9981031

9991032
// Handle element highlight preference changes from this extension

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<div id="panel-live-preview">
22
<div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
3-
<div style="width: 10%;display: flex;">
3+
<div style="width: 30%;display: flex;">
44
<button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
5+
<button id="livePreviewModeBtn" title="Configure Live Preview Modes" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
56
</div>
67
<div style="width: fit-content;min-width: 60%;display: flex;justify-content: center; align-items: center;">
78
<!-- these are buttons that are always invisible to help central align the panel title-->
@@ -34,10 +35,9 @@
3435
<img src="thirdparty/devicon/icons/firefox/firefox-original.svg" />
3536
</button>
3637
</div>
37-
<div style="width: 30%;display: flex;align-items: center; justify-content: flex-end">
38+
<div style="width: 10%;display: flex;align-items: center; justify-content: flex-end">
3839
<button id="livePreviewSettingsBtn" title="{{livePreviewSettings}}"
3940
class="btn-alt-quiet toolbar-button lp-settings-icon"><i class="fa-solid fa-gear"></i></button>
40-
<button id="livePreviewModeBtn" title="Configure Live Preview Modes" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
4141
</div>
4242
<iframe id="live-preview-server-iframe"
4343
title="live preview server"

0 commit comments

Comments
 (0)