Skip to content

Commit c784e09

Browse files
devvaannshabose
devvaannsh
authored and
abose
committed
feat: add preview page button after the reload page button
1 parent 384bac2 commit c784e09

File tree

4 files changed

+46
-29
lines changed

4 files changed

+46
-29
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,3 +141,7 @@
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: 39 additions & 26 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, "'preview'", "'highlight'", "'edit'"),
103-
values: ["preview", "highlight", "edit"]
102+
description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'highlight'", "'edit'"),
103+
values: ["highlight", "edit"]
104104
});
105105

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

149150
let customLivePreviewBannerShown = false;
150151

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

233234
/**
234235
* update the mode button text in the live preview toolbar UI based on the current mode
235-
* @param {String} mode - The current mode ("preview", "highlight", or "edit")
236+
* @param {String} mode - The current mode ("highlight", or "edit")
236237
*/
237238
function _updateModeButton(mode) {
238239
if ($modeBtn) {
239-
if (mode === "highlight") {
240-
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
241-
} else if (mode === "edit") {
240+
if (mode === "edit") {
242241
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_EDIT;
243242
} else {
244-
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_PREVIEW;
243+
$modeBtn[0].textContent = Strings.LIVE_PREVIEW_MODE_HIGHLIGHT;
245244
}
246245
}
247246
}
@@ -262,12 +261,10 @@ define(function (require, exports, module) {
262261
}
263262

264263
// apply the effective mode
265-
if (effectiveMode === "highlight") {
266-
_LPHighlightMode();
267-
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
264+
if (effectiveMode === "edit" && isEditFeaturesActive) {
268265
_LPEditMode();
269266
} else {
270-
_LPPreviewMode();
267+
_LPHighlightMode();
271268
}
272269

273270
_updateModeButton(effectiveMode);
@@ -276,7 +273,6 @@ define(function (require, exports, module) {
276273
function _showModeSelectionDropdown(event) {
277274
const isEditFeaturesActive = LiveDevelopment.isLPEditFeaturesActive;
278275
const items = [
279-
Strings.LIVE_PREVIEW_MODE_PREVIEW,
280276
Strings.LIVE_PREVIEW_MODE_HIGHLIGHT,
281277
Strings.LIVE_PREVIEW_MODE_EDIT
282278
];
@@ -289,13 +285,10 @@ define(function (require, exports, module) {
289285

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

294290
const dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
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) {
291+
if (item === Strings.LIVE_PREVIEW_MODE_HIGHLIGHT) {
299292
return currentMode === "highlight" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
300293
} else if (item === Strings.LIVE_PREVIEW_MODE_EDIT) {
301294
const checkmark = currentMode === "edit" ? "✓ " : `${'\u00A0'.repeat(4)}`;
@@ -337,16 +330,18 @@ define(function (require, exports, module) {
337330
// here we just set the preference
338331
// as the preferences listener will automatically handle the required changes
339332
if (index === 0) {
340-
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
341-
} else if (index === 1) {
342333
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
343-
} else if (index === 2) {
334+
$previewBtn.removeClass('selected');
335+
_LPHighlightMode();
336+
} else if (index === 1) {
344337
if (!isEditFeaturesActive) {
345338
// when the feature is not active we need to show a dialog to the user asking
346339
// them to subscribe to pro
347340
_showProFeatureDialog();
348341
} else {
349342
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
343+
$previewBtn.removeClass('selected');
344+
_LPEditMode();
350345
}
351346
} else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
352347
// Don't allow edit highlight toggle if edit features are not active
@@ -371,6 +366,23 @@ define(function (require, exports, module) {
371366
});
372367
}
373368

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+
374386
function _getTrustProjectPage() {
375387
const trustProjectMessage = StringUtils.format(Strings.TRUST_PROJECT,
376388
path.basename(ProjectManager.getProjectRoot().fullPath));
@@ -586,6 +598,7 @@ define(function (require, exports, module) {
586598
Strings: Strings,
587599
livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
588600
clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
601+
clickToPreview: Strings.LIVE_PREVIEW_CLICK_TO_PREVIEW_PAGE,
589602
livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
590603
livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
591604
clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -616,6 +629,7 @@ define(function (require, exports, module) {
616629
$panelTitle = $panel.find("#panel-live-preview-title");
617630
$settingsIcon = $panel.find("#livePreviewSettingsBtn");
618631
$modeBtn = $panel.find("#livePreviewModeBtn");
632+
$previewBtn = $panel.find("#previewModeLivePreviewButton");
619633

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

652666
$modeBtn.on("click", _showModeSelectionDropdown);
667+
$previewBtn.on("click", _handlePreviewBtnClick);
653668

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

10551070
// If user tries to set edit mode but edit features are not active, default to highlight
10561071
let effectiveMode = newMode;
1057-
if (newMode === "edit" && !isEditFeaturesActive) {
1072+
if (newMode !== "highlight" && !isEditFeaturesActive) {
10581073
effectiveMode = "highlight";
10591074
// Update the preference to reflect the actual mode being used
10601075
PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
10611076
return; // Return to avoid infinite loop
10621077
}
10631078

1064-
if (effectiveMode === "highlight") {
1065-
_LPHighlightMode();
1066-
} else if (effectiveMode === "edit" && isEditFeaturesActive) {
1079+
if (effectiveMode === "edit" && isEditFeaturesActive) {
10671080
_LPEditMode();
10681081
} else {
1069-
_LPPreviewMode();
1082+
_LPHighlightMode();
10701083
}
10711084

10721085
_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="todo: preview mode title" class="btn-alt-quiet toolbar-button">
5+
<button id="previewModeLivePreviewButton" title="{{clickToPreview}}" 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_MODE_PREVIEW": "Preview Mode",
193+
"LIVE_PREVIEW_CLICK_TO_PREVIEW_PAGE": "Preview Page",
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} 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",
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",
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)