Skip to content

Commit fe141b4

Browse files
devvaannshdevvaannsh
committed
Revert "feat: add preview page button after the reload page button"
This reverts commit 3ea4e9d.
1 parent 3ea4e9d commit fe141b4

File tree

4 files changed

+29
-46
lines changed

4 files changed

+29
-46
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,3 @@
141141
height: 22px;
142142
flex-shrink: 0;
143143
}
144-
145-
#previewModeLivePreviewButton.selected{
146-
color: #FBB03B;
147-
}

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

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ define(function (require, exports, module) {
9999

100100
// define the live preview mode preference
101101
PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
102-
description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'highlight'", "'edit'"),
103-
values: ["highlight", "edit"]
102+
description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
103+
values: ["preview", "highlight", "edit"]
104104
});
105105

106106
// live preview element highlights preference (whether on hover or click)
@@ -144,8 +144,7 @@ define(function (require, exports, module) {
144144
$edgeButtonBallast,
145145
$firefoxButtonBallast,
146146
$panelTitle,
147-
$modeBtn,
148-
$previewBtn;
147+
$modeBtn;
149148

150149
let customLivePreviewBannerShown = false;
151150

@@ -233,14 +232,16 @@ define(function (require, exports, module) {
233232

234233
/**
235234
* update the mode button text in the live preview toolbar UI based on the current mode
236-
* @param {String} mode - The current mode ("highlight", or "edit")
235+
* @param {String} mode - The current mode ("preview", "highlight", or "edit")
237236
*/
238237
function _updateModeButton(mode) {
239238
if ($modeBtn) {
240-
if (mode === "edit") {
239+
if (mode === "highlight") {
240+
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
241+
} else if (mode === "edit") {
241242
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_EDIT;
242243
} else {
243-
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
244+
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_PREVIEW;
244245
}
245246
}
246247
}
@@ -261,10 +262,12 @@ define(function (require, exports, module) {
261262
}
262263

263264
// apply the effective mode
264-
if (effectiveMode === "edit" && isEditFeaturesActive) {
265+
if (effectiveMode === "highlight") {
266+
_LPHighlightMode();
267+
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
265268
_LPEditMode();
266269
} else {
267-
_LPHighlightMode();
270+
_LPPreviewMode();
268271
}
269272

270273
_updateModeButton(effectiveMode);
@@ -273,6 +276,7 @@ define(function (require, exports, module) {
273276
function _showModeSelectionDropdown(event) {
274277
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
275278
const items = [
279+
Strings.LIVE_PREVIEW_MODE_PREVIEW,
276280
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
277281
Strings.LIVE_PREVIEW_MODE_EDIT
278282
];
@@ -285,10 +289,13 @@ define(function (require, exports, module) {
285289

286290
const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
287291
// this is to take care of invalid values in the pref file
288-
const currentMode = ["highlight", "edit"].includes(rawMode) ? rawMode : _getDefaultMode();
292+
const currentMode = ["preview", "highlight", "edit"].includes(rawMode) ? rawMode : _getDefaultMode();
289293

290294
const dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
291-
if (item === Strings.LIVE_PREVIEW_MODE_HIGHLIGHT) {
295+
if (item === Strings.LIVE_PREVIEW_MODE_PREVIEW) {
296+
// using empty spaces to keep content aligned
297+
return currentMode === "preview" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
298+
} else if (item === Strings.LIVE_PREVIEW_MODE_HIGHLIGHT) {
292299
return currentMode === "highlight" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
293300
} else if (item === Strings.LIVE_PREVIEW_MODE_EDIT) {
294301
const checkmark = currentMode === "edit" ? "✓ " : `${'\u00A0'.repeat(4)}`;
@@ -330,18 +337,16 @@ define(function (require, exports, module) {
330337
// here we just set the preference
331338
// as the preferences listener will automatically handle the required changes
332339
if (index === 0) {
333-
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
334-
$previewBtn.removeClass('selected');
335-
_LPHighlightMode();
340+
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
336341
} else if (index === 1) {
342+
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
343+
} else if (index === 2) {
337344
if (!isEditFeaturesActive) {
338345
// when the feature is not active we need to show a dialog to the user asking
339346
// them to subscribe to pro
340347
_showProFeatureDialog();
341348
} else {
342349
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
343-
$previewBtn.removeClass('selected');
344-
_LPEditMode();
345350
}
346351
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
347352
// Don't allow edit highlight toggle if edit features are not active
@@ -366,23 +371,6 @@ define(function (require, exports, module) {
366371
});
367372
}
368373

369-
function _handlePreviewBtnClick() {
370-
if($previewBtn.hasClass('selected')) {
371-
$previewBtn.removeClass('selected');
372-
373-
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
374-
const currentMode = $modeBtn[0].textContent.toLowerCase();
375-
if("edit".includes(currentMode) && isEditFeaturesActive) {
376-
_LPEditMode();
377-
} else {
378-
_LPHighlightMode();
379-
}
380-
} else {
381-
$previewBtn.addClass('selected');
382-
_LPPreviewMode();
383-
}
384-
}
385-
386374
function _getTrustProjectPage() {
387375
const trustProjectMessage = StringUtils.format(Strings.TRUST_PROJECT,
388376
path.basename(ProjectManager.getProjectRoot().fullPath));
@@ -598,7 +586,6 @@ define(function (require, exports, module) {
598586
Strings: Strings,
599587
livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
600588
clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
601-
clickToPreview: Strings.LIVE_PREVIEW_CLICK_TO_PREVIEW_PAGE,
602589
livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
603590
livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
604591
clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -629,7 +616,6 @@ define(function (require, exports, module) {
629616
$panelTitle = $panel.find("#panel-live-preview-title");
630617
$settingsIcon = $panel.find("#livePreviewSettingsBtn");
631618
$modeBtn = $panel.find("#livePreviewModeBtn");
632-
$previewBtn = $panel.find("#previewModeLivePreviewButton");
633619

634620
$panel.find(".live-preview-settings-banner-btn").on("click", ()=>{
635621
CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW_SETTINGS);
@@ -664,7 +650,6 @@ define(function (require, exports, module) {
664650
});
665651

666652
$modeBtn.on("click", _showModeSelectionDropdown);
667-
$previewBtn.on("click", _handlePreviewBtnClick);
668653

669654
_showOpenBrowserIcons();
670655
$settingsIcon.click(()=>{
@@ -1069,17 +1054,19 @@ define(function (require, exports, module) {
10691054

10701055
// If user tries to set edit mode but edit features are not active, default to highlight
10711056
let effectiveMode = newMode;
1072-
if (newMode !== "highlight" && !isEditFeaturesActive) {
1057+
if (newMode === "edit" && !isEditFeaturesActive) {
10731058
effectiveMode = "highlight";
10741059
// Update the preference to reflect the actual mode being used
10751060
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
10761061
return; // Return to avoid infinite loop
10771062
}
10781063

1079-
if (effectiveMode === "edit" && isEditFeaturesActive) {
1064+
if (effectiveMode === "highlight") {
1065+
_LPHighlightMode();
1066+
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
10801067
_LPEditMode();
10811068
} else {
1082-
_LPHighlightMode();
1069+
_LPPreviewMode();
10831070
}
10841071

10851072
_updateModeButton(effectiveMode);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
33
<div style="width: 20%;display: flex;">
44
<button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
5-
<button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
5+
<button id="previewModeLivePreviewButton" title="todo: preview mode title" class="btn-alt-quiet toolbar-button">
66
<i class="fa-solid fa-play"></i>
77
</button>
88
<button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>

‎src/nls/root/strings.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,11 +190,11 @@ define({
190190
"LIVE_DEV_MORE_OPTIONS_AI": "Edit with AI",
191191
"LIVE_DEV_AI_PROMPT_PLACEHOLDER": "Ask Phoenix AI to modify this element...",
192192
"LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
193-
"LIVE_PREVIEW_CLICK_TO_PREVIEW_PAGE": "Preview Page",
193+
"LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",
194194
"LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
195195
"LIVE_PREVIEW_MODE_EDIT": "Edit Mode",
196196
"LIVE_PREVIEW_EDIT_HIGHLIGHT_ON": "Edit Highlights on Hover",
197-
"LIVE_PREVIEW_MODE_PREFERENCE": "{0} connects the webpage to your code - click on elements to jump to their code and vice versa, {1} provides highlighting along with advanced element manipulation",
197+
"LIVE_PREVIEW_MODE_PREFERENCE": "{0} shows only the webpage, {1} connects the webpage to your code - click on elements to jump to their code and vice versa, {2} provides highlighting along with advanced element manipulation",
198198
"LIVE_PREVIEW_CONFIGURE_MODES": "Configure Live Preview Modes",
199199
"LIVE_PREVIEW_PRO_FEATURE_TITLE": "Pro Feature",
200200
"LIVE_PREVIEW_PRO_FEATURE_MESSAGE": "This is a Pro feature. Subscribe to Phoenix Pro to keep using this feature.",

0 commit comments

Comments
 (0)